OKLCH — CSS 色彩的未來
OKLCH 是 CSS Color Level 4 新標準。學習 OKLCH 的原理、優勢、CSS 語法和實際應用。感知均勻的色彩空間讓你的設計更精確。
為什麼需要 OKLCH？
傳統的 HSL 有一個致命缺陷：它在感知上不均勻。也就是說，同樣將亮度增加 10%，黃色和藍色的視覺變化幅度完全不同。
OKLCH 解決了這個問題。它是一個「感知均勻」的色彩空間，意味著：
OKLCH 的三個參數
oklch(L C H)
| 參數 | 意義 | 範圍 | 說明 |
|---|---|---|---|
| L | Lightness（亮度） | 0-1 | 0 = 黑，1 = 白 |
| C | Chroma（彩度） | 0-0.4+ | 0 = 灰，越高越鮮豔 |
| H | Hue（色相） | 0-360 | 色彩環上的角度 |
CSS 中使用 OKLCH
/* 基本用法 */
color: oklch(0.63 0.11 230);
/* 帶透明度 */
background: oklch(0.63 0.11 230 / 50%);
/* CSS 變數搭配 */
:root {
--brand: oklch(0.63 0.11 230);
--brand-light: oklch(0.85 0.06 230);
--brand-dark: oklch(0.40 0.11 230);
}OKLCH vs HSL 的實際差異
用 HSL 建立色彩系統時，你會發現：
hsl(60, 100%, 50%)（黃色）看起來比 hsl(240, 100%, 50%)（藍色）亮很多用 OKLCH：
oklch(0.8 0.15 90) 和 oklch(0.8 0.15 240) 的視覺亮度一致瀏覽器支援
截至 2026 年，所有主流瀏覽器都已支援 OKLCH：Chrome、Firefox、Safari、Edge。可以安心使用。