Docs

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

输入“/”快速插入

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

飞书用户3463

飞书用户3404

2022年8月21日创建

955

1767

❓

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

背景

•
写给设计师，你或许将要在产品设计中搭建色彩系统​

•
使用过 HSL，并对色彩模型、色彩空间等概念有一定了解​

最佳实践

•
推荐使用基于「感知亮度」的色彩空间，而不是 HSL​
◦
相同数值的感知亮度所代表的视觉感受是近乎一致的​
◦
更有效地预测对比度，更稳定的搭建色阶，更容易满足色彩无障碍​

•

本文推荐 OKLCH 色彩空间，也就是 OKLAB 的极坐标形式

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

◦
✅ OKLCH 感知亮度均匀​

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

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

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

◦

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

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

最近更新：2023年8月

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

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

•
选择某个色彩空间，如 sRGB、HSL等；​

•
设置色彩空间的分量数值来确定颜色，比如在 HSL 中调整 H 来修改色相。​

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

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