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

配色法則就是在色環上按固定角度挑選色相：互補色相差 180°，類似色相差 30°，三角配色相差 120°。在 OKLCH 而不是 HSL 裡旋轉色相，顏色的亮度就能保持一致，不會有某個色相意外跳出來。

來源: https://pickshade.com/zh-tw/color-harmonies
更新於: 2026-09-28

## 什麼是配色法則

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

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

| 格式 | 值 |
| --- | --- |
| HEX | #2a7fbf |
| HSL | hsl(205.77 63.95% 45.69%) |
| OKLCH | oklch(57.708% 0.12654 245.663) |

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

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

| 配色法則 | 色相角度 | 顏色 2 | 顏色 3 | 顏色 4 | 顏色 5 |
| --- | --- | --- | --- | --- | --- |
| 互補色 | 0°, 180° | #ab6708 |  |  |  |
| 分裂互補 | 0°, 150°, 210° | #b85a42 | #907800 |  |  |
| 類似色 | 0°, −30°, +30° | #008aa7 | #6571c3 |  |  |
| 三角配色 | 0°, 120°, 240° | #b6566e | #678626 |  |  |
| 四角配色（矩形） | 0°, 60°, 180°, 240° | #8c64b4 | #ab6708 | #678626 |  |
| 正方形配色 | 0°, 90°, 180°, 270° | #a75a96 | #ab6708 | #258f58 |  |
| 單色配色 | 同色相，L ±0.12、±0.24 | #00396f | #005b98 | #53a4e7 | #7dcbff |

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

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

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

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

| 角色 | HSL 旋轉 | OKLCH L | OKLCH 旋轉 | OKLCH L |
| --- | --- | --- | --- | --- |
| 基準色 | #f4b400 | 0.808 | #f4b400 | 0.808 |
| 互補色 | #0040f4 | 0.489 | #97c0ff | 0.802 |
| 三角配色，+120° | #00f4b4 | 0.857 | #00dcec | 0.817 |
| 三角配色，+240° | #b400f4 | 0.586 | #f299fe | 0.808 |

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 色環。

| 基準色 | RYB 互補色 | RGB（HSL）互補色 | OKLCH 互補色 |
| --- | --- | --- | --- |
| #ff0000 | 綠色 | #00ffff | #009cb2 |
| #0000ff | 橘色 | #ffff00 | #734f00 |
| #ffff00 | 紫色 | #0000ff | #f3f1ff |

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

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

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

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

| 角色 | 占比 | 顏色 | OKLCH | 用途 |
| --- | --- | --- | --- | --- |
| 主色 | 60% | #eff6fd | L 0.97, C 0.012 | 頁面背景、卡片 |
| 輔助色 | 30% | #2a7fbf | L 0.577, C 0.127 | 頁首、連結、選取狀態 |
| 強調色 | 10% | #ab6708 | L 0.577, C 0.127 | 主要行動呼籲、重點標示 |
| 文字 | 不適用 | #15232f | L 0.25, C 0.03 | 主色上的內文 |

```css
: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。

| 文字 | 背景 | WCAG 對比值 | APCA Lc | 結論 |
| --- | --- | --- | --- | --- |
| #2a7fbf | #ab6708 | 1.05:1 | 0 | 無法閱讀，亮度相同 |
| #ffffff | #2a7fbf | 4.30:1 | -74.8 | 內文未達 AA |
| #ffffff | #106ead | 5.45:1 | -82.0 | 通過，基準色 L 0.52 |
| #ffffff | #995600 | 5.70:1 | -83.3 | 通過，強調色 L 0.52 |
| #ab6708 | #eff6fd | 4.12:1 | 64.9 | 僅限大字與圖示 |
| #5c2d00 | #d8eafb | 9.42:1 | 82.5 | 互補色拆成一深一淺 |

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

## 常見問題

### 配色法則主要有哪幾種？

常見的配色法則有互補色（色相相差 180°）、分裂互補（150° 和 210°）、類似色（左右各 30°）、三角配色（三個色相各差 120°）、四角或矩形配色（0°、60°、180°、240°）、正方形配色（四個色相各差 90°），以及單色配色（同一色相的不同亮度階層）。

### 紅色的互補色是什麼？

取決於你用哪一個色環。在畫家的 RYB 色環上，紅色的互補色是綠色。在螢幕與設計工具使用的 RGB 色環上是青色，純紅色對應 #00ffff；在亮度一致的 OKLCH 中則是像 #009cb2 這樣的藍綠色。

### 為什麼我的互補色看起來不平衡？

大多數工具在 HSL 裡旋轉色相，而 HSL 的亮度和人眼感知並不一致。像 #f4b400 這樣的金黃色，HSL 互補色是 #0040f4，它的 OKLCH 亮度只有 0.489，黃色卻是 0.808。在 OKLCH 裡旋轉色相，兩個顏色就能一樣亮。

### 互補色可以拿來當文字和背景嗎？

只有在亮度差很多的情況下才行。亮度相同的互補色，例如 #2a7fbf 和 #ab6708，對比值只有 1.05:1。把一個調深、一個調淺，例如 #5c2d00 放在 #d8eafb 上，對比值就有 9.42:1。

### 什麼是 60-30-10 配色法則？

60-30-10 法則把設計分成約 60% 主色、30% 輔助色和 10% 強調色。搭配配色法則時，主色通常是帶點色調的中性色，輔助色是基準色，強調色則是互補色或三角配色中的顏色。

## 工具

- [可套用配色法則的配色產生器](https://pickshade.com/zh-tw/palette)
- [對比檢查工具，WCAG 與 APCA](https://pickshade.com/zh-tw/contrast)
- [OKLCH 取色器](https://pickshade.com/zh-tw/oklch)
- [色盲模擬器](https://pickshade.com/zh-tw/color-blindness)

## 相關指南

- [OKLCH 完整解說：終於和人眼感受一致的顏色格式](https://pickshade.com/zh-tw/oklch)
- [如何為網站或 App 挑選配色](https://pickshade.com/zh-tw/website-color-palette)
- [APCA 與 WCAG 2：該相信哪一種對比檢查](https://pickshade.com/zh-tw/apca-vs-wcag)