色相環配色完全手冊：三原色到實戰配色，一篇就學會

色相環配色教學的核心是用角度判斷色彩關係，再把判斷結果對應到設計目的上，重點從來就不是背熟 12 個色名。標準的 12 色相環把紅黃藍三原色展開成環狀結構，相鄰是相似色、180 度對角是互補色、介於兩者之間是對比色，整組工具讓配色從「憑感覺」變成可以一步一步決定的流程。給網頁與品牌設計用，還有一道額外關卡要過：WCAG 2.1 要求正常文字對比度至少 4.5:1（來源：W3C WCAG 2.1 官方文件），否則再和諧的色環組合放到螢幕上也會讓字讀不清楚。

重點先看：12 色相環以角度決定關係，五大配色法是一條依設計目的排序的決策路徑，彼此並不平等，網頁配色最後一步必過 WCAG AA 4.5:1 對比度（來源：W3C）。

很多教學把五大配色法像菜單一樣平鋪列出，讀完你還是不知道手上這個畫面該挑哪一個。其實配色法背後有一條清楚的選擇邏輯：你要的是和諧、對比，還是活力？把這個問題先答出來，剩下的步驟會自己接上。如果你還在找系統性的色彩理論，可以先翻一下 色彩學完整指南與對比色互補色解析，把基礎名詞先對齊。

色相環：把色彩關係轉成角度的工具

色相環（Color Wheel）是把色彩依色相排列成環狀的色彩學工具，標準版本是 12 色相環。它真正有用的地方，是把顏色之間的相似、對比、互補關係，全部轉成可以一眼看出的角度距離，這樣配色就可以量化判斷，不必靠「我覺得這樣好看」。換句話說，色環的用途是回答「這兩個顏色放一起會和諧還是衝突」這個問題，重點在於看關係，而非背色名。

色環又稱色輪、色圈，12 色版本源自色彩學教科書中常見的伊登 12 色相環，由 Johannes Itten 在《色彩的藝術》一書中提出，以紅、黃、藍三原色為基礎展開（來源：Itten《色彩的藝術》，色彩學教科書通論）。它把原本零散的色彩，按照色相、性質系統化分類，放進環狀結構裡。對 UI 原型設計與 Wireframe 差異 階段來說，這張地圖可以讓你在還沒開始上色前，就先預測配色走向。

核心只有一句話：角度決定關係。相鄰的兩色是相似色，180 度正對角的兩色是互補色，介於 100 度到 179 度之間的通稱對比色。把這個角度關係記住，比背 12 個色名還有用，因為配色時真正要判斷的是「關係」，色名只是輔助。這點對做 網頁設計必備的關鍵元素 的人特別重要，畫面元素一多，會頻繁需要快速判斷兩個色塊會不會打架。

色環的用途可以再往下延伸到情緒判斷。顏色會帶情緒聯想，這部分可以搭配 色彩心理學與顏色帶來的情緒聯想 一起看。先確定畫面要傳達的情緒，再回頭到色環上找對應色相，配色的命中率會高很多。做 Logo 標準字設計與字體挑選方法 或 網站 Logo 設計與配色實戰 時，這個順序尤其重要，因為 Logo 的色彩記憶點幾乎決定了品牌第一印象。

12 色相環的三層生成結構

12 色相環的結構可以用三層記住。第一層是紅黃藍三原色，第二層是兩兩相加得到的橙綠紫三個二次色，第三層是原色與相鄰二次色再互調出的六個三次色，三層疊起來剛好就是 12 色。這個生成邏輯很乾淨，只要記住三層，就不用死背色名順序。

這裡有一個很容易踩到的地雷要分清楚。色環用的三原色是 RYB（紅黃藍），對應的是繪畫與印刷的混色邏輯；螢幕顯色用的則是 RGB（紅綠藍）光的三原色，兩者不要混為一談。想做網頁的人，這個差異直接影響你輸出的色碼會怎麼被螢幕還原，完整的差異解析可以看 RGB 與 CMYK 色彩模式與三原色差異。對做 CSS Box Model 與 padding margin 差異 這類實作的人來說，搞錯色彩模式會讓設計稿與實際頁面對不上。

