颜色亮度对比 (HSL vs Lab L* vs WCAG vs HSP)
颜色
每个谈论颜色「亮度」或「明度」的 UI 工具含义都不同。HSL 的 L 是 RGB 最大值与最小值的中点 — 纯黄 #ffff00 和纯蓝 #0000ff 都得 L=50%,虽然前者刺眼后者在屏上近乎黑色。HSV 的 V 更糟,返回最大通道,所以纯红、纯绿、纯蓝都达 V=100%。WCAG 的 Y(相对亮度)是对比度比公式所用 — 将 sRGB 伽马解码为线性光,并按视觉灵敏度(0.2126 R + 0.7152 G + 0.0722 B)加权,所以黄色真正亮、蓝色真正暗。CIE Lab L* 在物理亮度之上叠加立方根感知曲线,使等距 L* 在人眼看来等距。Rec. 709 Luma 是广播电视近似(伽马编码,与 WCAG 同权重)。HSP 是 Darel Rex Finley 的心理物理近似式。本工具对一色或一对显示全部七种指标,让你看清各种排序如何分歧。
—
亮度指标
HSL Lightness (L)
59.8
(max RGB + min RGB) / 2。纯黄与纯蓝同得 50%。与感知无关。
HSV Value (V)
96.5
最大 RGB 通道。纯红、纯绿、纯蓝都达 100%,比 HSL L 更非感知。
WCAG Relative Luminance (Y · LRV)
23.5
伽马解码线性亮度:0.2126 R + 0.7152 G + 0.0722 B。WCAG 对比度比所用。等同于光反射值(LRV) × 100。
CIE Lab L* (perceptual lightness)
55.6
CIE 1976 L* — 感知均匀明度。等距 L* 在人眼看来等距。Y = 18% → L* = 50。
Rec. 709 Luma (Y′)
48.3
伽马编码 sRGB 上的 Rec. 709 Luma(Y′)。广播电视近似;介于 HSL L 与 WCAG Y 之间。
HSP Perceived Brightness
52.4
Darel Rex Finley 的 HSP:√(0.299R² + 0.587G² + 0.114B²)。胜过朴素平均,快于 CIE Lab。
Naïve (R+G+B)/3
56.9
(R + G + B) / 3。把绿视为与蓝相同。仅作为警示性基线纳入。
请阅读
若指标之间出入很大 — 特别是 HSL L 与 Lab L* / WCAG Y — 你的颜色选择会让用户感到意外。感知判断信任 Lab L*(或 OKLCH L);无障碍信任 WCAG Y。
刁钻示例对
使用方法
- 选一种颜色,即可读到七种亮度指标,各自以与指标值成比例的水平条显示。
- 切换到「成对」模式,加入第二种颜色,即可看到每个指标的差 — 适合诊断为何调色板感觉不齐。
- 点击示例对加载刻意刁钻的组合(HSL L 相同的黄/蓝、HSV V 相同的红/绿等)。
- 复制报告以分享或粘贴到设计评审中。
常见问题
- 实际应该用哪一个指标?
- 视问题而定。无障碍对比 → WCAG Y / LRV(对比度比公式所用)。感知均匀的调色板或渐变 → CIE Lab L* 或 OKLCH L。广播视频 → Rec. 709 Luma。HSL L 与 HSV V 在拾色器中是方便的手柄,但几乎不能说明一种颜色看起来有多亮。切勿使用 (R+G+B)/3 — 仅作为反面教材包含。
- 为什么黄色和蓝色的 HSL L 都是 50%?
- HSL 定义为 L = (max RGB + min RGB) / 2。纯黄 #ffff00 的通道为 (255, 255, 0) → (255 + 0) / 2 = 50%。纯蓝 #0000ff 是 (0, 0, 255) → (255 + 0) / 2 = 50%。HSL 完全忽视人眼对绿/黄的敏感度约为对蓝的 10 倍。它只是 RGB 立方体上的几何构造,不是感知模型。
- WCAG Y 与 Lab L* 的区别?
- WCAG Y 是光视觉亮度 — 校准光度计对准渲染像素所测,归一到 0–1(建筑学中常报告为 LRV × 100)。Lab L* 则是把该亮度送入 L* = 116 × f(Y/Yn) − 16,其中 f 是符合感知的立方根函数。因此 Y = 50% 落在 L* ≈ 76(感知上比黑色更靠近白色),Y = 18% 落在 L* = 50(中灰)。
- HSP 是什么?为什么包括它?
- HSP(色相/饱和度/感知亮度)是 Darel Rex Finley 的模型,在伽马编码 RGB 上以 P = √(0.299R² + 0.587G² + 0.114B²) 近似感知亮度。与经典 Y′ 使用相同的 Rec. 601 权重,但用欧氏 RMS 取代算术平均。它不是标准化的,但当你想要比朴素平均更准、又不愿做完整 sRGB→Lab 转换时常被采用。