OKLCH 感知均匀色阶

大理论

HSL、RGB 或简单 hex tint/shade 很容易产生视觉亮度不均、色相漂移和暗色模式荧光感。OKLCH 把颜色表达为 lightness、chroma 和 hue，更适合让 agent 程序化生成色阶、控制饱和度和建立浅/深色主题。但 OKLCH 不是自动可访问：输出仍要映射为语义 token，并检查具体前景/背景组合。

小知识点

1. Lightness 控制感知亮度，适合建立从背景到正文的阶梯。
2. Chroma 控制颜色强度；深色模式、高亮状态和大面积背景通常需要降低 chroma。
3. Hue 角度不能机械照搬 HSL；不同色彩空间的 hue 角含义不同。
4. 色阶应先生成候选 steps，再压缩为 bg、surface、border、text、muted、accent、focus、danger、success 等角色。
5. 宽色域和高 chroma 颜色可能超出 sRGB，需要 gamut mapping 或 fallback。
6. 颜色 token 不能只给单值，还要记录可用表面、禁用组合、对比目标和 dark-mode 对应值。

设计判断

如果相邻色阶在视觉上有稳定步进，正文/弱文本/边框在对应表面上都清楚，强调色不过度污染内容区，dark mode 没有霓虹噪音，这套色阶才进入设计系统。若只是得到 12 个漂亮色块，还不是可用 token 系统。

实现建议

使用 Color.js 或 Culori 把 seed color 转成 OKLCH，先生成 9-12 个候选 step，再按语义角色挑选。导出时保留 oklch() 值、sRGB/hex fallback、浅色/深色映射、pair contrast matrix、组件示例和禁用组合。CSS 中可先写 fallback，再用 @supports (color: oklch(0% 0 0)) 覆盖现代颜色。

反例/风险

HSL 直接 lighten() 生成所有状态、把高 chroma 品牌色用于小字号正文、暗色模式只反转 lightness、把 OKLCH 色阶所有 step 暴露给组件、没有为 chart/status/focus 做非颜色冗余编码。

案例分析

Radix Colors 将 12-step palette 连接到 backgrounds、interactive components、borders、solid colors 和 accessible text 等用途；Material Theme Builder 则把 dynamic color 转译成 light/dark roles 并支持代码导出。可学习点是：现代色彩工具的价值不只是生成色块，而是把色阶压缩为可执行的角色系统。

来源链接

W3C CSS Color Module Level 4: https://www.w3.org/TR/css-color-4/ MDN oklch(): https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch Radix Colors: https://www.radix-ui.com/colors Material Theme Builder: https://m3.material.io/theme-builder/ Color.js: https://colorjs.io/ Culori: https://culorijs.org/