層級	成員	生成方式
第一層 三原色	紅、黃、藍	無法由其他色混合而成，色環的根
第二層 二次色	橙、綠、紫	三原色兩兩相加
第三層 三次色	紅橙、黃橙、黃綠、藍綠、藍紫、紅紫	原色與相鄰二次色相加

記結構有個小訣竅：把色環想成時鐘。12 個色平均分布，每格約 30 度，繞一圈剛好 360 度。記住角度就記住關係，例如紅與綠剛好隔半圈是互補，紅與橙只差一格是相似。這個幾何記法對做 排版設計技巧與字體行距設定 或 網頁版面設計與 RWD 響應式排版 的人很實用，因為會不斷在畫面上重複判斷色彩距離。

真正要內化的是「角度決定關係」這件事，色名不必硬背。色環的幾何結構已經把判斷邏輯包進去，會看位置就能推導出和諧或衝突。這也是為什麼 品牌主色怎麼挑與色彩心理學應用 的流程，通常會先從色環定位開始，再往下展開整組品牌色。

五大配色法：依設計目的選，而不是憑喜好

五大配色法是一條依設計目的排序的決策路徑，彼此並非平行選項。要和諧安穩，選單色或鄰近；要強烈吸睛，選互補；要對比又不刺眼，選分割互補；要活力與平衡兼具，選三等分。先決定你要的情緒是什麼，再回頭挑配色法，多數人卡住都是因為把順序顛倒了。

把這五個方法當平等選項，是新手最常犯的錯。這張決策表把「設計目的 → 配色法 → 適用場景」串起來，讓你不用每次都重新推理。這對做 CTA 行動呼籲按鈕的設計與心理學 或 Landing Page 銷售頁製作教學 的人尤其有幫助，因為這類頁面每一個區塊的配色目的都不一樣。

設計目的	建議配色法	色環關係	適用場景
和諧、品牌一致性	單色 Monochromatic	同一色相調深淺飽和度	極簡網站、企業官網、內容型部落格
自然不雜亂	鄰近 Analogous	相鄰 2 至 3 色	內容多的頁面、長文章、產品介紹
強烈吸睛	互補 Complementary	180 度對角	CTA 按鈕、強調元素、促銷Banner
有張力又不刺眼	分割互補 Split Complementary	互補色兩側鄰色	新手進階、需要主視覺又怕失衡的頁面
活力平衡	三等分 Triadic	等距三色	活潑品牌、兒童或創意類網站

走和諧路線的兩個方法，操作邏輯剛好相反。單色配色法（Monochromatic）不換色相，只在一個色相上調深淺與飽和度來產生層次，例如以藍色為主延伸出淺藍、深藍、灰藍；它的優點是最安全、最能在不同載具上維持一致，是建立品牌色彩規範時最穩的起點，這也是 經典品牌 Logo 設計案例分析 裡常見的手法。鄰近配色法（Analogous）則換色相、但只換相鄰的兩到三色，例如藍、青藍、綠，因為色相相近所以依然和諧，卻比單色多了變化；做 Bento Grid 網頁排版設計教學 這類資訊密集版型時，鄰近色幾乎是預設值，能讓多個區塊並存卻不打架。兩者的共同前提是內容多、怕雜亂，需要降低視覺雜訊。

走張力路線的三個方法，差別在於「要多少對比、能容忍多少失衡」。互補配色法（Complementary）取 180 度對角兩色，對比最強，經典的紅配綠就是一例，但面積必須一主一輔，否則眼睛會打架，因此最適合留給 CTA 按鈕或需要聚焦的元素。分割互補（Split Complementary）把互補色換成它兩側的鄰色，例如綠色搭配紅紫與紅橘，保留張力卻比正互補柔和，是新手最容易上手的進階選項，做 作品集網站設計指南 時很適合用來兼顧主視覺與細節強調。三等分（Triadic）取等距三色，例如黃、藍、紅，活力最高但也最容易亂，使用時必須指定一個主色、兩個輔色，否則三色各佔三分之一會變成一盤散沙。把這三者的失衡風險由低到高排，正好是分割互補、互補、三等分，對比強度則反過來遞增。

