in oklch在linear-gradient()中完全无效，浏览器静默忽略；真正有效的是color-mix(in oklch,)，需两端同为oklch格式、单位合规、显式插入中间点且停靠点间隔≤20%。
in oklch 在 CSS linear-gradient() 中根本没有插值效果——它压根不生效，浏览器直接忽略整条声明。
你看到的“渐变”其实是 fallback 到了 sRGB 插值，中间发灰是必然结果。这不是效果“比 RGB 更好”，而是你以为启用了 OKLCH，实际连门都没进。
linear-gradient(in oklch, ...) 为什么完全无效
- 所有主流浏览器（Chrome 112+、Safari 17.5+、Firefox 120+）静默忽略该语法，既不报错也不降级
- 现行 CSS 渐变规范强制所有
linear-gradient()和radial-gradient()使用 sRGB 空间插值 - 即使起止色都写成
oklch(60% 0.28 240)，浏览器仍会先转成 sRGB，再线性混合，L/C/H 完全不参与计算 - 写成
linear-gradient(in oklch, oklch(0.5 0.2 240), oklch(0.8 0.2 240))→ 解析失败，背景可能变透明或回退到上一条规则
真正能启用 OKLCH 插值的只有 color-mix()
-
color-mix()不走渐变引擎，而是在声明时静态计算两个颜色在 OKLCH 空间中的加权混合结果 - 它绕开了 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 插值限制在极短区间内，让灰阶不可见
最容易被忽略的不是怎么写对，而是：你以为写了 in oklch 就安全了，其实它连解析都没过；而 color-mix() 的单位错误、格式混用、缺少中间点，都会导致整条链路无声退化回 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
