linear-gradient(in lch)是目前唯一真正生效的颜色空间插值，Chrome 112+支持且在LCH空间完成插值；in oklch和in oklab在所有浏览器中均被静默忽略，整条声明失效。
linear-gradient(in lch) 是目前唯一真正生效的颜色空间插值
Chrome 112+ 支持 linear-gradient(in lch, ...)，且插值过程确实在 LCH 空间完成；in oklch 和 in oklab 在所有浏览器中均被静默忽略，整条声明失效（不是降级，是直接跳过）。Safari 17.5+、Firefox 120+ 对这三者均无支持。验证方式很简单：写一个带 in oklch 的渐变，打开 DevTools → Elements → Styles 面板，看该声明是否被划掉或根本未渲染。
color-mix(in lch) 可替代实现感知均匀混合
color-mix() 是当前唯一能在纯 CSS 中触发 LCH/OKLCH 插值的函数，但它不生成渐变，只产出单点色值：
- 必须两端颜色同为
lch()或oklch()格式，混用#rrggbb或hsl()会导致整条规则失效 - 权重可不归一化：
color-mix(in lch, lch(60% 80 240) 2, lch(30% 80 240) 1)等价于 66.6% / 33.3% - 无法动画，但可配合
@property+transition: --t实现变量驱动的实时混合 - Safari 17.5+ 刚起步支持，Firefox 尚未实现
停靠点手动拆分比依赖 in xxx 更可靠
当 color-mix() 不可用或需兼容旧环境时，“加中间色”是最实际的方案：
- 避免
linear-gradient(to right, oklch(0.3 0.25 240), oklch(0.7 0.25 240))—— 必然出灰带 - 改用三段停靠点：
linear-gradient(to right, 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 10)，应写成oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10) - 叠加极低透明度噪点图可进一步抑制灰带感，尤其在深色背景下
别对 transition: background-color 抱幻想
即使你写了 background-color: lch(60% 70 240); transition: background-color 1s;，浏览器仍强制在 sRGB 空间插值——DevTools 颜色拾取器拖动时间轴时，RGB 值呈线性变化就是铁证。这不是 bug，是规范限制。真正能走 LCH 插值的只有两个路径：linear-gradient(in lch, ...)（仅限背景图）和 color-mix(in lch, ...)（需配合自定义属性动画）。其他一切写法，包括 in oklch 出现在渐变里、用 hsl() 写过渡、甚至 @property 声明了 lch() 值，只要没进 color-mix() 或 linear-gradient(in lch)，就还是 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