歸納起來，五大配色法的選擇本質上是在控制色彩之間的距離：距離越近越和諧，越遠越有張力。用距離這個參數去調，比記配色法的名字更直接。這也是為什麼 網頁設計配色的四步驟色彩計畫 會把配色法當作流程中的一個選擇點，可以隨設計目的調整，並非一次定死的設定。

面積比例才是和諧的真正關鍵：60-30-10 法則

配色法告訴你該選哪些顏色，但真正決定畫面會不會失衡的，是這些顏色各佔多少面積。色彩學裡流傳最久的比例參考是 60-30-10 法則：主色佔約六成、輔色約三成、強調色約一成。這個比例來自室內設計的傳統慣例，後來被廣泛搬到平面與網頁設計，因為它同時滿足兩個需求：主色夠大所以觀感統一，強調色夠小所以能跳出來。配色法選完顏色之後，把面積再過一次 60-30-10，是最便宜的保險。

把五大配色法套上 60-30-10 一起看，每一種都會出現不同的調性。單色法時，六成的主色加上三成同色相的深淺變化，會得到極致統一的觀感，適合品牌官網。鄰近色時，主色六成、第二個鄰色三成、第三個鄰色一成，色彩豐富卻依然和諧。互補色時更要嚴守比例：主色佔九成、互補色只佔一成做 CTA，一旦互補色逼近三成，畫面就會開始震動。三等分配色最容易在這一關翻車，因為三色等距的誘惑會讓人把面積也平均分，這時務必重新指定一個主色拉到六成以上。

配色法	主色建議佔比	輔色建議佔比	強調色建議佔比	失衡訊號
單色	約 60%	約 30%（深淺變化）	約 10%	深淺階數太少，畫面扁平
鄰近	約 60%	約 30%	約 10%	三色明度太接近，分不出層次
互補	約 85% 至 90%	不分配	約 10% 至 15%	互補色超過 30%，眼睛震動
分割互補	約 60%	約 30%	約 10%	兩個輔色飽和度同時過高
三等分	約 60% 以上	約 25%	約 15%	三色各佔三分之一，失去主從

這張表的重點是「失衡訊號」那一欄。配色出問題時，問題很少出在選錯配色法，多半出在面積或明度失控。當你看著畫面覺得「怪怪的但說不出哪裡怪」，先懷疑面積比例，再懷疑明度，最後才懷疑配色法。這個檢查順序可以省下大量反覆調色的時間。對做 Bento Grid 網頁排版設計教學 這種區塊密集的版型尤其重要，因為每個區塊都會佔走一部分面積，比例會被版型結構放大或壓縮。

進階：矩形配色法與正方形配色法

五大配色法之外，還有兩種進階的四色組合，分別是矩形配色法（Tetradic 或 Rectangular）與正方形配色法（Square）。矩形配色法取色環上構成矩形的四個角，也就是兩組互補色，例如紅配綠加藍配橙。它的優點是色彩豐富、變化空間大，缺點是要同時管理四個顏色的主從關係，難度比三等分還高。正方形配色法則是取色環上等距的四個角，每色相隔 90 度，結構更對稱但也更容易顯得平均而失去焦點。這兩種方法適合用在需要多色卻又不能失序的視覺，例如資訊圖表、品牌系統的輔助色譜，但不建議新手拿來做主要配色。

