# OKLCH 完整解說：終於和人眼感受一致的顏色格式

OKLCH 用三個數值描述顏色：看起來多亮、多鮮豔、屬於哪個色相。和 HSL 不同，同一個亮度值在任何色相下看起來都一樣亮，因此配色、hover 狀態和無障礙對比都變得可以預測。

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

## OKLCH 是什麼

OKLCH 是 Oklab 的極座標形式，Oklab 則是 Björn Ottosson 在 2020 年發表的感知色彩空間。OKLCH 由三個數值組成：L 是感知亮度，從 0（黑）到 1 或 100%（白）；C 是彩度，也就是顏色的濃淡，從 0（灰）到螢幕能顯示的最鮮豔顏色的約 0.37；H 是色相角度，從 0 到 360 度。

同一個顏色用不同格式寫出來就像下面這樣。所有數值都由 PickShade 即時計算，可以直接複製使用。

| 格式 | 值 |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| OKLab | oklab(68.036% 0.17474 0.1165) |

## 為什麼 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 撰寫。

## 工具

- [HEX 轉 OKLCH 轉換器](https://pickshade.com/zh-tw/convert/hex-to-oklch)
- [附 OKLCH 滑桿的取色器](https://pickshade.com/zh-tw)
- [OKLCH 版 Tailwind v4 調色盤](https://pickshade.com/zh-tw/tailwind)

## 相關指南

- [色域完整解說：sRGB、Display P3 與超出色域的顏色](https://pickshade.com/zh-tw/gamut)
- [顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式](https://pickshade.com/zh-tw/color-formats)
- [Tailwind CSS 顏色：v4 OKLCH 調色盤、自訂顏色與色階](https://pickshade.com/zh-tw/tailwind-colors)