重點整理
網站配色先分好主色、輔色與強調色，再用 60-30-10 比例分配。本文整理 8 款免費配色工具（如 Coolors、Adobe Color），並說明如何套用到 WordPress、檢查無障礙對比度，以及新手常踩的配色地雷。
網站配色的基本邏輯：主色、輔色、強調色怎麼分工
在打開任何配色工具之前，先搞懂色彩該怎麼分工，才不會挑了一堆好看的顏色，放到網站上卻亂成一團。一般網站配色會分成三個角色：
- 主色（Primary Color）：通常是品牌識別色，用在 Logo、導覽列、頁首等最顯眼的地方，占整體版面比例最高，決定網站給人的第一印象。
- 輔色（Secondary Color）：用來搭配主色、豐富版面層次，常見於區塊背景、圖示或次要標題，比例次於主色。
- 強調色（Accent Color）：用量最少，但存在感最強，專門用在按鈕、連結、促購標籤這類「希望訪客一眼看到並採取行動」的元素上。
比例上可以參考設計界常用的「60-30-10 法則」：60% 的畫面用主色（通常是背景或大面積留白），30% 用輔色，剩下 10% 才是強調色。這樣分配的好處是，重點的 CTA 按鈕才會因為「稀有」而特別顯眼，不會被其他色塊稀釋掉。挑色時也建議先想清楚品牌想傳遞的調性，例如信任感、活力感或高級感，再回頭去找對應的色相，而不是看到喜歡的顏色就直接套用。
8 款設計師愛用的免費配色工具整理
以下是目前（2026 年）仍然穩定運作、且核心功能免費的配色工具，依用途分類給大家參考：
- Coolors：最多人推薦的快速配色神器，按下空白鍵就能隨機產生五色調色盤，支援鎖定喜歡的顏色再繼續生成，還能直接匯出成圖片、CSS 或 Tailwind 色票，適合完全沒靈感時當起點。
- Adobe Color:Adobe 官方出品，內建色彩理論規則（互補色、類比色、三角色等），不登入也能免費使用色輪與瀏覽配色，登入免費 Adobe 帳號（不需要訂閱 CC）後還能儲存色票並同步到 Photoshop、Illustrator，適合品牌識別系統的深度規劃。
- Paletton：以色環為核心的老牌工具，操作介面雖然稍微復古，但視覺化呈現「主色與輔助色之間的關係」特別直觀，很適合初學者拿來理解色彩理論、練習配色邏輯。
- Khroma：結合 AI 的配色工具，一開始請你挑出喜歡與不喜歡的顏色，系統會用這些偏好訓練專屬的色彩演算法，持續產生符合個人風格的配色組合，還會附上 WCAG 無障礙評級。
- Color Hunt：精選配色靈感庫，由社群持續上傳與投票，適合設計沒有太多想法時，直接瀏覽別人做好的四色組合，找靈感效率很高。
- Canva 色彩調色盤產生器：上傳一張喜歡的圖片（例如產品照或品牌意象照），就能自動萃取出五個代表色，不用註冊帳號、操作也最簡單，很適合從既有素材反推網站色系。
- ColorZilla:Chrome 瀏覽器擴充套件，內建滴管工具，可以直接吸取任何網頁畫面上的顏色色碼，很適合參考競品網站或喜歡的設計案例時，快速抓出對方使用的確切色碼。
- WebAIM Contrast Checker：輸入前景色與背景色的色碼，立即算出對比度數值，並顯示是否通過 WCAG AA / AAA 標準，是檢查網站文字可讀性時最常被引用的免費工具。
實務上，很多設計師會混搭使用，例如先用 Coolors 快速抓靈感，再用 Paletton 檢查色彩關係是否協調，最後用 WebAIM Contrast Checker 確認文字對比是否合格，三個工具搭配起來就能兼顧速度、理論與可用性。
選好配色之後，怎麼套用到 WordPress 網站
找到滿意的配色組合之後，下一步就是實際套進網站，常見做法有以下幾種：
- 透過 theme.json 設定（區塊主題/FSE 主題）：如果使用的是支援完整版面編輯的區塊主題，可以直接在主題的 theme.json 檔案中定義 color.palette 色票陣列，把主色、輔色、強調色的色碼登錄進去，之後在編輯器的顏色選單裡就會直接出現這些自訂色票，確保全站顏色統一、不會被個別頁面亂用其他顏色。
- 使用外觀customizer的「全域顏色」設定：傳統主題（非區塊主題）通常會在「外觀 >自訂」裡提供顏色設定選項，把配色工具產生的色碼分別填入主色、連結色、按鈕色等欄位即可，不需要碰到程式碼。
- 透過頁面編輯器外掛的全域樣式：像 Elementor 這類頁面編輯器，通常有「Global Colors（全域顏色）」功能，把配好的 4-5 個顏色登錄成全域色票後，之後在任何頁面拉版面，都能直接點選套用，維護起來也比較有效率，日後要換色系只要改一次全域設定就好。
- 搭配 CSS 變數統一管理：比較講究的做法，是把色碼定義成 CSS 自訂屬性(例如 –color-primary)，寫在主題的樣式表最上層，之後所有樣式都引用這組變數，未來要微調色彩濃淡時，只需要改一個地方，全站就會同步更新。
不管採用哪一種方式，核心原則都一樣：把配色「系統化」登錄起來，而不是每個頁面各自貼色碼，這樣才能確保全站視覺一致，日後維護與調整也會輕鬆很多。
配色工具在無障礙設計上的應用：對比度不能忽略
配色好看是一回事，但如果文字跟背景的對比度不夠，對視力不佳或色弱的訪客來說，內容可能根本讀不清楚，這也是近年網站無障礙（Accessibility）規範越來越被重視的原因。國際通用的 WCAG 標準對文字對比度有明確門檻：
- 一般內文:AA 等級至少需要 4.5:1 的對比度，AAA 等級則要達到 7:1。
- 大型文字或標題（通常指 18pt 以上或粗體 14pt 以上）：AA 等級門檻放寬為 3:1,AAA 等級為 4.5:1。
- 圖示與介面元件邊框：也建議至少維持 3:1 的對比度，才能讓按鈕、輸入框等操作元件清楚可辨識。
實際檢查時，可以把選好的主色、輔色代入前面介紹的 WebAIM Contrast Checker，或是 Coolors 內建的對比度檢查工具，兩者都會直接告訴你目前的配色組合是否過關。如果測出來不合格，通常可以維持色相不變，只微調明度（讓顏色更深或更淺）就能拉高對比度，不必整組配色打掉重練。特別提醒，強調色雖然要吸睛，但如果是用來做按鈕文字或連結底色，對比度沒過關的話，不只不美觀，更會直接影響網站的可用性與 SEO 評分。
新手常踩的配色地雷
整理一下實務上最常看到的配色錯誤，提醒大家避開：
- 顏色種類太多：同一個網站塞了五、六種以上的高彩度顏色，版面看起來花花綠綠、缺乏重點，建議整站控制在 3-4 個主要色彩以內。
- 強調色用得太浮濫：如果每個按鈕、標題、連結都用同一個搶眼的強調色，訪客反而分不清楚哪個才是真正重要的行動呼籲。
- 只看顏色好不好看，忽略對比度：淺灰色文字配白色背景雖然看起來很「高級」，但常常低於無障礙門檻，行動裝置在戶外強光下幾乎看不清楚。
- 沒有考慮品牌一致性：網站配色跟 Logo、名片、社群版位的顏色兜不起來，會讓品牌識別顯得零散、不專業。
- 直接複製別人的配色卻忽略情境：別的產業適合的高飽和活力色系，不一定適合強調專業信任感的 B2B 或醫療類網站，挑色前務必先回到品牌調性思考。
- 色彩沒有系統化管理：每次改版都憑感覺選新顏色，沒有建立色票規範，久了整個網站的色彩會越改越亂，難以維護。
常見問題
網站配色一定要照 60-30-10 法則嗎？
這只是通用參考比例，不是硬性規定。重點是主色、輔色、強調色要有明確分工，強調色維持在少量、集中用在 CTA 按鈕等重點區塊即可，實際比例可依版面彈性調整。
Coolors、Adobe Color 這些工具都是免費的嗎？
核心配色生成、匯出色碼等基本功能都免費，不需要付費也能完整使用。Adobe Color 不登入也能使用，要儲存色票才需登入免費 Adobe 帳號（不須訂閱 Creative Cloud），其餘工具多數連帳號都不用註冊。
我的網站沒有工程師，可以自己套用 theme.json 嗎？
如果使用的是傳統主題，建議直接透過「外觀 >自訂」的顏色設定或頁面編輯器（如 Elementor）的全域顏色功能操作即可；theme.json 屬於區塊主題的進階設定，涉及程式檔案，建議請熟悉 WordPress 的人員協助處理較安全。
對比度沒通過 WCAG 標準，一定要整組配色重選嗎？
不需要。通常只要維持色相不變，微調顏色的明度（加深或加亮），就能提升對比度並通過檢測，不必打掉重練整組配色方案。
結語
配色看似是設計中很「感性」的一環，但其實背後有清楚的邏輯與工具可以輔助：先用主色、輔色、強調色的分工搭配 60-30-10 法則打好基礎，再透過 Coolors、Adobe Color、Paletton 等免費工具快速找到協調的組合，最後別忘了用 WebAIM Contrast Checker 這類工具檢查對比度，確保每一位訪客都能舒適閱讀。把配色系統化登錄進 WordPress 的 theme.json 或外掛全域設定之後，不只維護方便，整個網站的專業度也會明顯提升。今天的教學就到這裡拉～希望大家持續追蹤 鵠學苑 的教學文章喔！