使用四色組合時，最務實的做法是先把四個顏色排成主、輔、強調、備用的順序，並明顯拉開飽和度。四個顏色都維持高飽和幾乎一定會失敗，正確的做法是讓一兩個顏色降飽和、降明度，退到背景層，只保留一兩個高飽和的顏色擔任視覺焦點。這個「降階」的概念，其實就是把單色法調深淺的邏輯，套用到多色組合上。Color Game 最後一關練的正是矩形配色，能過那一關，代表你對四色主從關係的直覺已經到位。

明度與彩度：色環之外、卻決定成敗的兩個維度

色相環只描述色相一個維度，但一個顏色完整的外觀由三個維度決定：色相、明度、彩度。明度是指顏色的亮暗程度，彩度是指顏色的鮮豔程度。配色之所以在實務上比色環教學示範的還難，就是因為色環只幫你解決了色相關係，明度與彩度完全要靠你自己另外控制。多數人覺得「顏色選對了畫面還是怪」，答案十之八九出在明度或彩度失衡。

明度失衡最常見的症狀，是相鄰區塊分不出層次。例如三個區塊用了三個不同的色相，但明度幾乎一樣，視覺上會糊成一片。判斷明度的訣竅是把畫面轉成灰階，或用設計軟體加上黑白濾鏡預覽：如果灰階後所有區塊糊在一起，就代表明度差異不夠。彩度失衡則相反，症狀是畫面太刺眼或太花，通常是兩個以上的顏色同時維持高彩度。解法是讓主要顏色維持彩度，其他顏色降彩度退到背景，用彩度落差來建立主從。這套明度管層次、彩度管主從的分工，是色相環之外最該建立的第二個配色直覺。

互補色與對比色的角度界線

互補色、對比色、相似色的差別，完全在色環上的角度。相似色是相鄰，對比色是 100 到 179 度，互補色是剛好 180 度對角。互補色其實是對比色的極端特例，對比最強也最容易失衡，這也是它最常被誤用的原因。

關鍵差異是：一個顏色的互補色只有一組，就是它在色環上正對面那一個；但對比色有很多組，只要落在 100 到 179 度之間都算。所以互補色其實是對比色的子集合，兩者是包含關係而非平行概念。紅配綠是經典互補色，實務上面積比建議懸殊，主色佔大多數面積、互補色只做點綴，這樣才不會讓眼睛打架。這個比例原則在更詳細的色彩學教材裡會進一步拆解。

色彩關係	角度範圍	組數	視覺效果	失衡風險
相似色	相鄰（約 0-30 度）	多組	和諧、平靜	低，可能過於單調
對比色	100-179 度	多組	張力明顯	中，需控制飽和度
互補色	剛好 180 度	每色僅 1 組	對比最強	高，面積必須懸殊

對比色過渡到分割互補，就是為了降低互補色的失衡感。當你覺得正互補太刺眼，往兩側各偏一點，變成分割互補，整個畫面立刻柔和下來，但張力還在。這是新手進階時最值得練的手感。對做 Figma 中文完整 UIUX 教學 或 Figma 完整指南與入門 的人來說，可以直接在畫面上拖動色點感受這個變化。

這裡有一個網頁專屬的可讀性提醒。互補色配文字背景時，常常會踩到 WCAG 對比度不足的問題，因為兩個高飽和的互補色放一起，亮度差可能反而很小。例如紅底綠字或綠底紅字，看起來對比強烈，實際上文字常常糊在背景上。所以互補色用於文字組合時，必須額外用對比檢查器確認，不能只靠色環判斷。這部分的完整流程可以參考前面的網頁色彩計畫。

互補色配文字背景最常踩的坑，是把色環上對比最強的兩色直接拿來配標題與背景，結果在低階螢幕上整個糊成一團。色環上的「對比」和可讀性需要的「明度對比」是兩件事，前者管色相距離，後者管亮度差。把這兩個分開想，配色才會穩。這也是 21 個網頁配色工具與靈感網站 裡多數工具會把對比檢查器獨立出來的原因。

免費色相環配色軟體，Adobe Color 與 Color Supply 怎麼選

