oklch()降级必须手动配fallback色并置于@supports外上方，PostCSS无法自动转OKLCH为HEX，因无浏览器渲染引擎且CIE 2002模型不可逆；插件如postcss-color-mix不处理oklch()字面量，仅靠人工预设+单位检测+主题色映射表保障兼容。
CSS颜色令牌该用oklch()，但PostCSS降级必须手动配，没有“自动转OKLCH→HEX”的通用插件。oklch()是运行时解析的原生函数，PostCSS无法在构建阶段反向计算其sRGB等效值——它连浏览器渲染引擎都没有，更没法模拟CIE 2002亮度模型。所谓“降级”，本质是人工预设 fallback 色 + 条件性注入，不是自动转换。
postcss-color-mix 不处理 oklch()，别指望它帮你降级
很多人误以为 postcss-color-mix 能把 oklch(65% 0.21 250) 拆成 HEX，但它只展开 color-mix() 表达式，且仅限于 sRGB 空间。对 oklch() 字面量完全无感——它既不识别，也不报错，直接跳过。你写进去的 OKLCH 值，在构建产物里原封不动，降级全靠你自己写 color: #3b82f6; 在前面。
- 插件不会读取 CSS 变量里的
oklch()值并计算等效 HEX（变量值在运行时才解析） - 即使你用
from var(--primary)语法，PostCSS 也看不到--primary的真实值，只会当字符串保留 - 试图让插件“猜”OKLCH对应什么HEX，等于让它凭空还原 CIE LAB → sRGB 的非线性映射，目前无标准实现
@supports + 手动 fallback 是唯一可靠路径
OKLCH 的降级不是“转换”，而是“声明优先级控制”。浏览器不支持时，整条声明被静默丢弃，所以 fallback 必须写在 @supports 块外、上方，且带单位检测。
- ✅ 正确写法：
color: #3b82f6;<br>@supports (color: oklch(0% 0 0)) {<br> color: oklch(62% 0.28 258.5);<br>} - ❌ 错误写法：
@supports (color: oklch(0 0 0)) { /* 缺%单位，所有浏览器返回 false */<br> color: oklch(62% 0.28 258.5);<br>}<br>color: #3b82f6; /* fallback 写在下面，不生效 */ - 安卓 WebView 会把
@supports not整块忽略，绝对不要用
想批量管理？用 postcss-theme-colors + 预定义色表
如果你有几十个 OKLCH 变量要降级，靠手写太容易漏。可以结合 postcss-theme-colors 插件，把 OKLCH 和对应 HEX 绑定在 JS 配置里：
- 在
postcss.config.js中配置主题色映射：themeColors: {<br> primary: {<br> oklch: 'oklch(62% 0.28 258.5)',<br> hex: '#3b82f6'<br> }<br>} - 插件会在构建时把
var(--primary)替换为带 fallback 的声明块，但前提是你要提前填好hex字段 - 这个过程仍是人工维护：OKLCH 值变了，你得手动更新对应的 HEX，不能靠插件算
真正难的不是写 PostCSS 配置，而是确认那个 HEX 值是否真的匹配 OKLCH 在目标设备上的感知效果——MacBook Pro 和 Dell 显示器上，同一段 oklch(60% 0.28 258.5) 渲染出的物理光谱不同，fallback 的 HEX 却是固定的。这时候，降级不是技术问题，是视觉校准问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
