藍色的對面是什麼顏色？翻開美術課本的色相環，答案是橘色；換到螢幕設計用的色相環，純藍的正對面卻變成黃色。兩個答案都對，差別只在於這兩張圖用了不同的原色來畫。
這個差別會一路影響後面所有的配色判斷。互補、類似、三角這些常聽到的配色法，其實都是在色相環的圓周上量位置，而環一換畫法，同一種位置關係挑出來的顏色就不同；就算位置選對了，畫面的明暗、鮮豔度和面積分配，這張圖也完全沒有回答。
要把色相環用對，得先弄清楚它排了什麼，又刻意沒排什麼。
色相環是什麼？
色相環（color wheel）是把色相（hue）依序排成一個圓的圖。眼睛會把不同波長的光看成一段連續變化的顏色，順序是紅、橙、黃、綠、藍、紫，把這個順序首尾相接畫成圓，就是色相環。武藏野美術大學的藝術設計詞彙表把它定位成系統整理顏色的方法之一，同一頁也提醒，頁面上的色環只是表示色彩關係的概念圖，並未精確重現每個顏色，顏色也可能因瀏覽環境而看起來不同。
「色相」指的是紅、黃、藍這類「是什麼顏色」的性質，不含深淺，也不含鮮豔的程度。可以把色相環想成一張只標了方位的地圖，它告訴你誰在隔壁、誰在正對面，卻不標每個位置的海拔高低。
色相環、色環與色輪指的是同一種圖
搜尋或查資料時，色相環、色環、色輪三個詞常常混著用，它們指的是同一種圖。中央研究院的 AAT-Taiwan 藝術與建築索引典，把這個詞條的建議用詞定為「色輪」，「色環」與「色相環」則列為同義詞；坊間文章和美術課本多半寫色相環或色環，查到的都是同一張圖。
這個詞條對它的描述也值得記下來。色輪是由連續光譜色彩的楔形片段組成的環形圖表，包含原色、二次色與複色，互補色則放在對立的位置。索引典還註明，色輪會依用途不同而有不同樣貌，可能用來說明色素混合、色彩感知或色彩心理學。這句話正好解釋了開頭那個謎題，用途不同，畫出來的環就不同。
色相環只排色相，明度與彩度不在圖上
一張色相環只回答 3 件事：這是什麼顏色、它跟哪些顏色相鄰、它跟哪個顏色相對。顏色的另外兩個屬性，明度（value，亮或暗）與彩度（saturation，鮮豔或灰暗），都不在圖上。黑、白、灰這類沒有色相的無彩色（achromatic）也不在環上。Adobe 的色環說明頁也是這樣區分，有色相的顏色才會出現在色環上，無彩色則存在於色環之外。
所以色相環是二維的圖，只顯示色相之間的關係。相對地，孟塞爾（Munsell）系統是三維的色彩立體，同時包含色相、明度與彩度，用於專業的色彩指定與比對。這個落差也解釋了為什麼選完色相之後，畫面還得靠明暗和鮮豔度的調整才算完成。
十二色相環由原色、二次色與複色疊成
課本裡最常見的是十二色相環：3 個原色、3 個二次色、6 個複色，一共 12 個位置，每格相隔 30°。這個排法有一段來歷，而「十二色」也只是眾多分法裡比較好教、好懂的一種。
先認得這 12 個位置，後面的互補、三角角度才算得出來。
從牛頓的光譜圓到伊登的十二色環
把顏色排成圓的做法，可以追溯到牛頓。劍橋大學圖書館的資料指出，牛頓被普遍認為是第一個把一條色帶畫成圓形的人，見於 1704 年出版的《Opticks》。這裡常被混淆的是年份，1666 年是牛頓用稜鏡發現白光由各色光組成的年份，色環圖則要到 1704 年的《Opticks》才出現。泰特美術館（Tate）的介紹提到，他把色光依波長由短到長，也就是由紫到紅排好，再彎成一個輪。
之後的色環多半改以紅黃藍為底。劍橋大學圖書館指出，這類紅黃藍（RYB）色環在 19 世紀仍是主流，影響了藝術家用顏料調色的方式。泰特美術館的介紹再往後講到包浩斯，1919 年學校開辦後，教師伊登（Johannes Itten）做出新的十二等分色環，並教導色彩有色相、強度（飽和度）、明度與冷暖 4 個性質。課本裡最常看到的十二色環，就是這一脈的延續。
三原色、三個二次色與六個複色的位置
十二個位置是一層一層疊上去的。先在環上均勻放 3 個原色：紅、黃、藍，彼此相隔 120°。再把相鄰的兩個原色混在一起，得到夾在中間的二次色，橙是紅加黃，綠是黃加藍，紫是藍加紅。台灣教材常說的「間色」，指的就是二次色。
最後，原色與二次色之間剩下的空位補上複色，命名時把原色放在前面。Adobe 的色環說明列出的傳統十二色環，就是這個組成：
| 層次 | 數量 | 顏色 |
|---|---|---|
| 原色 | 3 | 紅、黃、藍 |
| 二次色 | 3 | 橙、綠、紫 |
| 複色 | 6 | 紅橙、黃橙、黃綠、藍綠、藍紫、紅紫 |
從紅色開始往同一個方向數，12 個位置依序是紅、紅橙、橙、黃橙、黃、黃綠、綠、藍綠、藍、藍紫、紫、紅紫。每一格 30°，隔 6 格是 180°，隔 4 格是 120°，隔 3 格是 90°，後面算各種配色的位置，靠的都是這幾個數字。
十色與二十四色的色相環各有用途
偶爾會看到別張色環是 10 色或 24 色，讓人懷疑是不是畫錯了，其實兩種都沒錯。武藏野美術大學的詞彙表介紹過這兩套系統：孟塞爾系統由 5 個主色相（紅、黃、綠、藍、紫）加上它們之間的 5 個中間色相，共 10 個色相；奧斯華德（Ostwald）系統則從 8 個基本色相（黃、橙、紅、紫、藍、藍綠、綠、黃綠）出發，每個再分成 3 份，得到 24 個色相。奧斯華德色環上相對的兩色是互補色，混合後會得到無彩色。日本的 PCCS 也是色彩體系之一，各家的分法不同，要服務的用途也不同。
國立雲林科技大學視覺傳達設計系的曾啟雄，在《美育》第 136 期的〈台灣美術教科書的色彩學內容安排之省思〉裡提到，台灣的美術課本每次改版都選用伊登的色相環，國中、高中課本都收錄；歷史上的色相環至少有上百個，色環只是研究者為了說明心中的色彩關係而畫，沒有哪一個是標準版。他也指出，伊登色相環比較適合說明色彩的特性關係，實用性不如國際照明委員會（CIE）的表色法，通用性也不如孟塞爾或奧斯華德系統。
所以學互補、類似、三角這些關係，十二色環剛好夠用；要精準指定或比對某一個顏色，就該改用色彩系統。另外，環上等距的色相，看起來也不一定等距。
美術色環與螢幕色環的互補色並不相同
做螢幕稿要以 RGB 色環為準，畫顏料、做傳統美術創作則看 RYB 色環。
互補色（complementary colors）的定義在兩種環上是同一個，就是環上正對面的兩個色相。只是環本身有不同畫法，同一個定義就給出了不同的配對，這也是「藍色的對比色是橘還是黃」這個問題的答案所在。
RYB、RGB 與 CMYK 三套原色各管一種媒材
色環畫法不同，源頭是混色原理不同。Adobe Express 的色環介紹指出，不同色彩模型服務不同的媒介：RYB（紅、黃、藍）用於傳統美術與繪畫，RGB（紅、綠、藍）用於數位螢幕，CMYK（青、洋紅、黃、黑）用於印刷製作。原色換了，環上每個顏色的位置也跟著換。
光的相加與顏料的混合，方向正好相反。泰特美術館的策展人 Matthew Gale 說明，如牛頓所發現，所有色光合在一起會得到白色，但所有顏料混在一起會得到黑色。螢幕是發光的，靠色光相加；紙上的墨水和顏料是吸收光線的，靠色料混合。
兩種色環各自的三組互補色
中央研究院的 AAT-Taiwan 把互補色定義為色相環上正好相對、具有最大對比的兩種色彩；理論上，兩種互補色相加混合會產生白色，相減混合則會產生黑色。在十二格的環上，正對面就是相隔 6 格，也就是 180°。
兩種色環各自的三組互補色並排如下：
| 色環畫法 | 第一組 | 第二組 | 第三組 |
|---|---|---|---|
| RYB（美術） | 紅與綠 | 藍與橘 | 黃與紫 |
| RGB（螢幕） | 紅與青 | 綠與洋紅 | 藍與黃 |
RYB 的三組來自 Adobe 的色環說明，它把互補色定義為直接位於色環相對位置的顏色，舉的例子是藍與橘、紅與綠、黃與紫，並排時對比強烈，讓彼此更鮮明。RGB 這三組則可以用角度算出來。MDN Web Docs 列出 sRGB 的色相角：紅在 0°、黃在 60°、純綠（lime）在 120°、青（cyan）在 180°、藍在 240°、洋紅（magenta）在 300°。正對面就是角度加 180°，所以紅 0° 對青 180°，黃 60° 對藍 240°，純綠 120° 對洋紅 300°。
兩張表放在一起看，會發現紅在 RYB 環上的對面是綠，到了 RGB 環上變成青；同樣是綠，在 RYB 環上與紅相對，在 RGB 環上則與洋紅相對。顏色沒變，變的是這張圖用來定位的原色。
藍色對比色是橘或黃，取決於色環畫法與藍的色相
口語裡說的「對比色」，多半指的就是互補色，所以藍色對比色是哪個顏色，要看用的是哪一張環。美術的 RYB 色環上，答案是橘色；螢幕的 RGB 色環上，純藍（240°）的對面是黃色（60°）。
實際設計時，手上的藍不一定是純藍，可以用 HSL 的色相角算一次。偏青的藍，色相角約 210°，加 180 得 390，再減 360 得 30°，落在橘色；純藍的 240° 加 180 得 420，減 360 得 60°，落在黃色。算法只有一個規則，就是加 180，超過 360 就減 360，因為色相角會回繞，480° 等於 120°，-120° 等於 240°。越接近純藍，補色越偏黃；越偏青，補色越偏橘。
判斷時先看成品是印在紙上還是放在螢幕上，再看手上的藍偏青還是偏紫。橘與黃其實都落在藍的補色帶上，要選哪一個，取決於想要的氣氛和兩色的明暗差。
色相環上的五種常用配色關係
色相環上最常用的配色關係有 5 種：互補、類似、三角、補色分割，以及四色配色。每一種都能用位置和角度說清楚，也各有最容易出狀況的地方。以下以十二色環為準，必要時補上 RGB 環的例子。
這 5 種關係有一個共通的用法，就是主色佔大面積，其餘當輔助。
互補配色的對比在五種關係裡最強
互補配色取環上隔著圓心、相差 180° 的兩個色相，在十二色環上就是相隔 6 格，例如藍與橘。對比是 5 種關係裡最強的，兩色並排時彼此顯得更鮮明。Adobe 的色環說明建議把它用在需要視覺衝擊、動態設計，或要強調關鍵元素的地方。
適合的場景包括按鈕、標示、強調字，以及海報主視覺。風險在於兩色同面積並排時會互相搶戲，交界處顯得刺眼。比較穩的用法是一色當主、另一色當點綴，例如藍色佔大面積，橘色只留給行動按鈕。十二色環上一共有 6 組互補色，RYB 環上依序是紅與綠、紅橙與藍綠、橙與藍、黃橙與藍紫、黃與紫、黃綠與紅紫。
類似配色只取相鄰的兩到三色
類似配色取環上彼此相鄰的顏色，相差約 30° 到 60°。Adobe 的色環說明指出，類似色通常是 2 到 3 個相鄰的顏色，例如藍、藍綠、綠，或紅、紅橙、橙，效果和諧、有凝聚感，適合沉靜、需要統一調性的設計。
它的風險是缺少對比。顏色靠得太近，眼睛抓不到重點，畫面容易顯得平板，解法是靠明暗差撐出層次。藍到綠這一側整體偏冷，紅到黃那一側偏暖，類似色多半落在同一側，整組的冷暖調性也就容易統一。
常見的三色組，例如十二色環上的藍綠、藍、藍紫，每兩色相隔 30°，整組只佔環的 60°，顏色之間的距離很近，所以看起來像同一家人。
三角配色取環上等距的三個色相
三角配色取環上等距的 3 個色相，彼此相隔 120°，在十二色環上是隔 4 格，連線會形成一個正三角形。RYB 環上的例子是紅、黃、藍，或橙、綠、紫；RGB 環上則是紅、綠、藍。Adobe 的色環說明指出，這種配色鮮明而均衡，沒有互補色那麼強的對比，適合動態設計、活潑的識別與多色品牌。
三色同強度出現時，畫面會雜亂，因為眼睛找不到主角。比較穩的用法是先選定一色佔大面積，另外兩色縮小面積，或降低它們的彩度。兒童向的設計也常用這種配色，一樣要先定下主角。十二色環上除了紅黃藍與橙綠紫，從任一格起算每隔 4 格取一色，一共可以排出 4 組三角，例如黃橙、藍綠、紅紫也是其中一組。
補色分割保留對比，再降低緊張感
補色分割是互補色的變化版。取一個主色之後，不取它正對面的那一色，而是改取正對面兩側的鄰居。這兩個搭配色各偏 30°，與主色相隔 150° 和 210°。例如主色是藍，對面是橘，改取橘兩側的黃橙與紅橙。
這樣仍然保留了冷暖對比，但搭配色分散在兩側，緊張感比正互補溫和。互補色用起來太刺眼時，這是一個實用的替代方案。實際用法上，藍色當大面積的背景，黃橙留給按鈕，紅橙只用在少量的標籤或價格強調；兩個搭配色彼此只差 60°，互相之間不再對立，主色與它們之間才保有對比。補色分割和三角配色常被混為一談，其實角度不同，補色分割是 150° 和 210°，三角配色是 120° 和 240°，兩者不是同義詞。
四色配色分成矩形與正方形兩種排法
四色配色是把兩組互補色拼在一起。Adobe 的色環說明指出，它是環上均勻分布的 4 個顏色，形成正方形或矩形，色彩豐富複雜，要靠均勻的間隔維持平衡，適合需要多種色彩的專案。
矩形的兩組互補色，夾角不是 90°。例如十二色環上取相隔 60° 的紅與橙，再各取它們的互補色綠與藍，得到紅、橙、綠、藍這一組。正方形則是 4 個色相彼此相隔 90°，例如紅、黃橙、綠、藍紫。兩種排法變化都很多，也最難平衡，通常得先指定主色、輔色與點綴色，一主兩輔一點綴，才不會變成 4 個顏色互相爭搶。
保羅·克利（Paul Klee）1920 年的作品《Redgreen and Violet-Yellow Rhythms》是個好案例。泰特美術館的介紹指出，這件作品用 2 組互補色取得整體的平衡，小面積而強烈的暖黃色方塊，被較大面積、較冷而後退的紫色抵消，綠與紅則用接近的比例。同一張畫裡，兩組互補色用了兩種平衡方法，強弱懸殊的一組靠面積差，強度相近的一組靠相近的比例。
只靠色相環選色，會漏掉明度、彩度與面積
色相環只決定色相之間的關係，一組配色能不能用，還要看明暗、鮮豔度、面積，以及這張圖本身的限制。這些陷阱都出現在選完色相之後，而且每一個都有可以直接動手的解法。
明暗落差不會因為色相相反就自動拉開
互補色是色相相反，並不是明暗相反。文字放在背景上能不能讀，看的是對比度。W3C 的 WCAG 2.2 規定，一般文字與背景的對比度至少要有 4.5:1，大字（至少 18pt，或 14pt 粗體）至少要有 3:1。對比度的公式是 (L1 + 0.05) / (L2 + 0.05)，L 是相對亮度，在 sRGB 線性化之後，R、G、B 的權重分別是 0.2126、0.7152、0.0722。
依這個公式計算 4 組純色互補配對，結果如下：
| 配對 | 色碼 | 相對亮度 | 對比度 | 一般文字（4.5:1） | 大字（3:1） |
|---|---|---|---|---|---|
| 藍與黃 | #0000FF 與 #FFFF00 | 0.0722 與 0.9278 | 8.00:1 | 達標 | 達標 |
| 紅與青 | #FF0000 與 #00FFFF | 0.2126 與 0.7874 | 3.19:1 | 未達標 | 達標 |
| 紅與純綠 | #FF0000 與 #00FF00 | 0.2126 與 0.7152 | 2.91:1 | 未達標 | 未達標 |
| 純綠與洋紅 | #00FF00 與 #FF00FF | 0.7152 與 0.2848 | 2.29:1 | 未達標 | 未達標 |
紅與純綠明明是互補色，對比度卻連大字的標準都不到；純綠與洋紅更低。只有藍與黃這一組連一般文字都達標。換成 RYB 環上的藍與橘，以 #0000FF 與 #FF8000 計算，對比度約 3.41:1，只夠大字使用。
解法是調明度，而不是換色相，把其中一色加白或加黑，拉開明暗差，文字才讀得清楚。曾啟雄也提到，需要區分的地方，應該讓明度、彩度、色相的差距都拉大。他舉的例子是高速公路收費站的「不收現金」與「收現金」車道指示牌，原本用差距小的綠色與藍色，常讓人無法辨認，後來改成差距較大的黃色與藍色，就容易區分了。
互補色並排時彼此會顯得更鮮豔
互補色並排會互相加強，這叫做同時對比現象。設計上可以善用它，只是兩色要分出主從。史密森尼庫柏休伊特設計博物館（Cooper Hewitt, Smithsonian Design Museum）的〈Dots, Dots, Dots〉一文介紹，法國化學家謝弗勒爾（Michel-Eugène Chevreul，1786 至 1889 年）在 1824 年擔任戈布蘭（Gobelins）掛毯工廠的染色主任。他發現掛毯顏色不夠濃的問題不在化學而在視覺，因此提出「同時對比定律」，核心是色彩所處的位置會讓顏料顯得更暗淡或更鮮亮。
他觀察到 3 種現象：
- 互補殘像：盯著紅色再移開視線，會看到綠色的殘像。
- 對比強化：互補色並排時，感知到的強度高過單獨看的時候。
- 融合：互補色並置時，會被看成第三種顏色。
這套理論後來被莫內與秀拉等畫家直接使用。
放到設計上，結論是一個當主、一個當點綴。兩色的面積差越大越好用，同面積並排最容易互搶。兩色的交界處如果還是太刺眼，可以用白、黑、灰這類中性色隔出一道細線，不讓它們直接貼在一起。這是設計上的做法建議，不是研究結論。
從純色到可用色票要加白、加黑或加灰
色相環上的顏色都是最純的版本，實際設計還需要淺的底色、深的文字色，以及灰一點的輔助色。Adobe Express 的色環介紹提到，深色版、淺色版與灰調版都是同一個色相的變化，能幫設計做出深度、層次與一致感。加黑得到深色版（shade），顏色更暗更深；加白得到淺色版（tint），顏色更淺更柔和，例如紅加白變成粉紅；加灰得到灰調版（tone），改變的是強度，也就是飽和度。
「單色配色」就是只動明度與彩度、不換色相，用同一個色相調出由淺到深的一組色階。這種配色不靠環上的位置關係，層次全部來自色階。
兩個純色的互補色放在一起容易衝突，把其中一色調淺、另一色調深，反而耐看。例如把紅調深成酒紅，把綠調灰成灰綠，兩色的對立感會降低。這屬於配色經驗，實際效果仍要看畫面。
環上等距的色相，看起來不一定等距
色相角是依某個色彩空間量出來的，換一個色彩空間，同一個顏色的角度就不同。MDN Web Docs 舉的例子是 sRGB 的綠，在 sRGB 空間是 120°，在 CIELAB 空間卻是 134.39°。CSS 裡的 hsl() 與 hwb() 用 sRGB 的色相角，lch() 用 CIELAB，oklch() 用 Oklab。所以「幾度等於幾格」只是幾何上的便利，不代表眼睛看起來也是等距。
紙上的色環圖本身也可能走樣。曾啟雄指出，美術課本裡色相走樣的色環圖仍然存在，而且改版後依舊沿用；他也提到，色彩學史上每有人提出調和公式或調和原理，之後總會遭到質疑。
這不表示 HSL 的角度不能用。比較合理的做法，是把算出來的角度當成起點，最後再用眼睛和色票微調。
從一個主色出發，在色環上找搭檔
從指定色出發找搭配色，順序大致是固定的：主色、色相關係、色階、色碼與檢查。順序顛倒，例如先挑配色法、再想主色的氣氛，常常得整組重來。
步驟一，先定主色與畫面要傳達的氣氛
主色是後面所有關係的原點，通常來自品牌既有的顏色、客戶指定的顏色，或內容本身的主題色。氣氛要先於配色法，活力、沉靜、專業、玩味，不同的調性適合的色相關係也不同，先想清楚氣氛，後面的選擇才有依據。
定了主色，先把它換算成色相角，後面的步驟都用得到。如果手上只有 HEX 色碼，可以先轉成 HSL，色相角就是 H 那一欄的數字。例如一個藍色，HSL 的色相角約 220°，之後互補、三角的位置都從 220° 起算。
步驟二，依用途選一種色相環關係
選哪一種關係，取決於這張圖要完成什麼任務。下表列出各自適合的用途、從主色起算的角度，以及最需要留意的風險：
| 用途 | 色相關係 | 從主色起算的角度 | 主要風險 |
|---|---|---|---|
| 強調行動與重點 | 互補 | +180° | 同面積互搶、交界刺眼 |
| 強調重點但要溫和 | 補色分割 | +150° 與 +210° | 兩個搭配色都要控制面積 |
| 沉靜、統一 | 類似 | ±30°（或 ±60°） | 缺少對比而顯得平板 |
| 活潑、多色 | 三角 | +120° 與 +240° | 三色同強度會雜亂 |
| 內容複雜、需要多色 | 四色 | 正方形為 +90°、+180°、+270° | 最難平衡 |
以主色 220° 為例，互補色在 40°；三角配色的兩色在 340° 與 100°；補色分割的兩色在 10° 與 70°；類似色在 190° 與 250°。超過 360 的就減 360，像 220 加 240 得 460，減 360 得 100。
步驟三，把純色調成色階並分配面積
選出色相之後，把每一個色相各自調出淺色版、深色版與灰調版，每個色相準備 3 到 5 階。整組配色的主要顏色，Adobe 的色環說明建議總共控制在 3 到 5 色，避免顏色過多，再加入黑、白、灰這類中性色做平衡與對比。
每個色相的色階各有分工。以藍色為主色，淺色版適合當區塊底色，深色版適合當標題文字，灰調版則放在說明文字或分隔線這類不需要搶眼的地方。
面積的分配原則是主色佔大面積，輔色次之，點綴色最小，黑白灰放在底色和文字。常聽到的 60-30-10 比例，就是把這個原則量化的做法。
步驟四，轉成色碼並到實際畫面檢查
在 HSL 裡，H 就是色相環上的角度，轉動 H 等於在環上移動，加 180 就是互補色。以 hsl(220 70% 50%) 為例，加 180 得 400，減 360 得 40，互補色約是 hsl(40 70% 50%)。色票工具的規則選單，例如 Adobe Color 提供的各種配色規則，對應的就是前面那幾種位置關係。
最後一定要回到真實的畫面檢查 3 件事：
- 文字對比度：一般文字至少 4.5:1，大字至少 3:1，數字就是前面算過的那一組。
- 印刷與螢幕的色差：同一組色碼印出來，和螢幕上看到的不會完全一樣，要在實際的媒介上看過。
- 色覺辨識：紅與綠這類組合，對色覺辨識有差異的讀者容易分不開，重要的資訊不要只靠色相區分，另外用明暗、形狀或文字標示。
下一次替畫面選色，先決定主色，再在色相環上用角度找出搭檔，最後用眼睛和對比度的數字確認。環上的位置只是起點，真正留下來的，是主色佔大面積、其餘當輔助的那張實際畫面。