HELMLAB: An Analytical, Data-Driven Color Space for Perceptual Distance in UI Design Systems

本文提出了 HELMLAB，一种专为 UI 设计系统打造的 72 参数解析色彩空间，它通过结合学习矩阵、通道幂压缩及傅里叶色相校正等机制，在 COMBVD 数据集上将感知距离的 STRESS 值较 CIEDE2000 降低了 20.2%，并具备高可逆性及完善的设计系统实用工具。

要点

这篇论文介绍了一个名为 HELMLAB 的全新“颜色语言”，它是专门为用户界面（UI）设计系统量身打造的。

想象一下，设计师在屏幕上调整颜色时，就像在指挥一支庞大的乐队。如果乐手（颜色）之间的音高（色差）不准，或者灰度（中性色）听起来像是有杂音，那整首曲子（设计系统）就会很难听。现有的颜色标准（如 CIE Lab 或 CIEDE2000）就像是一台老旧的调音台，虽然能用，但不够精准，有时候甚至会让灰色听起来带点“偏色”。

HELMLAB 就是作者 Görök Yıldız 打造的一台超级智能调音台。

以下是用通俗语言和比喻对这篇论文核心内容的解读：

1. 核心目标：让颜色“听”起来更准

在 UI 设计中，我们需要做三件重要的事：

• 判断对比度：文字和背景够不够清晰？
• 生成渐变：从深灰到浅灰的过渡是否平滑自然，没有奇怪的色块？
• 调整色相：把红色变成橙色时，是否顺滑？

现有的标准在这些方面往往顾此失彼。HELMLAB 的目标是三者兼得。它通过一种全新的数学方法，把颜色从“物理数据”（XYZ）转换成人类眼睛真正能“听懂”的“感知数据”（Lab）。

2. HELMLAB 是怎么工作的？（72 个参数的“魔法”）

你可以把 HELMLAB 想象成一个72 个旋钮的精密调音台。作者没有像以前那样手动设计这些旋钮，而是让计算机通过“试错”和“学习”，自动找到了这 72 个旋钮的最佳位置。

这个调音台有 11 个步骤（Stage），就像一条流水线：

• 第一步（接收信号）：先把原始颜色信号接收进来。
• 压缩与拉伸：就像把声音的音量压缩一下，让大声音和小声音都能被耳朵听清。
• 修正“走调”：有些颜色（特别是蓝色和青色）在旧标准里容易“走调”（梯度不均匀）。HELMLAB 专门加了一个“蓝色修正器”，把这块区域的误差减少了近 9 倍！
• 亮度与饱和度的“纠缠”：以前我们认为亮度和颜色深浅是独立的，但 HELMLAB 发现，鲜艳的颜色看起来会更亮（这叫 Helmholtz–Kohlrausch 效应），它把这个效应直接写进了算法里。
• 终极修正（中性色校准）：这是最关键的创新。以前的系统在处理纯灰色时，往往会不小心染上一点点红或蓝（就像白衬衫洗久了有点泛黄）。HELMLAB 在最后一步专门加了一个“去污剂”，保证所有的灰色在数学上绝对纯净（没有杂色），这对于设计渐变背景至关重要。

3. 它有多厉害？（成绩单）

作者用了一个包含 3800 多对颜色对比的“考试卷”（COMBVD 数据集）来测试 HELMLAB。

• 旧标准（CIEDE2000）：得分是 29.18（分数越低越好，代表误差越小）。
• HELMLAB：得分是 23.30。
• 结果：HELMLAB 比旧标准精准了 20.2%。这就像是在百米赛跑中，别人跑了 10 秒，你跑进了 8 秒，是巨大的飞跃。

此外，它在处理蓝色到青色的过渡时，平滑度提升了近 9 倍，解决了长期以来蓝色区域颜色断层的问题。

4. 为什么这对设计师很重要？

• 完美的灰色渐变：以前设计师做“从黑到白”的渐变时，中间可能会出现奇怪的紫色或绿色条纹。HELMLAB 保证了灰色就是灰色，渐变丝滑如绸缎。
• 自动适配深色/浅色模式：它内置了逻辑，能根据屏幕是亮模式还是暗模式，自动微调颜色的亮度，让眼睛更舒服。
• 一键导出：它可以直接生成用于网页（CSS）、安卓（Android）和苹果（iOS）的代码，设计师不需要再手动换算。

5. 总结：一个更聪明的颜色宇宙

简单来说，HELMLAB 是一个由数据驱动、经过 72 个参数微调的“超级颜色空间”。

它不像以前的标准那样是“拍脑袋”定下来的规则，而是通过大量人类视觉实验数据“训练”出来的。它既保留了数学上的严谨（可以反向计算，误差极小），又完美照顾了人类眼睛的喜好。

