OKLCH 颜色完全指南:明度、彩度、色相与感知均匀的色阶

我第一次用 OKLCH 重做一套品牌色阶,是因为旧的 HSL 梯度怎么调都别扭:同一个明度下,黄色那档刺眼,蓝色那档发暗。把 L 拉成等差也没用,因为 HSL 的明度根本不按眼睛看到的亮度走。换到 OKLCH 之后,只动一个 L 值,五档深浅就排得整整齐齐。下面把这套色彩空间讲清楚,以及怎么在 OKLCH、HEX、RGB 之间互转。

OKLCH 的三个值:L 明度、C 彩度、H 色相

OKLCH 写作 oklch(L C H),三个字母各管一件事。

• L 是明度,从 0(黑)到 100%(这个空间能给的最亮)。关键在于,它对应的是感知亮度,不是数学上的中点。
• C 是彩度,大致就是"有多鲜艳"。0 是灰,往上没有固定上限,但在 sRGB 屏幕上通常到 0.37 左右就到顶。
• H 是色相,0 到 360 度,和色环一样,只是按人眼感知重新排过。145 是绿,264 是蓝。

要特别记住:C 不是百分比。想要半饱和而填个 50,会得到一个严重超出色域的值,钳回来就成了意料之外的颜色。H 也不是 0 到 1 的小数刻度,它是度数。

为什么 OKLCH 比 HSL 更适合做色阶

HSL 的色相和明度是按纯数学排的,不按眼睛的工作方式。它的明度在各个色相之间并不均匀,边缘的彩度也是虚的。所以你在 HSL 里固定 L、只改 H,得到的一圈颜色亮度其实参差不齐。

OKLCH 建在 OKLab 模型上,这个模型是拟合人眼视觉做出来的。它的好处叫"感知均匀":数值上相等的步长,在眼里也是相等的视觉步长。oklch(40% 0.1 264) 到 oklch(50% 0.1 264),就是一次匀速变亮,不多不少。

落到做色阶上,这意味着你可以拿一个颜色,固定 C 和 H,只让 L 等量地走,比如 30%、45%、60%、75%、90%。每一档看起来都是同样幅度的变亮,深浅色间距均匀。同样的操作在 HSL 里会跑色,亮的几档还会挤在一起。想检验一套色阶在视觉上是否真的均匀,可以顺手到 对比度检测工具 验一下每一档和背景的对比,确保都过得了无障碍门槛。

CSS Color 4 让 OKLCH 直接可用

OKLCH 不是某个库的私货,它是 CSS Color 4 规范里的标准颜色函数,现代浏览器能直接渲染:

.btn {
  background: oklch(62% 0.17 145);
}

第一个值是明度(62%,也可以写小数 0.62),第二个是彩度(0.17),第三个是以度为单位的色相(145,一个绿)。要加透明度,用斜杠:oklch(62% 0.17 145 / 0.5)。

CSS Color 4 同时让渐变插值也能在 OKLCH 里跑。蓝到黄的渐变在 sRGB 里会在中段塌成一团发灰的绿,因为明度和彩度沿路径下陷;改成 in oklch 插值,感知明度沿路一直保持均匀,中点依然鲜艳。

和 HEX、RGB 互转:一个真实例子

平时取色还是离不开 HEX 和 RGB,所以来回转换是常态。拿一个实际的颜色走一遍。HEX #1d4ed8 是一个常见的品牌蓝,它换算成 OKLCH 大约是 oklch(48.8% 0.217 264.4),对应的 RGB 是 rgb(29 78 216)。这三种写法指的是同一个屏幕颜色,只是坐标系不同:HEX 和 RGB 直接描述红绿蓝三个通道的强度,OKLCH 则把它拆成你真正关心的明度、彩度、色相。

底层的换算不是简单查表,而是一条完整的色彩科学管线:sRGB 先经标准传递曲线转成线性 RGB,线性 RGB 用公开的矩阵转成 OKLab,再把 OKLab 换成极坐标形式得到 OKLCH。要把这一串自己写对很容易出错,所以我直接用 OKLCH 颜色转换器 把 HEX、RGB、OKLCH 一次读出来,每一行都能一键复制。如果只是想在 HEX、RGB、HSL 之间快速换,不需要 OKLCH 的感知特性,用更轻的 颜色格式转换器 也够用。

这里有个坑要提醒:OKLCH 能描述比 sRGB 屏幕更鲜艳的颜色。当你填的彩度把某个通道推出 sRGB 立方体时,转回来的 HEX 是钳制后最接近的颜色,并非完全一致。比如 oklch(70% 0.37 145) 是任何 sRGB 屏都到不了的绿,转出来的 HEX 会是个稍微温和点的绿。一个负责任的转换器会把这种情况标出来,而不是让你的颜色不声不响地偏掉。

什么时候该用 OKLCH

不是所有场景都需要它。如果你只是要把设计稿里的一个 HEX 填进 CSS,HEX 就够了。但只要涉及"一组颜色之间的关系",OKLCH 就值得用:做明暗色阶、算 hover 和 active 状态、排查发灰的渐变、把一套 token 从 HEX 迁到能用数学微调的体系。这些都是靠"固定两个维度、只动一个维度"来工作的,而只有感知均匀的空间才让这种微调结果可预测。

习惯了之后,你会发现调色从"反复试到看着顺眼"变成了"算出来就是对的"。这正是 OKLCH 最实在的价值。

---

Made by Toolora · Updated 2026-06-13