in oklch在linear-gradient()中完全无效，浏览器静默忽略；真正有效的是color-mix(in oklch, ...)，需两端同为oklch格式、单位合规、显式插入中间点且停靠点间隔≤20%。
in oklch 在 CSS linear-gradient() 中根本不能避免脏灰色彩——它压根不生效。
浏览器（Chrome 112+、Safari 17.5+、Firefox 120+）全部忽略 linear-gradient(in oklch, ...) 这类写法，整条声明静默失效。你看到的“渐变”其实是 fallback 到了 sRGB 插值，中间发灰是必然结果。
真正起作用的是 color-mix(in oklch, ...)，它绕开了渐变引擎，静态计算颜色混合点。
color-mix(in oklch, ...) 为什么能压住灰带
- OKLCH 空间中 L（亮度）、C（色度）、h（色相）三者解耦，插值路径更贴合人眼感知
- 同一色相下调低 L 不会拉低 C，同亮度下改 h 不会意外改变明暗，避免 sRGB 里 R/G/B 通道线性拉扯造成的灰阶坍塌
-
color-mix()不做运行时插值，只输出一个确定 RGB 值，彻底跳过浏览器对渐变的 sRGB 强制约束
必须满足三个硬条件，否则静默失败：
- 两端颜色都用
oklch(L C h)格式，不能混用#rrggbb或rgb() -
L必须带%（如60%），C必须是无单位小数（如0.28），h不能加deg - 至少显式插入一个中间点，比如：
color-mix(in oklch, oklch(60% 0.28 240) 70%, oklch(40% 0.28 240) 30%)
为什么停靠点间隔 ≤20% 很关键
浏览器在两个相邻色标之间，仍用 sRGB 线性插值。哪怕你用了 color-mix() 生成中间色，只要两点跨度太大（比如 0% → 100%），中间段依然会灰。
实测发现：蓝→黄、红→青这类跨色相路径，视觉最敏感的“灰带爆发区”集中在 40%–60% 区间。把停靠点压到 ≤20% 间距（如 0%、20%、40%、60%、80%、100%），才能把 sRGB 插值限制在极短区间内，让灰阶不可见。
手动拆段比依赖自动插值更可靠
OKLCH 不自动走短弧。比如 oklch(0.7 0.25 350) → oklch(0.7 0.25 10)，浏览器会按 350 → 360 → 0 → 10 插值，中间经过灰紫区。
正确做法是手动拆成两段：
-
oklch(0.7 0.25 350)→oklch(0.7 0.25 0) -
oklch(0.7 0.25 0)→oklch(0.7 0.25 10)
再各自套 color-mix() 插中间点，或直接写死三段停靠点。
真正容易被忽略的不是语法，而是：你以为写了 in oklch 就安全了，其实它连解析都没过；而 color-mix() 的单位错误、格式混用、缺少中间点，都会导致整条链路无声退化回 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