对于 UI 设计师来说，这意味着以后做设计系统时，颜色更准、渐变更顺、对比度更清晰，而且不用再去担心那些恼人的“颜色泄漏”问题了。这就好比从使用一把普通的尺子，升级到了使用一把带有激光校准的纳米级测量仪。

技术摘要

HELMLAB 论文技术总结

1. 研究背景与问题 (Problem)

现有的 UI 设计系统（如 Web 和移动端）在颜色处理上面临三大核心挑战，而现有的颜色空间无法同时满足这三点：

1. 感知距离预测的准确性：需要精确预测颜色差异（Color Difference），用于对比度检查和视觉评估。
2. 中性轴（无彩色轴）的完整性：灰色（无彩色）必须映射到色度 $a=b=0$，以确保在生成渐变（Gradients）和调色板时不会出现颜色伪影。
3. 色相角（Hue Angle）的对齐：需要合理的色相角对齐，以便进行程序化的颜色操作（如旋转色相）。

现有方案的局限性：

• CIE Lab / CIEDE2000：虽然是行业标准，但在 COMBVD 数据集上的 STRESS 指标为 29.18，且存在中性轴色度泄漏问题。
• Oklab：结构简单且被 CSS 采纳，但优化目标是色相均匀性而非颜色差异预测，STRESS 高达 47.5。
• CAM16-UCS：基于外观模型，计算复杂且存在中性轴色度泄漏（$\bar{C}=1.42$）。
• IPT / Jzazbz：分别在色相线性化或 HDR 方面做了优化，但未能端到端地联合优化变换和距离度量。

核心问题：缺乏一个能同时优化颜色空间变换和距离度量，且针对 UI 设计系统（sRGB/Display P3 色域）进行端到端训练的感知均匀颜色空间。

---

2. 方法论 (Methodology)

作者提出了 HELMLAB，这是一个包含 72 个可学习参数 的解析颜色空间。该方法将“从 XYZ 到距离度量”的整个流程视为一个单一系统，并在最大的颜色差异数据集（COMBVD）上进行联合优化。

2.1 前向变换流程 (Forward Transform)

从 CIE XYZ (D65) 到 HELMLAB Lab 的变换包含 11 个阶段：

1. 锥体响应 (Cone Response)：使用一个可学习的 $3\times3$ 矩阵 $M_1$ 将 XYZ 映射到类锥体响应信号（替代了固定的 Hunt-Pointer-Estévez 矩阵）。
2. 幂压缩 (Power Compression)：对每个通道进行带符号的幂压缩 $c'_i = \text{sign}(c_i)|c_i|^{\gamma_i}$，指数 $\gamma_i$ 可学习（优化值约 0.4，介于立方根和平方根之间）。
3. Lab 投影：使用第二个可学习矩阵 $M_2$ 将压缩信号投影到对立通道 ($L, a, b$)。
4. 色相校正 (Hue Correction)：引入 4 阶傅里叶级数旋转 $\delta(h)$，修正系统性的色相扭曲，同时保持色度不变。
5. Helmholtz-Kohlrausch (H-K) 嵌入：将饱和度对亮度的感知影响（H-K 效应）直接嵌入亮度通道。亮度 $L$ 显式依赖于色度 $C$ 和色相 $h$，参数从数据中学习。
6. 亮度细化 (Lightness Refinement)：包含立方多项式、色相依赖的加法项以及针对暗区的指数压缩，处理暗区感知差异（如深蓝与深黄）。
7. 色度处理 (Chroma Processing)：包含四个交错子阶段：色相依赖缩放、非线性色度幂运算、亮度依赖缩放、以及色相$\times$亮度交互调制。
8. 色相依赖亮度：最终通过指数函数捕捉残留的色相 - 亮度交互（如蓝色在同等亮度下显得更暗）。
9. 中性校正 (Neutral Correction)：关键创新点。由于各通道独立的 $\gamma_i$ 会导致 D65 白点不映射到 $a=b=0$，该阶段在非线性变换后，通过查找表（PCHIP 插值）减去灰度轴的误差，强制保证 $C < 10^{-6}$。
10. 刚性旋转 (Rigid Rotation)：对 $(a, b)$ 平面进行 $-28.2^\circ$ 的刚性旋转，以最小化 sRGB 原色的色相角误差。由于是等距变换，不改变距离度量。

2.2 距离度量 (Distance Metric)

HELMLAB 定义了一个包含 7 个参数的距离度量公式，受 CIEDE2000 启发但参数从数据中学习：

• 引入对亮度和色度的加权因子 $S_L, S_C$。
• 使用 Minkowski 指数 $p$ 和压缩/后幂函数来减少大颜色差异的系统性偏差。
• 总参数：65 个空间参数 + 7 个度量参数 = 72 个。

2.3 优化策略

