oklch是唯一使l、c、h分别精准对应人眼感知亮度、鲜艳度与均匀色相的颜色空间；正确用法需严格遵循单位规范（l用%，c用无单位小数，h不加deg）、降级结构（fallback在@supports外上方）及渐变拆分逻辑（色相差＞180°须手动分段）。
OKLCH 不是“更好看的 HSL”，它是唯一能让 L 真正代表人眼感知亮度、C 真正代表视觉鲜艳度、H 真正代表均匀色相变化的颜色函数——只要写对、用对、降级对，就能避开 HSL 下调个亮度就发灰、改个色相就崩对比、做渐变中间突然一坨灰的断层问题。
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 不自动走短弧
CSS 对 oklch() 渐变不做色相插值优化，oklch(0.7 0.25 350) → oklch(0.7 0.25 10) 会从 350° 经 360°、0°、10° 插值，数值上是 350→360→10，中间段色度被强制拉低，出现难看的灰紫色带。
- 色相差超过 180° 时，必须手动拆成两段：
linear-gradient(to right, oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10)) - 用
color-mix(in oklch, ...)替代多节点渐变逻辑更可靠，但注意 Safari 17.5 仍不支持该函数 - 自定义属性 +
transition动画无法保留 OKLCH 空间：即使--c1: oklch(0.6 0.25 240); --c2: oklch(0.7 0.25 240);，动画仍 fallback 到 sRGB 插值，失去感知均匀性
深色模式与禁用态中，L 和 C 的调整逻辑完全不同
OKLCH 的真正价值不在“能写新语法”，而在它把设计意图映射到可预测的视觉行为上——但前提是知道每个通道该动谁、怎么动。
- 深色模式主色：固定
H和C，只调L（如oklch(0.62 0.28 258.5)→oklch(0.38 0.28 258.5)），避免夜间刺眼或糊成一片 - 禁用态：固定
H，微降C（如0.28→0.12），L保持不变或仅 ±0.02 浮动；绝不用opacity或filter: brightness()，它们破坏色彩空间一致性 -
C不是越大越好：蓝绿区安全上限约 0.35，红橙区常卡在 0.22 左右；超限会被浏览器 clamp 成灰阶，不是变暗，是失色
DevTools 里永远看不到真实的 OKLCH 值，getComputedStyle(el).backgroundColor 返回的始终是 sRGB 十六进制；验证只能靠肉眼比对 + 限制 C ≤ 0.28 这一工程底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