免費色相環配色工具裡，Adobe Color 勝在色彩調和規則與對比檢查器最完整，Color Supply 勝在切換配色法快且能即時預覽設計素材，配色練習遊戲 Color Game 則適合用闖關訓練色感。依需求挑一個就好，不用全部都裝，工具是拿來用不是拿來收集的。

工具	對比檢查	吸取照片色	即時預覽素材	配色法切換	主要強項
Adobe Color	有（內建檢查器）	有	無	有（色彩調和規則）	功能最完整，含漸層與流行色庫
Color Supply	無	無	有	有（一鍵切換）	切換配色法最快，即時看套用效果
Color Game	無	無	無	無	闖關練色感，訓練直覺

Adobe Color 是 Adobe 推出的免費線上配色工具（來源：Adobe Color 官方網站功能頁）。它以色輪為主，畫面左方有色彩調和規則選項，選好規則後移動一個圓圈，其他圓圈就會依規則自動調整位置。最實用的是內建的顏色對比檢查器，可以檢查文字與背景的對比是否足夠，這對做 CSS 入門與基本語法教學 或 響應式網頁設計 RWD 觀念 的人來說，等於是把 WCAG 檢查直接內建。它還提供上傳照片吸取配色、吸取照片產出漸層、線上瀏覽流行色庫等功能，完整度最高。

Color Supply 是一款線上色相環配色軟體（來源：Color Supply 官方網站）。它最大的優點是只要按色環下方的 Back 或 Next，就能一鍵切換單色、鄰近、互補、分割互補、三等分配色法，並同步預覽配色套到設計素材上的樣子，還會列出使用的色碼。對還在學配色的人，這個即時預覽非常直觀。做 Canva 新手設計技巧教學 或 Canva Pro 進階設計技巧 時，可以先把 Color Supply 配好的色碼直接搬過去用。

Color Game 則是一款配色練習遊戲，用闖關方式訓練色感。第一關練色調，第二關練飽和度，第三關開始找互補色，第四關鄰近色，第五關三等分配色，最後一關進階到四色的矩形配色法（Tetradic）。它的用途是訓練你對色彩關係的直覺，並非用來產出色碼。搭配 UIUX 設計師實用的 ChatGPT 指令 或 免費 Icon 圖示網站推薦 一起用，可以讓整個設計流程更順。

多數人裝一個就夠了。做網頁的人，Adobe Color 因為有對比檢查器，cp 值最高；做社群素材或簡報，Color Supply 的即時預覽更實用；Color Game 則是閒暇時拿來練直覺的。不要為了齊全而把三個都裝，那只會分散注意力。需要更多選擇可以參考前面提到的配色工具總整理，裡面有更完整的清單。

網頁設計怎麼用色相環配色：從主色到對比度的完整流程

網頁配色建議四個步驟走。先依品牌情緒定主色，再用單色或鄰近法建立和諧底色，接著用互補或分割互補點綴 CTA 與強調元素，最後務必用對比檢查器確認文字與背景通過 WCAG AA，正常文字要達到 4.5:1（來源：W3C WCAG 2.1）。顏色越多越亂，整站控制在三色內最穩。

第一步定主色。從網站風格反推一個主色相：簡約走藍灰、專業走深藍或墨綠、活潑走橙或黃。主色決定後，整站的色彩基調就定了。這一步如果想做得更系統，可以參考前面提過的品牌主色挑選方法，或 品牌網站的關鍵設計建議，把品牌情緒先寫下來再對應色相。

第二步打底色。用單色或鄰近法把主色擴展成背景、區塊、邊框的層次。例如主色是藍，就延伸出淺藍背景、深藍邊框、灰藍分隔線。這一層顏色多，但彼此相近，所以不會亂。做 網頁設計從零到一的完整指南 時，這一步通常會直接決定整站的觀感。

第三步加強調。互補或分割互補色留給按鈕、連結、提示訊息這類需要被點擊或被注意的元素。因為強調色面積小、對比強，才能跳出來。這一步的細節可以搭配前面提到的 CTA 設計觀念，與 Landing Page 轉換率優化方法，把強調色的位置放在轉換路徑上。