• 目标函数：最小化 COMBVD 数据集上的 STRESS，同时加入 He et al. 2022 数据集作为正则化项，并引入蓝带惩罚 (Blue-band Penalty) 以解决蓝 - 青区域的梯度非均匀性问题。
• 约束：强制圆环精度（Round-trip error < $10^{-14}$）、中性轴完整性 ($C < 10^{-6}$) 和孟塞尔均匀性。
• 训练数据：COMBVD (3,813 对)，He et al. 2022 (82 对，正则化)，MacAdam 1974 (128 对，完全保留测试)。

---

3. 主要贡献 (Key Contributions)

1. 高性能颜色空间：在 COMBVD 数据集上实现了 STRESS 23.30，比 CIEDE2000 (29.18) 降低了 20.2%。
2. 严格的中性轴保证：通过“中性校正”阶段，确保所有灰度映射到 $a=b=0$ ($C < 10^{-6}$)，解决了其他空间（如 CAM16-UCS）的色度泄漏问题，使渐变生成无伪影。
3. 零成本的色相优化：通过刚性旋转优化了 sRGB 原色的色相角对齐（RMS 误差 18.1°），且由于旋转是等距变换，完全不牺牲颜色差异预测的准确性。
4. 嵌入 H-K 效应：首次在解析颜色空间中显式地将 Helmholtz–Kohlrausch 效应（饱和度影响亮度感知）作为可学习参数嵌入亮度通道。
5. 蓝带非均匀性修复：通过子数据集惩罚，将蓝 - 青区域的梯度非均匀性减少了 8.9 倍，仅付出 +0.08 STRESS 的微小代价。
6. 工程化落地：提供了完整的工具链，包括色域映射、对比度检查、暗/亮模式自适应、以及 CSS/Android/iOS 的 Token 导出功能。

---

4. 实验结果 (Results)

4.1 颜色差异预测 (STRESS)

• COMBVD: HELMLAB (23.30) vs CIEDE2000 (29.18)。95% 置信区间不重叠 ($p < 10^{-4}$)，提升显著。
• 跨数据集验证:
  • He et al. 2022: HELMLAB (30.33) 优于 CIEDE2000 (32.6)。
  • MacAdam 1974: HELMLAB (20.33) 略逊于 CAM16-UCS (18.7)，但优于 CIEDE2000 (22.1)。
• 消融实验：
  • 仅使用欧氏距离（无复杂度量）：STRESS 27.60（仍优于 CIEDE2000）。
  • 移除色相校正：STRESS 飙升至 38.81（最关键组件）。
  • 移除 H-K 嵌入：STRESS 上升至 27.30。
  • 移除刚性旋转：STRESS 不变（验证了度量的旋转不变性）。

4.2 生成属性

• 中性轴：最大色度 $< 10^{-6}$（完美），而 CAM16-UCS 为 1.42。
• 圆环精度：全 sRGB 色域内的往返误差 $< 10^{-14}$。
• 雅可比行列式：在整个 sRGB 色域内为正，保证映射是局部可逆且保持方向的。

4.3 子数据集表现

在 6 个 COMBVD 子数据集中，HELMLAB 在 3 个上优于 CIEDE2000。引入蓝带惩罚后，在 5 个子数据集上表现提升，仅在 BFD-P(D65) 上有微小下降（+0.49），整体权衡极佳。

---

5. 意义与影响 (Significance)

1. UI 设计系统的理想选择：HELMLAB 填补了现有颜色空间的空白，首次在一个空间中同时实现了高精度的差异预测、无伪影的渐变生成和合理的色相操作，特别适用于 Web (CSS Color Level 4 扩展潜力) 和移动端设计系统。
2. 数据驱动与解析性的结合：证明了通过 72 个可学习参数构建解析颜色空间的可行性，打破了传统颜色空间依赖手工设计公式的局限。
3. 解决“测量 - 生成”权衡：通过“中性校正”机制，巧妙地解决了优化器为了降低 STRESS 而破坏中性轴的问题，使得同一个空间既能用于精确测量，又能用于高质量的颜色生成。
4. 开源生态：作者提供了完整的 Python 实现、Token 导出工具和交互式演示，降低了设计系统和开发者采用新颜色标准的门槛。

局限性：

• 主要针对 UI 屏幕显示（sRGB/P3），未针对印刷或光谱应用优化。
• 模型复杂度高于 Oklab，可解释性稍弱。
• 目前尚未针对不同的观察条件（如暗室/亮室）进行完整的训练，暗/亮模式切换目前基于启发式规则。

总结：HELMLAB 是颜色科学领域的一项重大进展，它通过端到端的数据驱动优化，提供了一个在感知均匀性、中性轴完整性和工程实用性上均达到新标准的颜色空间，有望成为下一代 UI 设计系统的核心颜色模型。