OKLCH 色彩空间是搭建色彩系统的最佳选择

在千万种色彩中，如何快速选择出最合适的色彩？

总结

背景

写给设计师，你或许将要在产品设计中搭建色彩系统
使用过 HSL，并对色彩模型、色彩空间等概念有一定了解

最佳实践

推荐使用基于「感知亮度」的色彩空间，而不是 HSL
- 相同数值的感知亮度所代表的视觉感受是近乎一致的
- 更有效地预测对比度，更稳定的搭建色阶，更容易满足色彩无障碍
本文推荐 OKLCH 色彩空间，也就是 OKLAB 的极坐标形式
- ✅ OKLCH 使用「感知亮度 L - 色度 C - 色相 H」三个易于理解的分量
- ✅ OKLCH 感知亮度均匀
- ✅ OKLCH 尽可能降低色度对亮度的影响（亥姆霍兹-科尔劳施效应）
- ✅ OKLCH 尽可能修复了色相偏移（阿布尼效应）
- ✅ OKLCH 支持为更广的色域提供编码支持（P3、Rec.2020及更高版本）
- ✅ oklch()已经加入目前 CSS4 的候选版本，主流浏览器均已支持，兼容情况

顾巍，Design Director，目前供职于小影。

最近更新：2023年8月

当设计师在挑选色彩的时候，我们究竟是在做什么？

在各种设计软件中有那么多挑选色彩的工具，我们的选择过程本质上包括了：

选择某个色彩空间，如 sRGB、HSL等；
设置色彩空间的分量数值来确定颜色，比如在 HSL 中调整 H 来修改色相。

色彩空间（Color Space）是色彩的特定组合范围，其中两个主要特征对应了我们挑选色彩的过程。

第一点是「色域」，指明了该色彩空间所包含的全部色彩值域，通常表示为与人眼可视色彩范围的关系。

图片来自 https://commons.wikimedia.org/wiki/File:CIE1931xy_gamut_comparison_of_sRGB_P3_Rec2020.svg

第二点是解释色彩时使用的分量，也可以理解为在色彩虚拟空间中的坐标关系。

图片来自 https://en.wikipedia.org/wiki/HSL_and_HSV

除此之外，一些色彩空间的定义还包含了「白点」、「伽马校正」等，与本篇关系不大，暂且略过。

那我们该选择哪个色彩空间？

RGB 是对机器友好的色彩模型，对人类并不友好

RGB 颜色模型，由红、绿、蓝三原色叠加组合定义。

现代电子设备的主要显示机制就是通过红、绿、蓝的电子元件分别发光组合出单个像素所对应的颜色。对于每个发光元件来说，只需要处理自己所对应的 R、G、B 分量数值来决定自身的发光亮度，而无需复杂的运算。

图片来自 https://commons.wikimedia.org/wiki/File:RGB_color_wheel_pixel_30.svg

RGB 色彩模型为了在不同的设备中对比和转换，通过定义白点和伽马校正，形成不同的色彩空间。常见的有 sRGB、Display P3、Adobe RGB 等。

sRGB（包括 Hex 格式）是我们最常见、也可能是应用最广泛的色彩空间，目前是 Web 的默认设置，支持绝大多数的显示设备，常见的表示方式是rgb(255, 255, 255)或#FFFFFF。

但是人类的识别和使用却十分困难，我们难以在直觉上得出 RGB 三色分量的混合结果，只有在特定情况下（比如纯色）才比较容易理解。

rgb(131, 103, 210)/#8367D2 是以下哪个色彩？

虽然有经验的设计师可以通过一些评估过程得出正确的答案，但很难说这个过程是值得的。

另外基于 RGB 的渐变色，中间部分可能会由于分量数值接近导致色彩饱和度降低，显得灰暗。

结论

⛔️ RGB 色彩模型难以直接识别和对比

⛔️ RGB 色彩模型经常需要三个分量同时调整，过程复杂

⛔️ 基于 RGB 的渐变色，中间部分会丢失饱和度

PS：CMYK 是对印刷友好的色彩模型，同样对人类不友好

HSL 的亮度值与眼睛的感知不一样

设计师常用的 HSL 色彩空间，是 RGB 色彩模型的特定坐标转换结果。

