配色法則：互補色、類似色、三角配色與更多

什麼是配色法則

配色法則是挑選協調顏色的規則。先選一個基準色，保留它的明暗與鮮豔程度，只在色環上把色相轉動固定的角度。

角度是簡單的部分。轉動的是哪一個色環同樣重要，因為經典的 HSL 色環和 OKLCH 這類符合人眼感知的色環，在相同角度下會得到明顯不同的結果。以下範例都以中等藍色 #2a7fbf 為起點。

互補色、分裂互補、類似色、三角配色、矩形配色、正方形配色

每一列都保留基準色的 OKLCH 亮度 0.577 和彩度 0.127，只把色相轉動表中列出的角度。轉動後的顏色若超出 sRGB，會稍微降低彩度讓它落回範圍內，所以有幾個顏色會略顯黯淡。單色配色是例外：色相不變，亮度以 0.12 為一階調整。

• 互補色：張力最強。第二個顏色只用在小面積的強調處，例如行動呼籲按鈕。
• 分裂互補：和互補色一樣有活力，但更容易平衡，因為強調色被拆成對面色相的兩個鄰居。
• 類似色：沉穩、協調。適合插圖和背景，但需要讓某個元素跳出來時就不太夠力。
• 三角、四角與正方形配色：活潑但難以掌控。讓一個顏色當主角，其他顏色只占小面積。
• 單色配色：同一個色相搭配多個亮度階層。對介面來說最保險，因為對比本來就來自亮度。

為什麼 HSL 色環配出來的顏色不平衡

設計工具裡的色環大多是 HSL：轉動色相，同時保留 HSL 的飽和度與亮度數值。但 HSL 的亮度只是一個公式，不等於眼睛看到的明暗。把金黃色在 HSL 裡轉 180°，會得到一個看起來比黃色暗得多的深藍色。

在 OKLCH 裡旋轉，感知亮度就會保持一致。下面是 #f4b400 用兩種方式旋轉的結果，並附上每個顏色的 OKLCH 亮度。

HSL 這組的亮度從 0.489 到 0.857 不等，藍色和紫色沉下去，薄荷綠卻亮得刺眼。OKLCH 這組則維持在 0.802 到 0.817 之間。純 RGB 原色也一樣：#ff0000、#00ff00 和 #0000ff 是完美的 HSL 三角配色，但它們的 OKLCH 亮度分別是 0.628、0.866 和 0.452。

這之中有取捨。在 sRGB 螢幕上，和這個黃色一樣亮的藍色沒辦法很鮮豔，所以 OKLCH 互補色 #97c0ff 的彩度只有 0.10，而不是 0.166。你只能在亮度一致與鮮豔度一致之間二選一；黃色和藍色無法兩者兼得。

美術課的 RYB 色環與螢幕的 RGB 色環

美術課教的色環是 RYB：以紅、黃、藍為原色，就像調顏料一樣。在這個色環上，紅色的互補色是綠色，藍色的互補色是橘色。螢幕混合的是光，所以數位工具使用 RGB 色環，紅色的互補色是青色，藍色的互補色是黃色。

兩者都沒有錯，只是回答的問題不同。RYB 沿襲繪畫傳統，RGB 和 OKLCH 則依循螢幕與人眼的運作方式。如果設計工具在你預期綠色的地方給了青色，代表它用的是 RGB 色環。

OKLCH 這一欄呈現了亮度一致對極端顏色的影響。純藍色的互補色變成亮度同為 0.45 的深赭色，純黃色的互補色則變成亮度 0.96、接近白色的淡紫色。

把 60-30-10 法則套用到配色上

配色法則告訴你該用哪些顏色，卻沒說每種用多少。60-30-10 法則補上了這一塊：大約 60% 的面積給主色，30% 給輔助色，10% 給強調色。平均分配的話，再好的配色看起來也會很雜亂。

在介面中，60% 通常是帶有基準色相的近中性色，30% 是基準色，10% 是互補強調色。下面是用 #2a7fbf 做出、可直接複製的一組顏色。

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

如何檢查配色的對比

讓文字好讀的不是色相差異，而是亮度差異。上面那組互補色在色相上已經差到最遠，但 #2a7fbf 放在 #ab6708 上的 WCAG 對比值只有 1.05:1，APCA Lc 為 0：當作文字幾乎看不見。

亮度一致也有好處。在上面所有 OKLCH 配色上放白色文字，對比值都落在 4.04:1 到 4.62:1 之間。換成同樣配色的 HSL 版本，則會從 2.15:1 跳到 8.90:1。因此整組 OKLCH 配色只要一個修正就夠了：把亮度降到 0.52，彩度 0.127 時任何色相上的白色文字都能達到 4.5:1，範圍是 5.00:1 到 5.91:1。

若要把兩個配色中的顏色當作文字和背景一起用，就要拉開它們的亮度：保留色相，一個往 0.35 推，另一個往 0.93 推。接著用對比檢查工具確認實際的組合；如果強調色帶有特定意義，也用色盲模擬器檢查整組調色盤。

常見問題