CSS 顏色新時代：OKLCH 完整指南

如果你曾經用 linear-gradient() 做過一個「從藍色到紅色」的漸變，結果在中間出現了一塊灰色的髒色帶——這不是你的錯，是 RGB 和 HSL 色彩空間的固有缺陷。OKLCH（以及它的近親 OKLab）是一套新的 CSS 顏色表示法，設計的目的就是為了解決這個問題。2026 年，所有主流瀏覽器都支援 OKLCH 了，Tailwind CSS v4 也正式採用了它。該是時候重新認識 CSS 顏色了。

前端工程師為什麼要關心 OKLCH

RGB 和 HSL 不是壞掉的工具——它們在多數場景下運作良好。但當你開始做漸變、動畫、主題系統，它們的缺陷就會浮現。

最常見的問題：

/* 你預期的：藍 → 紫 → 紅的平滑漸變 */
background: linear-gradient(to right, blue, purple, red);

/* 實際結果：在中間某處，出現了灰灰髒髒的過渡色
   這是因為 HSL 的色相環在來回跳躍，不是線性的 */

OKLCH 設計的起點，就是「讓數學上的顏色關係，與人類視覺感知一致」。

OKLCH 的語法

基本語法

/* OKLCH 的四個參數：Lightness、Chroma、Hue、Alpha */
color: oklch(59% 0.25 240);
/*             ↑L      ↑C    ↑H（色相，0-360）*/

/* 等同於 */
background: oklch(59% 0.25 240 / 100%); /* 最後一個 / 是透明度 */

參數說明

參數	意義	範圍
L（Lightness）	亮度，0% = 黑，100% = 白	0-100%
C（Chroma）	彩度，即顏色的強度/飽和度	0-0.4（理論上可更高，但超過容易失真）
H（Hue）	色相，角度表示，0° = 紅色	0-360

與 HSL 的簡單對比

/* HSL：色相在色相環上，是一個環 */
color: hsl(240 100% 50%);  /* 藍 */

/* OKLCH：色相也是環，但彩度和亮度的行為是感知均勻的 */
color: oklch(59% 0.25 240);  /* 藍 */

/* 結果視覺上相似，但內部表示和漸變行為完全不同 */

OKLCH 解決的問題

1. 漸變中的灰色帶問題

HSL 的色相不是感知均勻的——藍色和紫色之間的某些點，會讓「灰色」佔了不正常的比例：

/* HSL 漸變：中間出現髒灰色 */
background: linear-gradient(to right,
  hsl(240 100% 50%),  /* 藍 */
  hsl(270 100% 50%)   /* 紫 */
);

/* OKLCH 漸變：平滑過渡 */
background: linear-gradient(to right,
  oklch(59% 0.25 240),  /* 藍 */
  oklch(66% 0.20 300)   /* 紫，稍微調整 L 和 C 保持視覺平衡 */
);

2. 亮度均勻的主題切換

當你在深色模式和淺色模式之間切換時，用 HSL 做的動畫往往亮度跳躍不自然：

/* HSL 的亮度不是感知均勻的
   50% L 在某些色相看起來很亮，某些看起來很暗 */

/* OKLCH 的亮度是感知均勻的
   50% L 在所有色相下，看起來都是「中灰」 */

color: oklch(50% 0.15 200);  /* 青色 50% 亮度，看起來是正常的中亮度 */

3. P3 廣色域

OKLCH 支援更大的色域（gamut），可以表達傳統 sRGB 範圍之外的顏色：

/* 這些顏色在某些新型顯示器上，比 sRGB 更鮮豔 */
color: oklch(75% 0.20 130);  /* 非常鮮艷的綠色 */
color: oklch(70% 0.22 25);   /* 非常鮮艷的橙色 */

/* 瀏覽器會自動處理廣色域到顯示器支援範圍的映射 */

OKLab：LCH 的近親

OKLab 的結構

OKLab 是 OKLCH 的「原始版本」——OKLCH 是 OKLab 的圓柱座標表示（多了色相）：

/* OKLab：L + a + b（三個分量）*/
color: oklab(59% -0.1 -0.7);
/*           ↑L  ↑a（紅/綠軸）↑b（黃/藍軸）*/

/* OKLCH：L + C + H（極座標形式）*/
color: oklch(59% 0.25 240);
/* 計算關係：C = sqrt(a² + b²)，H = atan2(b, a) */

什麼時候用哪個

/* OKLCH：當你關心色相 H 的時候（漸變、動畫）*/
background: linear-gradient(to right,
  oklch(60% 0.2 240),  /* 從藍 */
  oklch(70% 0.2 30)     /* 到橙，色相在變化 */
);

/* OKLab：當你關心 a/b 軸的方向時（顏色混合、幾何操作）*/
color: oklab(60% 0.05 0.1);  /* 稍微偏暖的中性色 */

瀏覽器支援

2026 年，OKLCH 和 OKLab 在所有主流瀏覽器都已完全支援：

瀏覽器	OKLCH	OKLab	color()
Chrome	✅ 111+	✅ 111+	✅ 122+
Safari	✅ 15.4+	✅ 15.4+	✅ 16.4+
Firefox	✅ 113+	✅ 113+	✅ 117+

如果需要支援很舊的瀏覽器，可以用 RGB fallback：

/* Progressive Enhancement：用 @supports 檢測 */
color: oklch(59% 0.25 240);
/* 如果瀏覽器不支援，fallback */
@supports not (color: oklch(0% 0 0)) {
  color: #0057d9;  /* 視覺上最接近的 RGB 近似色 */
}

Tailwind CSS v4 的實際應用

Tailwind v4 正式採用 OKLCH 作為預設顏色空間：

/* Tailwind v4 的 theme 設定（使用 OKLCH）*/
/* tailwind.config.js 或 CSS 變數 */
@theme {
  --color-primary: oklch(59% 0.25 240);
  --color-secondary: oklch(66% 0.20 30);
  --color-success: oklch(72% 0.19 142);
}

/* 這些顏色在做漸變時，行為是正確的 */
background: linear-gradient(to right, var(--color-primary), var(--color-secondary));

Tailwind v4 的颜色系统使用 OKLCH 後，渐变会变得平滑，而不需要手动调整颜色值。

實務建議：什麼時候遷移到 OKLCH

值得遷移的場景

顏色漸變：任何用 linear-gradient 或 conic-gradient 的地方
主題系統：支援深色/淺色模式的 UI
顏色動畫：使用 CSS animation 或 transition 改變顏色
Design System：需要確保多個元件的顏色關係符合預期

不需要急著遷移的場景

簡單的單色：只是用一個藍色做背景，不需要 OKLCH
沒有漸變的 UI：多數網站的主要顏色都是純色，HSL 足夠
需要嚴格品牌匹配的：如果品牌手冊用 HEX 或 RGB 指定顏色，先別折騰

結語：讓顏色的數學符合眼睛的直覺

OKLCH 解決的不是「CSS 壞了」的問題，而是「CSS 的預設工具不符合人類視覺直覺」的問題。

當你用 HSL 做漸變，發現中間出現髒灰色帶——這是 HSL 的設計問題，不是你的問題。OKLCH 讓你用更直覺的方式，達到你預期的視覺效果。

2026 年瀏覽器支援完整，Tailwind v4 生態也在往 OKLCH 迁移。對於新專案，可以考慮直接用 OKLCH 作為主要顏色空間；對於現有專案，可以先在漸變相關的 CSS 裡測試 OKLCH，看看效果是否更符合預期。