OKLCH

可以先理解为:用亮度色度色相三个数描述颜色让偏色可量

颜色的三围。亮度是多亮,色度是「有多不灰」,色相是「往哪边偏」。说一个灰「看着有点绿」是感觉,说它「色度 0.004、色相 135」是尺寸。有了尺寸,设计评审就不再是谁嗓门大谁说了算。

关键结构图

当前相关远处弱强

中心节点写「一个颜色」,三条粗细不同的边连向「L 亮度」「C 色度」「H 色相」,其中 C 这条边加粗并标注「决定它是不是中性色」。

OKLCH 是一种感知均匀的色彩空间。任何颜色用三个数描述:L 亮度、C 色度(离灰有多远)、H 色相(偏哪个方向)。它的价值不在好看,在于把「这个颜色是不是有点偏」从感觉变成可比的数字。

OKLCH 把颜色放进一个对人眼更诚实的坐标系里:

L 亮度:0 到 100,这个颜色有多亮。 C 色度:0 是纯灰,数值越大颜色越浓。中性色不是「没有颜色」,而是色度极低。 H 色相:0 到 360 度,偏绿、偏蓝、偏黄还是偏红。

它和旧的 HSL 最大的区别在 L:HSL 里同样亮度值的黄和蓝,看起来一个刺眼一个发闷;OKLCH 的 L 才真的对应人眼感知,所以同一套明度阶梯换色相也不会塌。

边界:它描述颜色,不替你做审美判断。两个配色数值接近,不代表同样好看。

StructureOKLCH = 亮度 L + 色度 C + 色相 H → 偏色可量、可比、可讨论

当你要定义一套设计系统的中性色、排查「界面看着有点脏 / 有点闷」这类说不清的问题、或者需要和别人就颜色达成一致时,调用它。它最有用的时刻,是一屋子人对着同一个灰各说各话的时候。

把要比较的颜色统一换算成 OKLCH,然后只看两件事: 1. 色度有多高——判断它到底是不是中性色。 2. 色相往哪偏——判断整套色是否朝同一个方向。中性色系最怕的不是带一点颜色,而是每个灰偏的方向都不一样。把它们排成一张表,一眼就能看出谁是异类。

一套界面里,底色偏绿、线条偏蓝、正文字偏紫。单看每一个都说得过去,合在一起却显得脏。换算成 OKLCH 排成表,三个色相相差近百度,问题立刻可见,也立刻可修。

两家产品的中性底色换算后色度都只有 0.003 左右,方向一致偏冷;第三家色度 0.007 且偏暖,因为它的底色是按用户壁纸动态算出来的。同样是「白」,来历不同,气质就不同。

类型:技术文档 / 标准

事实线:OKLCH 是 Oklab 色彩空间的柱坐标形式,Oklab 于 2020 年被提出,目的是修正旧色彩空间在感知均匀性上的偏差;现代 CSS 已支持直接用它书写颜色。

依据:色彩科学文献与 CSS 颜色规范。

读者使用方式:把界面里的主要颜色换算成 OKLCH,对照一张表看色度和色相,能立刻看出整套配色是偏冷、偏暖还是杂乱。

边界:适合用来诊断和定义色彩系统;不适合用来证明某个配色「更高级」。

常见误读:以为色度越低越高级。零色度是纯灰,很多成熟产品的中性色也不是纯 0,只是色度极低且方向统一。