采用「色相 H - 饱和度 S - 亮度 L」三个分量映射 RGB 色彩模型中的对应色彩，优化了实践中常见的饱和度、亮度的选择和调整过程，更加自然、符合直觉、容易理解。

常见的表示方式是hsl(360deg, 100%, 50%)。

在 HSL 色彩空间中，调整色相 H 展示从hsl(0deg, 100%, 50%)到hsl(360deg, 100%, 50%)的渐变，就是设计师选择色相时常见的「彩虹条」。

由于人类的视觉感知并不是均匀的，色彩的波长在人类的三种视锥细胞的影响力不同，我们发现彩虹条上的一些颜色更亮，而一些较暗。

去掉饱和度，更直观地看出在黄色到绿色区间显著更亮，而在蓝色的区间更暗。

计算感知亮度发现：最亮处有92.8，而最暗处只有7.2。

基于 HSL 建立的调色板，在感官上同一等级差异太大。

基于 HSL 的渐变色，由于各个色相的感知亮度不均匀，可能发生非预期的变化。

❓ 绿色hsl(90deg, 100%, 50%)与紫色hsl(270deg, 100%, 50%)的亮度到底差了多少？

与同一个背景上的紫色文字相比，同样 HSL 亮度的绿色文字很难看清。

结论

⛔️ HSL 的亮度分量在感知上不均匀，难以评估色彩可访问性

⛔️ 当 HSL 色相偏移时，感知亮度也会发生非预期的变化

PS：HSV（HSB）是另一种 RGB 色彩模型的变换，与 HSL 情况基本一致

HCL 是最佳候选之一，但还是有一些小瑕疵

CIELAB 色彩空间是国际照明委员会于1976年定义，最大的特征是定义感知亮度 L 分量，尽可能匹配人类对亮度的感知。

但另外两个分量 a、b 分别代表红绿程度、蓝黄程度，与 RGB 色彩模型类似，不太符合使用直觉。

我们希望像 HSL 一样，通过易于理解的色相、饱和度来使用 CIELAB 色彩空间，这就有了 HCL。

图片来自 https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

HCL 色彩空间（Hue-Chroma-Luminance，也可调整顺序为 LCH）是 CIELAB 的极坐标转换。通过「色相 H - 色度 C - 感知亮度 L」三个分量从人类视觉感知的角度描述颜色，形成数值与感知相对统一的色彩空间。

常见的表示方式是hcl(360, 40, 75)或lch(75% 40 360)。

下面是 L=75 时的 HCL 示例，去掉色度后更容易看出色彩具备感知均匀性。

当我们设置 L 为相同的数值时，得出的效果也近似。

基于 HCL 建立的调色板，能够比较准确的反映色彩级别，可以轻易地更换色相。

在渐变色方面，HCL 的表现也十分稳定。

虽然 HCL 已经近乎满足了所有需求，但我们还是低估了色彩的复杂性。

亥姆霍兹-科尔劳施效应（Helmholtz—Kohlrausch effect）指出强烈的色度会影响视觉感知。即便在光源亮度一样的情况下，对于人类视觉来说，彩色光也似乎比白光更亮。

例如下图中所有色彩的 L=54，但我们发现色度更高的色彩 1 和色彩 4 似乎更亮。

阿布尼效应（Abney effect）指出当白色光叠加到单色光时发生的感知色相偏移。例如#460FF2叠加#FFFFFF后颜色会呈现偏紫色。

HCL 色彩空间中有同样的问题，例如 H=303 时，L 从 0 到 100 也呈现从蓝变紫的色相偏移。

结论

⛔️ HCL 在部分色相区域会发生色调偏移

⛔️ 强烈的色度会影响亮度感知，HCL 面对色度变化时感知亮度不太均匀

PS：CIELuv 及其转换形式 HSLuv 情况基本一致，但兼容和支持场景更少

OKLCH 基本解决了以上所有问题

OKLCH 色彩空间（Lightness-Chromacity-Hue) 是 OKLAB 的极坐标转换。由 Björn Ottosson 于 2020 年创建，基于感知更为均匀的 CAM16-UCS 色彩空间和计算模式简单的 IPT 色彩空间。

常见的表示方式是oklch(``75% 0.1 360``)或oklch(0.75, 0.1, 360)。

