CSS原生不支持OKLab颜色空间插值，transition无法在oklab()中计算中间色；必须通过JavaScript在OKLab空间手动采样并转为rgb/hsl，再用CSS变量和transition驱动，否则浏览器静默降级为RGBA插值，视觉突兀。
CSS 原生不支持 OKLab 颜色空间插值，transition 无法在 oklab() 中计算中间色——所谓“OKLab 过渡”必须靠 JavaScript 手动采样 + CSS 变量驱动，否则全是假象。
为什么 transition: color 对 oklab() 完全无效
CSS 的 transition 只在 computed style 层做线性插值，且严格绑定声明的颜色模型：你写 rgb()，就在 RGB 空间插值；写 hsl()，就在 HSL 插值。但 oklab() 不是原生可动画类型（截至 2026 年 7 月，Chromium 134+ 和 Safari 17.5+ 支持函数解析，但 transition 仍无视其通道）。
常见错误现象：
- 写了
color: oklab(0.7 0.1 0.2); transition: color 0.4s;→ 浏览器静默降级为 RGBA 插值，视觉突兀 - 用
@property声明--accent: oklab(0.7 0.1 0.2);→ 无效，@property不支持oklab类型校验，fallback 到string，无法插值 -
background: linear-gradient(oklab(...), oklab(...)); transition: background 0.4s;→ 失败，background-image不可动画
真·OKLab 感知均匀过渡的唯一路径：JS 计算 + CSS 变量
核心思路：放弃让浏览器“自己插值”，改由 JS 在 OKLab 空间中等距采样 N 个点，把每步转成标准 rgb() 或 hsl()，再注入 CSS 自定义属性，最后用 transition 过渡这些离散色阶。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
colorjs.io或oklab-converter库做转换，别手写公式（OKLab 逆变换涉及非线性矩阵和 gamma 校正） - 阶梯数控制在 5–9 步内：太少看不出过渡感，太多增加 JS 开销且人眼难分辨
- CSS 中只对
color、background-color等原生可动画属性设transition，不要碰background简写 - 示例关键片段：
element.style.setProperty('--step-0', 'rgb(255, 100, 80)');<br>element.style.setProperty('--step-1', 'rgb(255, 130, 90)');<br>// ...<br>element.style.setProperty('--step-4', 'rgb(120, 200, 255)');然后 CSS 写：.el { color: var(--step-0); transition: color 0.3s ease; }<br>.el.step-1 { color: var(--step-1); }
oklab() 参数写法与兼容性陷阱
即使你只打算静态使用 oklab()（比如设按钮默认色），参数错一个单位，整条规则就静默失效——浏览器不报错、不警告、也不 fallback 到下一行。
必须严格遵守：
-
oklab(0.7 0.1 0.2)✅ —— L/C/h 全为无单位小数（L ∈ [0,1]，C/h ∈ [-0.5,0.5]） -
oklab(70% 0.1 0.2)❌ —— L 不能写百分比，Chrome/Safari 拒斥 -
oklab(0.7 10% 0.2)❌ —— C 必须是小数，不是百分比 -
oklab(0.7 0.1 0.2 / 0.8)✅ —— alpha 必须用/分隔，不能用逗号
@supports 检测要写在降级色之后，且值带单位：
button { background-color: #2563eb; }<br>@supports (color: oklab(0 0 0)) { /* 错！Safari 17.4+ 会拒斥 */ }<br>@supports (color: oklab(0.0 0.0 0.0)) { /* 对，但仅新浏览器识别 */ }更稳妥的做法仍是降级到 rgb() 或 hsl()。
OKLab 的感知均匀性真实存在，但它只在 JS 层生效；CSS 运行时没有“OKLab 意识”。最易被忽略的点是：你以为写了 oklab() 就自动丝滑，其实连第一步——正确解析——都还没过。
