網頁配色分析教學：3 個免費色彩配置工具，抓出別人網站的配色

色彩配置是很多人架站時最難下決定的一步：顏色和心理感受、品牌形象、使用者習慣都有關，沒有標準答案。與其憑空想像，不如先參考做得好的網站與品牌，分析它們用了哪些顏色、比例如何，再調整成自己的版本。這篇介紹三個免費的網頁配色工具，從找靈感、分析別人網站的色彩，到產生一整組可以直接用的色碼。

ColorCombos：找配色組合、分析網站顏色

ColorCombos 是老牌的網頁配色網站，提供配色組合庫、熱門顏色、配色測試與網站顏色抓取等工具。網站介面比較陽春，但功能實用。

ColorCombos 網站首頁與上方選單

瀏覽配色組合

在 Combos 頁面可以看到大量建議的色彩組合。點組合下方的眼睛圖示，會進入詳細頁面，列出每個顏色的 Hex 色碼與 RGB 比例，下方還會示範這些顏色當作文字與背景時的效果，方便判斷文字是否清楚。

ColorCombos 的配色組合列表，每組下方有預覽圖示

配色組合詳細頁列出各顏色的 Hex 色碼

配色組合的 RGB 比例與文字配色效果示範

查看熱門顏色與顏色標籤

Colors 頁面列出較多網站使用的主流顏色。被越多網站採用的顏色，通常代表越多人能接受，適合當作保守的起點。

ColorCombos 的熱門顏色列表

也可以用顏色標籤找特定主題的配色，例如 ocean、autumn，不過標籤都是英文。

ColorCombos 的英文顏色標籤列表

用 Grab Colors 抓出別人網站的配色

單看色票很難想像放到網站上的樣子。比較有效的方法是：先找到你覺得配色舒服的網站，再分析它用了哪些顏色。在 ColorCombos 選單點 Tools → Grab Colors。

ColorCombos 選單中的 Tools → Grab Colors

在輸入框貼上目標網站網址，按 Get。

Grab Colors 頁面的網址輸入框與 Get 按鈕

幾秒後就會列出該網站的主要顏色與 Hex 色碼。下圖是分析舊版網站的結果。

Grab Colors 分析網站後列出的主要顏色與色碼

BrandColors：參考知名品牌的官方色

品牌的 Logo 與主色會直接影響別人對品牌的印象。BrandColors 收錄了大量知名品牌的官方色碼，例如 Adidas、Spotify、Airbnb，可以觀察同產業的品牌偏好什麼色系，也能把選取的品牌色下載成 CSS、ASE（Adobe）等格式。

BrandColors 網站上的品牌官方色碼列表

Material Palette：選兩個顏色產生整組配色

Material Palette 以 Google Material Design 的色彩系統為基礎，原本是為 App 設計所用，但同樣適用於網站。

Material Palette 首頁的顏色選擇區

依序點選兩個顏色（主色與強調色），右側會即時預覽套用在介面上的效果，並列出深色主色、淺色主色、文字色、分隔線色等完整配色，可以按 DOWNLOAD 下載成 CSS 等格式。

選擇兩個藍色系後，右側產生配色建議與 DOWNLOAD 按鈕

COLORS 頁面則列出 Material Design 的各個主色與深淺階層，點一下就能複製色碼，適合找同色系的深淺變化。

Material Palette 的 COLORS 頁面，列出各顏色的深淺色碼

選好顏色後，怎麼套用到網站？

• 先定三種角色：主色（品牌色，用在按鈕、重點）、輔助色（區塊背景、圖示）、中性色（文字、背景、分隔線）。常見比例是中性色佔大部分、主色少量點綴。
• 設定成全域色彩：Elementor 的網站設定、區塊佈景主題的「樣式」都可以設定全域顏色，日後要改色只要改一處。
• 檢查對比：文字與背景的對比太低會看不清楚，特別是淺灰字配白底；可以用瀏覽器開發人員工具的對比檢查確認。

想找更多配色靈感，也可以參考 Adobe Color 配色工具。

結語

網站配色沒有標準答案，但有方法：先蒐集喜歡的網站與同產業品牌的配色，用工具抓出色碼，再依品牌調性決定主色、輔助色與中性色的比例。配色太大眾會缺乏特色，太花又顯得雜亂；定案後把顏色設定成全域色彩，網站從頭到尾都會維持一致的視覺。