CSS 色彩空间与色域回退

大理论

CSS Color Module Level 4 扩展了 <color>，MDN 也记录了 oklch() 的现代语法和相对颜色能力。Web 平台逐步让 OKLab/OKLCH 进入 Baseline，但项目里还有 Tailwind 配置、Storybook、截图 diff、Canvas/SVG 库、邮件模板、移动 WebView 和第三方主题系统。这些工具可能只接受 hex、rgb 或 sRGB。生产色彩系统必须同时保存现代颜色和兼容输出。

小知识点

1. CSS 里先写 hex/rgb fallback，再写 oklch() 或 color(display-p3 ...) override。
2. 用 @supports (color: oklch(0% 0 0)) 分层，避免旧浏览器整条声明失效。
3. 设计 token 源可以存 OKLCH，但导出应包含 CSS、JSON、Tailwind、截图测试和文档预览需要的格式。
4. Wide-gamut 颜色要检查 sRGB gamut mapping，避免设计稿和用户屏幕差异过大。
5. color-mix() 和 relative color 适合局部推导，但核心 token 仍应显式导出，便于审计和回滚。
6. Canvas/图表库、邮件和图片生成工具可能不支持现代 CSS 颜色，需要构建时转换。

设计判断

如果一个 token 在现代浏览器、旧截图环境、图表渲染器和文档预览里都能得到可接受输出，并且差异被记录，这个实现是可靠的；如果只有本地 Chrome 看起来正确，还没有通过生产验证。

实现建议

为色彩 token 建立构建输出：source OKLCH、CSS OKLCH、sRGB hex、RGB channels、contrast pairs、Tailwind alias、chart palette 和 documentation swatches。CI 或 seed 脚本应检查重复 token、缺失 fallback、不可解析颜色、超出 sRGB 的高风险 step 和组件 pair 低对比组合。

反例/风险

在全局 CSS 只写 oklch() 没 fallback、把 relative color 放进组件 props、截图测试环境不识别 P3、图表库接收 oklch() 后静默变黑、设计系统文档只展示现代浏览器结果。

案例分析

Color.js 明确支持 CSS Color 4 输入/输出和 gamut mapping；Culori 提供 CSS Color Module Level 4 相关色彩空间、插值和色差能力；Material Color Utilities 则提供多语言算法库，把动态色主题转成跨平台可执行输出。可学习点是：前端色彩系统应该有构建管线，而不是只靠手写 CSS。

来源链接

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 Web Platform Baseline Oklab/OkLCh: https://web-platform-dx.github.io/web-features-explorer/features/oklab/ Color.js: https://colorjs.io/ Culori: https://github.com/evercoder/culori Material Color Utilities: https://github.com/material-foundation/material-color-utilities