oklab()在linear-gradient()中完全不生效，浏览器会静默忽略整条声明；真正支持oklab插值的仅color-mix(in oklab, ...)，且需两端同为oklab()/oklch()、百分比总和100%；可靠方案是用js库预生成oklab等距停靠点并导出为rgb()。
oklab() 本身在 linear-gradient() 中完全不生效——浏览器解析时会静默跳过整条声明，不报错、不 fallback，也不触发 OKLAB 插值。所谓“用 OKLAB 避免灰度死区”，是误解了它的作用边界：它只是颜色输入语法，不是渐变插值指令。
linear-gradient(in oklab, ...) 会被浏览器直接忽略
- CSS 渐变规范（截至 2026 年 9 月）尚未支持
in oklab这类语法，linear-gradient(in lch, ...)和linear-gradient(in hsl, ...)是少数被实现的，但in oklab不在其中。 - 写成
background: linear-gradient(in oklab, oklab(0.5 -0.12 0.08), oklab(0.7 0.15 0.2))→ DevTools 里 computed 值为空，样式丢失。 - SVG 的
<lineargradient></lineargradient>标签也不支持oklab或color-interpolation="oklab"，只认sRGB和linearRGB。
真正起作用的是 color-mix(in oklab, ...)
这是目前唯一能在纯 CSS 中触发 OKLAB 空间混合逻辑的函数，但它只输出单点色，不能替代渐变：
- ✅ 必须两端都用
oklab()或oklch()，混用rgb()、#fff或hsl()→ 整条失效 - ✅ 百分比总和必须为
100%，空格不能省略：color-mix(in oklab, oklab(0.4 0.1 -0.05) 70%, oklab(0.85 0.02 0.12) 30%) - ❌
color-mix()不支持动画、不能嵌套、不能赋值给 CSS 变量再引用；Firefox 当前（2026.09）仍未实现
手动生成 OKLAB 停靠点才是可靠落地方式
浏览器不做 OKLAB 插值，但你可以提前算好 —— 用 JS 库（如 culori 或 colorjs.io）在 OKLAB 空间等距采样，再喂给 linear-gradient()：
- 用
culori.interpolate("oklab")在起点和终点之间生成 5–7 个点，导出为rgb() - 停靠点间隔建议 ≤
20%，例如：rgb(230, 225, 220) 0%, rgb(210, 205, 215) 20%, ... - 避免直接输出
oklch()停靠点：Safari 对其插值行为未标准化，容易回退到 RGB - 导出后务必在真机（尤其 MacBook LCD 屏）验证 banding 是否缓解 —— 色彩感知差异肉眼最准
OKLAB 的价值不在“写进渐变就自动生效”，而在于它提供了可计算、可拆解、可预生成的感知均匀路径。最容易被忽略的一点是：参数写错就彻底静默失效，比如 oklab(40% 0.1 -0.05)（L 用百分比 OK，a/b 用百分比 ❌）、oklab(0.4, 0.1, -0.05)（逗号分隔是旧语法 ❌）、oklab(0.4 10 20)（a/b 超出合理范围 ❌）—— 浏览器不会提醒你，只会当那行 CSS 不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