第四步收斂對比度，這一步最常被略過，但也最重要。WCAG 2.1 規範正常文字對比度至少 4.5:1、大字體至少 3:1（來源：W3C WCAG 2.1 官方文件）。你可以用 Adobe Color 的對比檢查器，或直接打開瀏覽器 DevTools，它內建就能算對比比值。對做 AWD 與 RWD 自適應響應式比較 或 Elementor 頁面編輯器完整教學 的人，DevTools 的對比檢查幾乎是免安裝的解法。

網頁配色有一個專屬提醒：螢幕是發光體，飽和度高的互補色長時間閱讀會造成視覺疲勞，面積一定要克制。這和印刷品的配色邏輯不同，紙本不發光，顏色看久比較不會累。所以做網頁時，互補色的飽和度通常要往下調一點，或限制在小面積。完整的網頁色彩計畫可以看前面提過的四步驟流程，裡面有更細的執行方式。

WCAG 對比度分級：AA 與 AAA 的實務差別

WCAG 2.1 的對比度要求其實分成兩級。AA 級要求正常文字至少 4.5:1、大字體（約 18pt 或 14pt 粗體以上）至少 3:1，這是多數商業網站的最低標準。AAA 級則要求正常文字至少 7:1、大字體至少 4.5:1，標準明顯更嚴。兩者的差別在於：AA 是可接受的基本線，AAA 才能讓視力較弱的使用者也舒適閱讀。對政府、醫療、教育類網站，AAA 往往是採購規格的一部分；對一般商業網站，做到 AA 已足以同時滿足法規與搜尋引擎對頁面體驗的要求（來源：W3C WCAG 2.1 官方文件）。

有一個常被忽略的細節：對比度是文字前景與背景之間的相對亮度比值，與色相幾乎無關。意思是兩個看起來對比強烈的互補色，如果明度接近，對比度可能遠低於 4.5:1。反過來說，兩個明度差距大的顏色，即便色相很相近，也能輕鬆達到 AAA。這就是為什麼前面一再強調「色環上的對比」與「可讀性需要的明度對比」是兩件事。實作時有一個快捷判斷法：把背景拉到接近白或接近黑這兩個極端，再放任何文字顏色上去，幾乎都會過標。想保留彩色背景，就要靠對比檢查器逐一驗證，沒有捷徑。

等級	正常文字	大字體	常見適用場景
WCAG AA	至少 4.5:1	至少 3:1	商業網站、電商、部落格的最低標準
WCAG AAA	至少 7:1	至少 4.5:1	政府、醫療、教育、無障礙優先網站
非文字元件	至少 3:1	至少 3:1	圖示、圖表線條、表單邊框等介面元件

表格最後一列的非文字元件特別值得注意。按鈕邊框、圖示、表單輸入框的聚焦狀態，這些元件即使沒有文字，WCAG 也要求與背景至少 3:1 的對比，否則視力較弱的使用者會找不到可互動的元素。做 AWD 與 RWD 自適應響應式比較 或 Elementor 頁面編輯器完整教學 時，表單與按鈕的對比是最容易漏掉、卻會直接影響轉換率的一環。

如果你是自架站站長，這個流程可以套在任何主題或頁面編輯器上。例如用 WordPress 頁面編輯器深度評測 裡的工具，或 網頁製作平台與架站工具比較 的平台，配色邏輯都一樣：先定主色、再打底、再加強調、最後驗對比。想知道整體自學路徑可以參考 網頁設計自學路線圖。

常見配色錯誤與破解：顏色太多、對比不足、主副不分

用色相環配色最容易犯的錯有四個，成因剛好對應前面幾組觀念：顏色用太多讓資訊難讀、互補色面積對等造成刺眼、只看色相沒檢查明度對比讓文字糊在背景上、以及照抄流行色卻與品牌情緒不符。四個錯的破解順序也一致，先收色、再拉開面積、最後補對比。

