oklch调c不偏色因c轴与l轴在感知空间正交，仅改变鲜艳度而不影响亮度；单位错误（如c带%、h加deg）会导致声明静默失效，必须用oklch(60% 0.35 0)等规范写法并配正确@supports降级结构。
OKLCH里调C值为什么不会让颜色变亮或偏色
因为OKLCH的C（色度）轴与L（亮度）轴在感知空间中正交，调C只影响视觉鲜艳度，不扰动人眼对明暗的判断。这和HSL不同——HSL里S（饱和度）升高常伴随亮度上浮，尤其在高饱和红/黄区域，hsl(0, 100%, 50%)实际比hsl(120, 100%, 50%)暗得多。而oklch(60% 0.15 0)升到oklch(60% 0.35 0)，蓝红橙各色相下亮度感知几乎不变，只是更“鲜”。
调C时最容易踩的单位错误
错一个单位，整条声明静默失效，浏览器既不报错也不降级，UI直接回退到前一条颜色（比如color: #3b82f6;），但你可能根本没注意它被跳过了。
-
oklch(60% 35% 0)❌ C不能带%，必须是无单位小数：0.35 -
oklch(60% 0.35 0deg)❌ H后加deg在Safari 16.x和部分安卓WebView中解析失败 -
oklch(60% 0.35 0 / 1)✅ alpha必须用/分隔，不是逗号 - 安全写法优先用
oklch(60% 0.35 0)（兼容性最高），慎用oklch(0.6 0.35 0)（仅Chrome 112+/Firefox 121+/Safari 17.4+，且H小数位建议≤1）
@supports检测必须紧贴fallback且顺序不能反
只写两行：background-color: #3b82f6; + background-color: oklch(60% 0.35 240);，在某些安卓WebView中会整块跳过，导致OKLCH完全不生效。
正确结构必须是：
button {
background-color: #3b82f6;
}
@supports (color: oklch(0% 0 0)) {
button {
background-color: oklch(60% 0.35 240);
}
}
注意三点：
- 降级色写在
@supports块**外部且上方** - 检测值
oklch(0% 0 0)中L带%，C是0（无单位小数），H无单位 - 绝对不要用
@supports not或oklab()替代检测——前者在WebView中可能崩溃，后者所有主流浏览器都返回false
渐变和transition中C值变化的真实行为
直接写transition: background-color + 两端都是oklch()，动画仍走sRGB插值，中间帧会发灰、失饱和——这不是OKLCH的问题，是CSS规范强制限制。
真正能保持C线性变化的只有两种方式：
-
linear-gradient(in lch, ...)：目前唯一原生支持真LCH/OKLCH插值的CSS特性，但需显式写in lch，且每个色标必须是完整lch(L% C h)格式 -
color-mix(in oklch, ...)：Chrome 112+/Safari 17.5+支持，但Firefox尚未实现；必须两端同为oklch()，混用rgb()或#hex即整条失效
跨色相边界（如从350°到10°）时，即使C恒定，也要手动拆段：oklch(0.6 0.35 350) → oklch(0.6 0.35 0) → oklch(0.6 0.35 10)，否则浏览器按长弧插值，中间出现难看的灰紫带。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
