感知色彩空间：Lab、LCH、Oklab、OKLCH

当你设计一套感知间距均匀的色卡——即在人眼看来均等分布的色阶——你很快就会发现 HSL 和 RGB 是错误的工具。以相同间隔递增 HSL 亮度，在不同色相下产生的视觉跨越截然不同。蓝色变暗的速度远快于黄色。绿色和黄色集中在亮端，蓝色和紫色集中在暗端，然而它们共享相同的亮度数值。

解决方案是感知均匀色彩空间：在其中，任意方向上相等的数值差异对应相等的感知色差。本文追溯感知均匀色彩空间的演进历程——从 1976 年的 CIE Lab 到 2020 年的 OKLCH——解释每个空间的工作原理及其独特之处。

感知均匀性为何重要

人类色觉是一个为了生存而进化的生物系统，而非为了线性测量。视网膜中的三种视锥细胞对重叠范围的光波长做出响应，峰值敏感度在绿黄区域。我们对绿光变化的敏感度远高于蓝光。我们对亮度的感知也是非线性的：物理光输出增加 10%，在视觉上产生的感知增量，远小于从接近黑暗的状态开始的 10% 增加。

这些生理事实意味着，任意颜色的数值坐标——其 R、G、B 值或 H、S、L 值——都是对颜色外观极不可靠的向导。在 sRGB 或 HSL 中数值距离相同的两种颜色，看起来可能几乎无法区分，也可能截然不同，取决于它们在色彩空间中所处的位置。

感知均匀色彩空间试图纠正这一点。其数学结构根据人类感知数据进行校准，这些数据来自观察者比较颜色并报告哪些颜色对"看起来同样不同"的实验。目标是：在色彩空间中任意方向移动 10 个单位，无论从哪个起点出发，产生的视觉变化大小都相同。

以下实际应用受益于感知均匀性：

• 色阶生成：构建视觉上均等分布的 10 步色调量表
• 颜色插值：渐变过渡平滑，无亮度凹陷
• 对比度评估：判断两种颜色在感知上是否"足够不同"
• 颜色选取：移动滑块产生可预测的视觉效果
• 数据可视化：将数值数据映射到颜色时，不产生误导性的亮度变化

CIE Lab（1976 年）

CIE Lab（也写作 L*a*b* 或 CIELAB）由国际照明委员会于 1976 年标准化。它至今仍是制造、印刷和纺织行业色彩测量的国际标准。

结构

Lab 使用三个坐标轴：

• L* — 亮度，从 0（黑色）到 100（白色）
• a* — 绿-红轴。负值为绿色，正值为红色/洋红色。
• b* — 蓝-黄轴。负值为蓝色，正值为黄色。

a* 和 b* 轴是对立色轴，反映了视觉系统神经元将颜色信息编码为红-绿和蓝-黄信号的方式。

从 XYZ 到 Lab

转换为 Lab 需要先经过 CIE XYZ——一个由"标准观察者"的颜色匹配函数导出的线性色彩空间：

L* = 116 × f(Y/Yn) − 16
a* = 500 × [f(X/Xn) − f(Y/Yn)]
b* = 200 × [f(Y/Yn) − f(Z/Zn)]

其中 Xn, Yn, Zn 是参考白点（通常为 D65，标准日光照明体）的 XYZ 值，f 是编码人类亮度感知压缩性质的立方根函数。

色彩转换器可将任意 HEX 或 RGB 值与其他格式一起转换为 Lab 坐标。

Lab 的优势与局限

Lab 在预测两种颜色是否看起来"同样不同"方面，远优于 sRGB 或 HSL。其亮度轴 L* 近似感知均匀——对于大多数观察者在标准观察条件下，从 L*=30 到 L*=40 的变化，看起来与从 L*=60 到 L*=70 的变化大小相当。

然而，CIE Lab 存在一个已知的缺陷：色度-亮度相互作用。鲜艳、高饱和度的颜色（特别是蓝色和绿色）在 Lab 空间中看起来略显不均匀。Lab 空间中某些感知上的"圆形"，对于实际人类观察者而言，看起来更像椭圆或不规则形状。基于大量实证数据的孟塞尔系统，无法与 Lab 完全吻合。

Lab 还以直角坐标定义，这对于习惯用色相和饱和度思考的设计师来说不够直观。

CSS 语法

/* CSS 中的 CIE Lab */
color: lab(55% -20 40);
/* L*=55（中间调），a*=-20（略偏绿），b*=40（黄色） */