第一個錯誤是配色超過三色。當一個頁面塞了五六種顏色，視覺會變成雜訊，讀者反而抓不到重點。破解方式是把整站配色限制在主色加一個輔色加一個強調色，三色為上限。這個原則對做 自架網站常見的網頁設計錯誤 的人尤其重要，因為顏色太多是最普遍的問題。

第二個錯誤是互補色面積對等。當紅與綠各佔畫面一半，眼睛會不斷在兩色之間跳動，產生震動感，看久非常不舒服。破解方式是讓主色主導版面，互補色只佔小面積做點綴，這樣既有對比又不刺眼。這個比例觀念對做 餐飲網站設計與品牌官網技巧 或 作品集範本與履歷模板 的人很實用，因為這類頁面常需要強調重點又不能太花。

第三個錯誤是只配色相不管明度。很多人以為互補色對比最強，就拿來配文字與背景，結果紅底綠字看起來對比強烈，實際上因為兩色明度接近，文字反而糊成一團。破解方式是最後一步必跑對比檢查器，確認正常文字對比度至少 4.5:1。這個觀念在排版設計技巧裡也很關鍵，因為字體與背景的對比直接影響可讀性。

第四個錯誤是照抄流行色，卻與品牌情緒不符。每年都有流行色，但流行色不一定適合你的品牌。破解方式是先定品牌情緒再選色相，流行色只能當參考，不能當主色。搭配色彩心理學與品牌主色挑選流程一起思考，才不會被流行牽著走。

配色疑難排解表：症狀、成因、修正

把前面散落的修正觀念整理成一張對照表，當畫面出現特定症狀時可以直接對照成因與修正步驟。這張表的設計邏輯是先看症狀、再找成因、最後給動作，因為多數人配色出問題時，最先能描述的是「看起來怪」，而非「哪個參數錯了」。先用症狀定位，能最快縮小排查範圍。

症狀	最可能成因	修正動作
畫面糊成一片，分不出區塊	多個顏色明度太接近	拉開明度差距，把背景推向極亮或極暗
眼睛看久會震動或刺痛	互補色面積接近或雙方飽和度都過高	互補色降到一成面積，其中一色降飽和
看起來花、抓不到重點	顏色超過三色，或強調色沒有唯一性	收斂到主輔強三色，強調色只用一個
文字糊在背景上讀不清	明度對比不足，色相對比無法補救	用對比檢查器驗證至 4.5:1，加深文字或拉亮背景
配色正確但整體廉價感	所有顏色都維持高彩度	留一色高彩度，其餘降彩度退到背景層
換了螢幕顏色就跑掉	未指定色彩模式或用了印刷思維的色域	確認使用 sRGB 或顯示器色彩空間，避免用 CMYK 思考網頁
暗色模式下配色失效	直接把亮色背景反相，未重新調明度	暗色模式重新挑明度階，背景不用純黑，文字不用純白

表中最容易被忽略的是暗色模式那一列。很多網站直接把白底黑字反相成黑底白字，看起來沒問題，實際上純黑背景搭配純白文字的對比度會高到 21:1，遠超過 AAA 標準，反而造成眼睛疲勞。暗色模式的正確做法是用深灰背景（例如明度約一成到兩成的灰）配淺灰文字，把對比度控制在 7:1 到 15:1 之間，長時間閱讀才會舒服。這也是為什麼主流作業系統的暗色模式，幾乎都不是純黑底。對做 響應式網頁設計 RWD 觀念 的人來說，暗色模式已經是基本配備，配色的明度階要分開設計，不能只靠反相。

以一個中小型內容站或電商網站為例，這類站常見的狀況是配色在不知不覺中超過三色。主色、輔色、強調色之外，往往還多了社群分享按鈕的藍、評分星號的黃、促銷貼紙的紅，最後整站實際用到的色相大約落在五到七個之間，遠超過前面建議的三色上限。依這類站的典型表現，CTA 按鈕的實測對比度常常也只有約 2.5:1 到 3.5:1，離 WCAG AA 的 4.5:1 還有一段距離，原因多半是強調色直接套用品牌標準色，沒有針對網頁背景重新校正明度。把這張疑難排解表拿來對照，症狀多半集中在「看起來花、抓不到重點」與「文字糊在背景上讀不清」這兩列，成因正好對應顏色超量與明度對比不足。

