oklch()参数单位错误会导致整条css规则静默失效，常见错误包括l缺%、c用百分比、h加deg、alpha用逗号；安全写法为oklch(60% 0.28 258.5)或oklch(0.6 0.28 258.5)。
oklch()参数单位写错就静默失效
浏览器不会报错、不警告、也不 fallback 到下一行，整条 CSS 规则直接被跳过。这是上线后颜色“消失”或“全变灰”的头号原因。
-
oklch(60 0.28 258.5)❌ —— L 缺%，Chrome 112+ 和 Safari 17.4+ 都拒斥 -
oklch(60% 28% 258.5)❌ —— C 必须是无单位小数（如0.28），不能写百分比 -
oklch(60% 0.28 258.5deg)❌ —— H 后加deg在 Safari 16.x 和部分安卓 WebView 中解析失败 -
oklch(60% 0.28 258.5 / 0.8)✅ —— alpha 必须用/分隔，不能用逗号
安全写法只有两种：oklch(60% 0.28 258.5)（兼容性最高），或 oklch(0.6 0.28 258.5)（仅新浏览器支持，且 H 小数位建议 ≤1）。
@supports检测必须写在降级色之后且带单位
只靠两行声明（先 background-color: #2563eb;，再 background-color: oklch(...)）在部分安卓 WebView 中会彻底失效——它可能跳过所有后续规则。
- 降级色必须写在
@supports块外部且上方 - 检测值必须带单位：
@supports (color: oklch(0% 0 0))✅，@supports (color: oklch(0 0 0))❌ - 绝对不要用
@supports not (color: oklch(0% 0 0))—— 安卓 WebView 存在解析 bug - 别用
oklab()替代检测 —— 所有主流浏览器目前都返回false
正确结构：
button { background-color: #2563eb; }
@supports (color: oklch(0% 0 0)) {
button { background-color: oklch(60% 0.28 258.5); }
}
渐变中跨 0°/360° 色相必须手动拆段
CSS 对 oklch() 渐变不做色相插值优化。oklch(0.7 0.25 350) → oklch(0.7 0.25 10) 会从 350° 经 360°、0°、10° 插值，中间段色度被强制拉低，出现难看的灰紫色带。
- 色相差超过 180° 时，必须手动拆成两段：
linear-gradient(oklch(0.7 0.25 350), oklch(0.7 0.25 360), oklch(0.7 0.25 10)) -
in oklch在linear-gradient()中完全无效 —— Chrome 112+、Safari 17.5+、Firefox 120+ 均静默忽略该语法 - 可用替代方案：
color-mix(in oklch, ...)生成单点混合色，或手动生成 OKLAB 均匀停靠点 + SVG 噪点防灰带
color-mix()混合白/黑必须用oklch空间且无自动fallback
color-mix() 混合白/黑时，in srgb 会报错：Invalid color space in color-mix()。必须用 lch 或 oklch，推荐后者，因明度更符合人眼感知。
-
oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑 - 混合时 C 和 H 固定为 0，确保结果是中性灰
- 百分比总和必须为 100%，且两个颜色都需完整写出
oklch()格式 - 无 CSS 级 fallback 机制，必须用
@supports手动兜底
例如：
button { --primary: #3a5fa8; --primary-light: #3a5fa8; }
@supports (color: color-mix(in oklch, red, blue)) {
button { --primary-light: color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%); }
}
真正麻烦的不是写法本身，而是不同设备对 D65 白点的解析差异——同一段 oklch() 在 MacBook Pro 和 Dell 显示器上可能明显偏色，这需要构建时统一色空间转换，不能靠肉眼调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
