oklab()在linear-gradient中不生效，因浏览器强制srgb插值，仅将oklab()作为输入语法转换为rgb计算，无法改变插值逻辑；真正有效方案是color-mix(in oklab)或手动生成oklab均匀停靠点。
直接写 oklab() 进 linear-gradient() 不能解决灰区——浏览器仍按 RGB 插值，oklab() 只是颜色输入语法，不改变渐变计算逻辑。
为什么 oklab() 在 linear-gradient 中不生效
你可能试过这样写：background: linear-gradient(to right, oklab(0.4 0.1 -0.05), oklab(0.85 0.02 0.12))，但 DevTools 里看到的 computed color 仍是 rgb()，中间依然发灰。这不是你写错了，而是所有主流浏览器（Chrome 124+、Firefox 125、Safari 17.5）对 linear-gradient() 的实现，底层强制走 sRGB 空间线性插值。即使起止色用 oklab() 声明，浏览器也会先转成 RGB，再在 RGB 通道上拉直线——人眼敏感的灰紫/灰绿段必然出现。
常见错误现象包括：
- 写了
oklab()，但渐变中段仍有明显“脏灰”或“台阶感” - 用
oklab(0.2 0.2 20)→oklab(0.8 0.2 200)过渡发灰，而oklab(0.5 0.05 0)→oklab(0.5 0.05 10)却很顺——说明问题不在颜色本身，而在插值路径是否可控 -
in oklab写进linear-gradient(in oklab, ...)被静默忽略，规范不支持该语法
真正能用 oklab() 缓解灰区的两种方式
想让 OKLAB 的感知均匀性起作用，必须绕过浏览器默认的渐变插值引擎，把“均匀步进”提前到构建时或运行时完成。
-
用
color-mix()静态生成中间色：这是目前唯一能在纯 CSS 中稳定启用 OKLAB 插值的函数。前提是起止色同为oklab()或oklch()格式，且浏览器支持（Chrome 112+、Safari 17.5+；Firefox 尚未实现）。例如：color-mix(in oklab, oklab(0.4 0.1 -0.05) 70%, oklab(0.85 0.02 0.12) 30%)。混用格式（如#4a6fa5和oklab(...)）会导致整条失效 -
手动生成多停靠点 RGB 渐变：用 JS 库（如
culori或colorjs.io）在 OKLAB 空间采样 5–7 个等距点，导出对应rgb()值，再拼成带百分比的linear-gradient()。停靠点间隔建议 ≤20%，避免浏览器在两点间做长距离 RGB 插值
oklab() 参数写错就彻底失效
oklab() 对参数单位极其敏感，写错一个地方，整条声明会被浏览器静默跳过，不报错也不 fallback。
-
oklab(0.4 0.1 -0.05)✅ —— L、a、b 全为无量纲小数（0–1 或 -0.4–0.4） -
oklab(40% 10% -5%)❌ —— a/b 不接受百分比，必须是小数 -
oklab(0.4 0.1 -0.05 / 0.8)✅ —— alpha 必须用/分隔，不能用逗号 -
oklab(0.4, 0.1, -0.05)❌ —— 逗号分隔被当作无效语法
安全写法只有一种：oklab(L a b) 全用小数，alpha 单独用 /；若需兼容旧环境，优先用 rgb() fallback，再用 @supports (color: oklab(0% 0 0)) 包裹 oklab() 声明——注意检测值必须带 %，且 @supports 块必须写在 fallback 色之后、外部上方。
灰区最易被忽略的硬件验证环节
即使你用工具生成了 OKLAB 均匀停靠点，也必须在真机上验证，尤其是 MacBook LCD 屏和 iPhone OLED 屏。同一段 rgb() 渐变，在 MacBook 上可能显 banding，iPhone 上却平滑——这是因为 LCD 的 gamma 曲线和 OLED 的子像素排列对低饱和度过渡更敏感。Safari 中 rgba 渐变发灰，主因不是 OKLAB 缺失，而是它对 alpha 通道的四通道独立插值方式：当中间透明度降到 0.5，R/G/B 却还高位，叠加白色背景后就是粉白混杂的“脏灰”。修复方法很简单：明确设 background-color: #fff，或改用 hsl()/oklch() 控制 L 下降，而非依赖 alpha。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
