oklch变量必须严格按单位规范书写，否则整行css静默失效；安全写法为oklch(60% 0.28 258.5)或oklch(0.6 0.28 258.5)，@supports检测需置于降级色之后且带单位，亮度锚定是其核心价值。
OKLCH变量必须写对单位，否则整条声明静默失效
浏览器不会报错，也不会 fallback 到下一条；它直接跳过整行 CSS。这是 OKLCH 最常被误用的点，也是所有问题的起点。
-
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)（仅 Chrome 112+/Firefox 121+/Safari 17.4+，且 H 小数位建议 ≤1）。
@supports 检测必须放在降级色之后，顺序不能颠倒
只靠两行颜色声明（先 fallback，再 oklch()）在部分安卓 WebView 中会完全失效——它可能跳过所有后续规则，导致 OKLCH 彻底不加载。
- 降级色必须写在
@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); }
}
用 OKLCH 变量构建主题系统时，亮度锚定才是核心价值
HSL 的 lightness: 50% 对黄、蓝、红给出的视觉亮度天差地别；而 oklch(0.6 0.2 260) 的 L 值是感知均匀的——0.6 就是 0.6，不管色相怎么变，人眼感受到的明暗基本一致。
- 设计深色/浅色模式时，只需统一调整
--text-primary和--surface-primary的L值，不用为每种颜色单独调参 - 灰色系必须用
oklch(L 0 H)构建，而不是gray()—— 后者在 Safari 中仍部分不可用 - 避免混合
hsl()或rgba()进color-mix(in srgb, )，整个表达式会因语法不一致被丢弃
例如：
:root {
--color-primary: oklch(65% 0.25 250);
--text-primary: oklch(20% 0 0);
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: oklch(95% 0 0);
--surface-primary: oklch(15% 0 0);
}
}
渐变和动画中跨色相边界，必须手动拆段
CSS 对 oklch() 渐变不做色相插值优化，oklch(0.7 0.25 350) → oklch(0.7 0.25 10) 会从 350° 经 360°、0°、10° 插值，数值上是 350→360→10，中间段色度被强制拉低，出现难看的灰紫色带。
- 色相差超过
180°时，必须手动拆成两段：oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10) -
in oklch在linear-gradient()中完全无效，Chrome 112+、Safari 17.5+、Firefox 120+ 均静默忽略该语法 - 替代方案：用
color-mix(in oklch, ...)静态混合，但只能产出单点色；需多阶时得手动调用多次或借助 PostCSS 插件 - 旧环境兜底策略：三段停靠点 + SVG 噪点叠加防灰带
最容易被忽略的是：OKLCH 不是“更好看的 HSL”，它是唯一能让 L 真正代表人眼感知亮度、C 真正代表视觉鲜艳度、H 真正代表均匀色相变化的颜色函数——写错一个单位，就失去全部意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