color: lab(75% 0 0);
/* L*=75 处的中性灰 */

LCH：圆柱坐标的 Lab

LCH 是 CIE Lab 的圆柱坐标变换——用极坐标表达的同一色彩空间。它使用以下坐标，替代 a*/b* 直角坐标网格：

• L — 亮度（与 Lab L* 相同）
• C — 色度（到中性灰轴的距离：C = √(a² + b²)）
• H — 色相角，单位为度（H = atan2(b, a)，范围 0—360）

为何 LCH 比 Lab 更直观

色度类似于"饱和度"，但更有意义：它测量颜色相对于等亮度中性灰的色彩鲜艳程度。色相则是色轮上熟悉的角度。这使 LCH 对设计师而言比 Lab 的抽象 a*/b* 坐标更易理解。

关键在于，LCH 保留了 Lab 的感知均匀性属性。相等的 C 增量看起来像色彩鲜艳度的相等增加。相等的 L 增量看起来像亮度的相等步进。由于 L 轴与 Lab 的 L* 相同，相等的 L 步进在所有色相下看起来感知均匀——不像 HSL，在同一 L 值下，黄色比蓝色亮得多。

CSS 语法

/* CSS 中的 LCH */
color: lch(55% 50 150);
/* L=55（中间调），C=50（适中色度），H=150（绿色） */

/* 以一致的感知亮度构建色调量表 */
:root {
  --teal-100: lch(95% 10 190);
  --teal-300: lch(75% 25 190);
  --teal-500: lch(55% 40 190);
  --teal-700: lch(35% 35 190);
  --teal-900: lch(18% 20 190);
}

LCH 的局限性

LCH 继承了 Lab 底层的色度-亮度相互作用问题。LCH 中的色相线在投影到人类感知时并非完全"笔直"——尤其是在蓝色范围（H ≈ 270—300）。这意味着在 LCH 中以固定色相增加色度时，表观色相可能略有偏移。蓝色随着色度增加倾向于向紫色漂移。这被称为"色相非线性"，是下一代色彩空间诞生的主要动机。

Oklab（2020 年）

Oklab 由比约恩·奥托森（Björn Ottosson）于 2020 年发布，是对 CIE Lab 已知缺陷的直接回应——具体而言，是使 Lab 和 LCH 的感知均匀性不及预期的色相非线性问题。

设计目标

奥托森明确的目标是创建一个满足以下条件的色彩空间：

1. 亮度在所有色相上感知均匀
2. 所有方向上相等的数值差异对应相等的感知差异
3. 色相线近似笔直（色度变化时色相保持一致）
4. 计算简单快速

为此，奥托森采用了不同的方法：他并非直接从 CIE XYZ 颜色匹配函数推导色彩空间，而是将新的变换矩阵拟合到来自人类色彩辨别实验的实证数据（具体包括麦克亚当椭圆数据和 Luo-Rigg 数据集）。结果是一个更好地拟合人类色彩感知实际形状的空间。

结构

Oklab 使用与 CIE Lab 相同的 L/a/b 命名，但坐标轴含义不同：

• L — 亮度，0 到 1（注意：归一化为 1，而非 100）
• a — 绿-红对立色轴（类似 CIE Lab a*，但色相线性更好）
• b — 蓝-黄对立色轴

从 sRGB 的转换涉及两次矩阵乘法和一个立方根步骤，使其适合实时计算。

Oklab 与 CIE Lab 的主要改进

色相线性的改进在蓝紫色范围最为明显，而 CIE Lab/LCH 在这一区域会产生失真。在 Oklab 中，以固定色相增加色度产生的色相漂移更少。

CSS 语法

/* CSS 中的 Oklab */
color: oklab(0.55 -0.05 0.12);
/* L=0.55（中间调），a=-0.05（略偏绿），b=0.12（黄色） */

OKLCH：圆柱坐标的 Oklab

OKLCH 之于 Oklab，正如 LCH 之于 Lab——同一色彩空间，以圆柱极坐标表达。这是在现代 CSS 和设计工具中获得最广泛采用的格式。

• L — 亮度，0 到 1
• C — 色度（到中性轴的距离），sRGB 颜色通常在 0 到约 0.4 之间
• H — 色相角，0—360 度

/* CSS 中的 OKLCH */
color: oklch(0.55 0.15 160);
/* L=0.55，C=0.15，H=160°（绿青色） */

OKLCH 相对于 LCH 的实际差异