✅ OKLCH 使用「感知亮度 L - 色度 C - 色相 H」三个易于理解的分量

感知亮度 Lightness

范围是 0 到 100%，0%是#000000纯黑，100%是#FFFFFF纯白。

色度 Chromacity

OKLCH 理论支持的色度没有上限，但对应到 sRGB 或 P3 的色域部分不高于 0.37，对应到 Rec2020 的色域部分不高于 0.47。

这里遗憾的是，虽然色度数值表现是均匀的，但不同色相的色度上限范围差异较大。

以映射到 sRGB 色域为例：

色相 Hue

使用方法与 HSL 基本一致，范围是 0 到 360。

✅ OKLCH 感知亮度均匀

下面是 L=75 时的 OKLCH 示例。

基于 OKLCH 的渐变色变化，对比 HCL 还要更均匀。

✅ OKLCH 尽可能降低色度对亮度的影响（亥姆霍兹-科尔劳施效应）

OKLCH 降低了高色度的亮度，提高了低色度的亮度。

✅ OKLCH 尽可能修复了色相偏移（阿布尼效应）

图片来自 https://www.w3.org/TR/css-color-4/#ok-lab

✅ OKLCH 支持为更广的色域提供编码支持（P3、Rec.2020及更高版本）

比较有实际意义的主要是 Apple 的 Display P3，近几年的 iPhone、iPad（除了入门款）、MacBook 已经全部支持，比 sRGB 的色彩范围几乎大了25%。

从长远来看，OKLCH 是基于人眼的全可视范围制定的，也就意味着兼容未来的设备色域。

使用 OKLCH 等广色域色彩空间能够更好地为新设备带来更好的体验。

图片来自 http://www.astramael.com/

✅ `oklch()`已经加入目前 CSS4 的候选版本，主流浏览器均已支持

具体进度参考 W3 工作组的 CSS Color Module Level 4 候选内容。

与其他较新的色彩空间相比，生态兼容和支持的速度飞快。

⛔️ OKLCH 的不足之处

目前还处于早期阶段，生态还不完善；
为了保证色度数值均匀，导致色度分量有不可见的数值组合；
在低亮度范围时（L<10），在部分设备上区分度比较弱；
按照 APCA 计算对比度，灰度中间位置对应的感知亮度 L 大约在 71.55%。

PS：HCT 色彩空间是 Google 在 Material Design 3.0 中推出的新方案，基于 CAM16 色彩空间与Lab 色彩空间进行了改善，目前实现相对复杂，也值得持续关注。

在 OKLCH 空间中选择颜色

我们以OKLCH Color Picker & Converter为例。

https://oklch.com/#75,0.1,300,100

亮度 L 输入
色度 C 输入
色相 H 输入
输出颜色

一般来说，我们会先选好色相 H，设定好 L 梯级，最后在受限的色度范围内选择你所偏好的色彩。

需要注意由于 sRGB 的色域小于 OKLCH，超出范围的颜色可能无法在你的设备上显示。

我的 Figma 色彩插件上线了- Palette lap

生成调色盘，生成 variables

应用了 OKLCH 和 APCA，产生高度可预测对比度的色彩等级

例如 Level 80 的前景色与 Level 20 的背景色，必定产生60以上的APCA分数 https://www.figma.com/community/plugin/1266402926106098747/Palette-From.Red

下一步

OKLCH 目前发展势头很强，在新一代的色彩方案里几乎确认占有一席之地。

如果你正在搭建或重构色彩系统，OKLCH 一定是最佳选择之一。

本文主要是着重在介绍和推荐选择哪一个色彩空间，如果想要搭建完整的色彩系统，可以期待后续的文章。

感谢阅读。

资源

参考文章

工具

更新记录

2022-09-02 v1.0.0 第一版
2022-10-26 v1.0.1 补充参考文章 OKLCH in CSS: why we moved from RGB and HSL
2023-02-13 v1.0.2 补充参考文章 OK, OKLCH: a color picker made to help think perceptively
2023-05-22 v1.0.3 补充参考视频 Thinking on ways to solve color palettes
2023-08-02 v1.1 更新浏览器兼容情况，目前主流浏览器均已经支持oklch()方法
2023-08-09 v1.2 更新 Figma 插件