遇到這種狀況，決策順序建議是先收色、再補對比，兩者不要同時動。先把整站色相限縮回主色加一個輔色加一個強調色，其餘功能性顏色（例如警示紅、成功綠）盡量沿用既有色相的深淺變化，而不是再引入新色相；接著針對 CTA 與正文文字，用對比檢查器逐一驗證到至少 4.5:1，過不了的就把文字加深或背景拉亮，而不是換掉品牌色。這裡要誠實提醒一個限制：60-30-10 法則能解決面積失衡，卻救不了品牌主色本身彩度過高、放到發光螢幕上會刺眼的根本問題。若收色、補對比都做完，畫面還是讓人覺得疲勞，通常不是比例沒調好，而是主色飽和度本身需要往下修，這時動主色反而比繼續調輔色更有效。

把配色當成資源分配，顏色越少，每個顏色的份量越重，畫面反而更有力量。喜歡的色就全部塞進去、一個畫面用上七種顏色，自以為豐富，結果往往讓使用者看了頭暈。這也是為什麼 網頁設計靈感參考網站 裡的高分作品，配色幾乎都很節制。

練習配色判斷時，商用免費圖庫網站總整理 提供的素材可以拿來反覆套用與驗證；想把字體與色彩一起考量，中文字體設計與黑體明體圓體推薦 與 英文字體推薦與襯線非襯線選擇 是相對應的字體側參考。這些工具本身不會幫你配色，但能讓練習時有更多素材可以套用。

把配色知識落地到實際專案時，廣告策略規劃與預算分配框架 能把配色放進行銷與轉換的脈絡裡一起想，會更清楚為什麼某種配色在特定場景特別有效。

回顧一下整組觀念：色相環靠角度判斷關係，相鄰是相似、100 至 179 度是對比、180 度才是互補；五大配色法按設計目的排序，和諧走單色或鄰近、吸睛走互補、要平衡又有張力走分割互補與三等分，順序對了配色才會穩；網頁配色則卡在 WCAG AA 對比度 4.5:1 這一關，過不了再好看的色環組合，字也讀不出來。這三條疊起來，就是這篇要講的全部。

色相環配色常見問題 FAQ

下面把讀者最常問的色相環配色問題一次整理，每題用最精煉的方式回答，方便快速查找。

色相環是什麼？有什麼用途？

色相環是把所有顏色按色相排成環狀的色彩工具，標準版有 12 色。用途是讓你一眼看出任意兩色是相似、對比還是互補，等於幫配色和諧度提供一個客觀判斷標準，讓配色不再只能憑感覺。

12 色相環是怎麼形成的？

12 色相環分三層生成：第一層是紅黃藍三原色，第二層是兩兩混合出的橙綠紫，第三層是原色與相鄰二次色再互調出的六個中間色，三層疊起來就是 12 色。

色相環五大配色法分別是什麼？

五大配色法是單色、鄰近、互補、分割互補、三等分。它們對應不同的視覺需求：單色與鄰近走和諧路線、互補走強對比、分割互補在兩者之間取得平衡、三等分提供高活力的組合。

互補色和分割互補配色哪裡不同？

互補色取的是色環正對角那一個顏色，對比最強也最易失衡；分割互補則改取互補色兩側的鄰色，保留張力卻降低刺眼感，是新手較好上手的進階選擇。

網頁配色對比度不夠怎麼辦？

用 Adobe Color 的對比檢查器或瀏覽器 DevTools 重新量測，把正常文字的對比度調到至少 4.5:1。常見做法是加深文字色、拉亮背景色，或更換成明度差距更大的組合。