in oklch在linear-gradient()中完全无效，因CSS规范强制sRGB插值；真正启用OKLCH插值需用color-mix(in oklch)且两端同为oklch()格式，或手动三段停靠点+拆分色相差＞180°的渐变。
不能直接用 linear-gradient(in oklch, ...) 创建无色相漂移的渐变——这个语法在所有浏览器中都无效，写了就静默丢弃，不是兼容性问题，是规范根本不支持。
为什么 linear-gradient 里的 in oklch 会失效
现行 CSS 渐变规范强制所有插值在 sRGB 空间进行。linear-gradient(to top, oklch(0.6 0.2 240), oklch(0.3 0.2 240)) 看似用了 OKLCH，但浏览器仍会先把两个颜色转成 sRGB，再线性混合中间帧。结果就是：亮度下降时彩度被意外压缩，色相看似没动，实际视觉上发灰、偏紫或泛青。
-
linear-gradient(in oklch, ...)、linear-gradient(to right, in oklch, ...)全部被 Chrome 112+、Safari 17.5+、Firefox 120+ 静默忽略 - 即使起止色都写对
oklch()，只要没用color-mix()或手动停靠点，插值路径就不在 OKLCH 空间 - 色相差 >180°（比如 350° → 10°）时，sRGB 插值会走长弧，必然经过低彩度灰带
用 color-mix(in oklch, ...) 手动生成中间色
color-mix() 是当前唯一能在纯 CSS 中真正启用 OKLCH 插值的方案。它不依赖运行时渐变引擎，而是在声明阶段静态计算两点在 OKLCH 空间中的加权混合结果。
- 必须两端同为
oklch()格式：color-mix(in oklch, oklch(0.6 0.25 240) 70%, oklch(0.3 0.25 240) 30%) - 混用格式即整条失效：
color-mix(in oklch, #3b82f6 70%, oklch(0.3 0.25 240) 30%)→ 无输出 - Chrome 112+ 支持；Safari 17.5+ 刚起步；Firefox 尚未实现
- 它只产出单点色，如需 5 阶渐变，得写 4 次
color-mix()，或借助 PostCSS 插件预生成
退而求其次：三段停靠点 + 噪点防灰带
当 color-mix() 不可用或需覆盖旧环境时，最实际的做法不是等规范，而是控制插值路径本身。
立即学习“前端免费学习笔记（深入）”；
- 避免直写两段：
linear-gradient(to top, oklch(0.3 0.25 240), oklch(0.7 0.25 240))→ 必然出灰 - 改用三段停靠点：
linear-gradient(to top, oklch(0.3 0.25 240) 0%, oklch(0.5 0.24 242) 48%, oklch(0.7 0.25 240) 100%)，中间色选感知中位而非数值中位 - 色相差 >180° 必须手动拆段：
oklch(0.7 0.25 350)→oklch(0.7 0.25 0)→oklch(0.7 0.25 10) - 叠加 SVG 噪点防带状：
background-image: linear-gradient(), url("data:image/svg+xml,%3Csvg...")，透明度设为 0.02 左右
最容易被忽略的细节
OKLCH 渐变不出问题的前提，是每个 oklch() 值本身完全合法：L 缺 %、C 写成 25%、H 后加 deg、alpha 用逗号分隔……任何一个错误，整条声明就静默跳过，连 fallback 都不会触发。更麻烦的是，这种错误在开发时看不出异常，上线后用户看到的只是“突然变灰”或“文字消失”。