对于大多数设计工作，OKLCH 和 LCH 产生相似的结果。差异在以下情况最为明显：

1. 在蓝色范围内生成色阶：高色度时，LCH 蓝色范围的色阶可能略微向紫色漂移。OKLCH 色阶则保持在原色相上。
2. 跨色相插值：OKLCH 在蓝紫色范围内的渐变，比 LCH 渐变更鲜艳、色相更稳定。
3. 色度色域映射：当颜色超出 sRGB 色域而必须映射回来时，OKLCH 更好的色相线性使色域映射结果更可预测。

在 OKLCH 中构建色阶

由于 OKLCH 的 L 轴经过感知校准，你可以以相等的 L 增量生成 10 步色阶，获得近似相等的视觉步进：

从品牌紫色 #7C3AED 出发——约为 oklch(0.52 0.23 295)：

:root {
  --purple-50:  oklch(0.97 0.04 295);
  --purple-100: oklch(0.93 0.07 295);
  --purple-200: oklch(0.86 0.11 295);
  --purple-300: oklch(0.78 0.15 295);
  --purple-400: oklch(0.68 0.19 295);
  --purple-500: oklch(0.58 0.22 295);
  --purple-600: oklch(0.52 0.23 295);  /* 品牌色 */
  --purple-700: oklch(0.44 0.22 295);
  --purple-800: oklch(0.35 0.18 295);
  --purple-900: oklch(0.27 0.13 295);
  --purple-950: oklch(0.20 0.09 295);
}

每一步代表感知上一致的亮度递减。注意色度在接近深色端时也做了调整——在任何感知色彩空间中，极深的颜色都无法承载高色度。使用色彩转换器找到你品牌色的 OKLCH 坐标，然后系统性地调整 L 值。

OKLCH 超越 sRGB：宽色域颜色

OKLCH 相对于 Lab/LCH 在 Web 开发中的一个主要优势是，OKLCH 可以寻址 sRGB 色域以外的颜色。支持 Display P3 或 Rec. 2020 的现代显示器能够渲染比 sRGB 更鲜艳的颜色。OKLCH 坐标可以描述这些宽色域颜色：

/* 这个鲜艳绿色在某些色相/色度组合下可能超出 sRGB */
color: oklch(0.80 0.30 140);
/* 浏览器在标准显示器上渲染最接近的 sRGB 等效值 */
/* 在宽色域显示器上渲染完整的鲜艳颜色 */

C > ~0.25 的颜色对于某些色相角可能超出 sRGB。使用色彩转换器检查特定 OKLCH 值是否在色域内。

为任务选择合适的色彩空间

CSS 支持说明

所有四个色彩空间——Lab、LCH、Oklab 和 OKLCH——均在 CSS Color Level 4 中得到支持，自 2022—2023 年起在所有主流现代浏览器中可用：

color: lab(55% -20 40);     /* CIE Lab */
color: lch(55% 50 150);     /* LCH */
color: oklab(0.55 -0.05 0.12); /* Oklab */
color: oklch(0.55 0.15 160);   /* OKLCH */

对于大多数 Web 设计工作，OKLCH 是默认选择：它是最直观的圆柱坐标格式，具有最佳的色相线性，并可访问最宽的色域。当需要进行直角坐标色彩计算（距离、平均值）时使用 Oklab。只有当你需要与围绕它们构建的现有设计系统或标准保持兼容时，才使用 CIE Lab/LCH。

核心要点

• 感知均匀性意味着相等的数值距离对应相等的感知色差。sRGB 和 HSL 不具感知均匀性；Lab、LCH、Oklab 和 OKLCH 被设计为具有感知均匀性。
• CIE Lab（1976 年）是首个被广泛采用的感知均匀空间。其 L* 轴对亮度校准良好，但色度-亮度相互作用在蓝色区域导致色相漂移。
• LCH 是以圆柱坐标（色相、色度）表达的 CIE Lab——比 Lab 的 a*/b* 轴对设计师更直观，但继承了 Lab 的色相线性问题。
• Oklab（2020 年）由比约恩·奥托森设计，使用实证人类感知数据修复了 Lab 的色相非线性问题，实现了更好的跨色度范围色相一致性。
• OKLCH 是圆柱坐标形式的 Oklab——CSS 和设计工作中最实用的格式。它融合了感知均匀性、直观的色相-色度-亮度坐标，以及对宽色域颜色的访问能力。
• 使用色彩转换器将任意 HEX 或 RGB 颜色转换为 OKLCH，开始构建感知校准的色彩系统。