重點整理
不知道網站要用什麼顏色時，最快的方法是「參考 + 分析」：用 ColorCombos 瀏覽現成配色組合、用它的 Grab Colors 輸入網址抓出別人網站的主要色碼，再用 BrandColors 查知名品牌的官方色、用 Material Palette 選兩個主色自動產生整組配色。三個網站都免費、不用註冊。挑好後把色碼統一設定在佈景主題或頁面編輯器的全域色彩裡，網站配色就會一致。
色彩配置是很多人架站時最難下決定的一步：顏色和心理感受、品牌形象、使用者習慣都有關，沒有標準答案。與其憑空想像，不如先參考做得好的網站與品牌，分析它們用了哪些顏色、比例如何，再調整成自己的版本。這篇介紹三個免費的網頁配色工具，從找靈感、分析別人網站的色彩，到產生一整組可以直接用的色碼。
ColorCombos：找配色組合、分析網站顏色
ColorCombos 是老牌的網頁配色網站，提供配色組合庫、熱門顏色、配色測試與網站顏色抓取等工具。網站介面比較陽春，但功能實用。
瀏覽配色組合
在 Combos 頁面可以看到大量建議的色彩組合。點組合下方的眼睛圖示，會進入詳細頁面，列出每個顏色的 Hex 色碼與 RGB 比例，下方還會示範這些顏色當作文字與背景時的效果，方便判斷文字是否清楚。
查看熱門顏色與顏色標籤
Colors 頁面列出較多網站使用的主流顏色。被越多網站採用的顏色，通常代表越多人能接受，適合當作保守的起點。
也可以用顏色標籤找特定主題的配色，例如 ocean、autumn，不過標籤都是英文。
用 Grab Colors 抓出別人網站的配色
單看色票很難想像放到網站上的樣子。比較有效的方法是：先找到你覺得配色舒服的網站，再分析它用了哪些顏色。在 ColorCombos 選單點 Tools → Grab Colors。
在輸入框貼上目標網站網址，按 Get。
幾秒後就會列出該網站的主要顏色與 Hex 色碼。下圖是分析鵠學苑舊版網站的結果。
BrandColors：參考知名品牌的官方色
品牌的 Logo 與主色會直接影響別人對品牌的印象。BrandColors 收錄了大量知名品牌的官方色碼，例如 Adidas、Spotify、Airbnb，可以觀察同產業的品牌偏好什麼色系，也能把選取的品牌色下載成 CSS、ASE（Adobe）等格式。
Material Palette：選兩個顏色產生整組配色
Material Palette 以 Google Material Design 的色彩系統為基礎，原本是給 App 設計用，但同樣適用網站。
依序點選兩個顏色（主色與強調色），右側會即時預覽套用在介面上的效果，並列出深色主色、淺色主色、文字色、分隔線色等完整配色，可以按 DOWNLOAD 下載成 CSS 等格式。
COLORS 頁面則列出 Material Design 的各個主色與深淺階層，點一下就能複製色碼，適合找同色系的深淺變化。
選好顏色後，怎麼套用到網站？
- 先定三種角色：主色（品牌色，用在按鈕、重點）、輔助色（區塊背景、圖示）、中性色（文字、背景、分隔線）。常見比例是中性色佔大部分、主色少量點綴。
- 設定成全域色彩：Elementor 的網站設定、區塊佈景主題的「樣式」都可以設定全域顏色，日後要改色只要改一處。
- 檢查對比：文字與背景的對比太低會看不清楚，特別是淺灰字配白底；可以用瀏覽器開發人員工具的對比檢查確認。
想找更多配色靈感，也可以參考 Adobe Color 配色工具。
常見問題
網站配色要用幾個顏色？
建議主要用 2–3 個顏色，加上黑、白、灰等中性色。顏色太多容易顯得雜亂，也不容易建立品牌印象。
可以直接照抄別人網站的配色嗎？
顏色本身不受著作權保護，但完全照抄同業的配色容易讓訪客混淆、也缺乏辨識度。建議把分析結果當參考，再依自己的 Logo 與品牌調性調整明暗或比例。
有沒有可以分析網站顏色比例的工具？
ColorCombos 的 Grab Colors 可以抓出網站的主要顏色與色碼；如果想看各顏色在畫面中佔多少比例，可以搭配其他網站色彩分析工具，或把網頁截圖丟進圖片取色工具比對。
結語
網站配色沒有標準答案，但有方法：先蒐集喜歡的網站與同產業品牌的配色，用工具抓出色碼，再依品牌調性決定主色、輔助色與中性色的比例。配色太大眾會缺乏特色，太花又顯得雜亂；定案後把顏色設定成全域色彩，網站從頭到尾都會維持一致的視覺。