OKLCH 完整解說：終於和人眼感受一致的顏色格式
OKLCH 用三個數值描述顏色：看起來多亮、多鮮豔、屬於哪個色相。和 HSL 不同，同一個亮度值在任何色相下看起來都一樣亮，因此配色、hover 狀態和無障礙對比都變得可以預測。
閱讀時間約 1 分鐘
OKLCH 是什麼
OKLCH 是 Oklab 的極座標形式，Oklab 則是 Björn Ottosson 在 2020 年發表的感知色彩空間。OKLCH 由三個數值組成：L 是感知亮度，從 0（黑）到 1 或 100%（白）；C 是彩度，也就是顏色的濃淡，從 0（灰）到螢幕能顯示的最鮮豔顏色的約 0.37；H 是色相角度，從 0 到 360 度。
同一個顏色用不同格式寫出來就像下面這樣。所有數值都由 PickShade 即時計算，可以直接複製使用。
| 格式 | 值 |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| OKLCH | |
| OKLab |
為什麼 OKLCH 比 HSL 好
HSL 的亮度只是一條公式，不代表人眼的感受。hsl(60 100% 50%) 是明亮的黃色，hsl(240 100% 50%) 是深藍色，兩者的亮度卻都標示為 50%。用 HSL 做配色，每個色相都得手動修正。
在 OKLCH 裡，L 相同的顏色看起來就是一樣亮。固定 L 和 C、只旋轉 H，就能得到一組視覺上均衡的色相；固定 H 和 C、逐步調整 L，就能得到乾淨的色階。這也是 Tailwind CSS v4 用 OKLCH 定義整套預設調色盤的原因。
亮度也能用來預估對比。文字和背景的 L 相差約 0.4 以上時，通常就足夠易讀，挑選無障礙配色時會好判斷很多。
CSS 語法
亮度可以寫成百分比，或寫成 0 到 1 之間的數字。彩度是一個數字。色相是以度為單位的角度。透明度寫在斜線後面。
CSS
color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);瀏覽器支援
目前所有主流瀏覽器都支援 oklch()：Safari 從 15.4 起，Chrome 和 Edge 從 111 起，Firefox 從 113 起，涵蓋超過 90% 的使用者。如果要照顧很舊的瀏覽器，在 OKLCH 那一行之前先寫一行 HEX 備援值。
CSS
color: #ff5733;
color: oklch(68% 0.21 33.7);彩度上限與色域
OKLCH 能描述任何螢幕都顯示不出來的顏色。彩度上限取決於亮度和色相：鮮豔的黃色只在高亮度時才可能出現，鮮豔的藍色只在低亮度時才可能出現。當數值超出 sRGB 或 Display P3 色域，瀏覽器會把它映射回色域內，顏色可能因此偏移。
PickShade 會標示超出 sRGB 的顏色，並提供最接近且落在色域內的顏色。做法是保留亮度和色相、只降低彩度，這也是 CSS Color 4 建議的方法。
如何把 HEX 轉成 OKLCH
轉換流程是：HEX 轉 sRGB，sRGB 轉線性光，線性 sRGB 轉 LMS 視錐空間，取立方根，再用矩陣轉成 Oklab，最後把 Oklab 轉成極座標。手算很容易出錯，直接把顏色貼進轉換器，複製結果就好。
常見問題
所有瀏覽器都支援 OKLCH 嗎？
是的，目前所有主流瀏覽器都支援：Safari 15.4 以上、Chrome 和 Edge 111 以上、Firefox 113 以上。如果一定要支援舊版瀏覽器，在前面加一行 HEX 就好。
OKLCH 和 LCH 有什麼差別？
兩者都用亮度、彩度和色相描述顏色。CSS 的 lch() 以 CIELAB 為基礎，調整亮度時藍色會偏向紫色。OKLCH 以 Oklab 為基礎，色相穩定，所以藍色的色階始終是藍色。
為什麼我的 OKLCH 顏色和輸入的不一樣？
很可能是彩度超出了螢幕在該亮度和色相下能顯示的範圍，瀏覽器把它映射到顯示器的色域內。把彩度調低，直到 PickShade 不再標示超出色域為止。
Tailwind CSS 可以用 OKLCH 嗎？
可以。Tailwind CSS v4 的預設調色盤本來就是 OKLCH，在 @theme 裡的自訂顏色也可以直接用 OKLCH 撰寫。