oklch() 是感知导向的色彩方案，l值需带%单位、降级需正确配置@supports、渐变须手动拆段防灰紫带，工具链须适配空格语法，任一细节错误即失效。
oklch() 不是 rgb() 的“升级替代”，它是为解决 rgb() 根本性缺陷而生的感知导向方案：调亮度不偏色、调鲜艳度不改明暗、做渐变不拉灰。但前提是写对单位、配好降级、全链路统一空间——错一个点，就退回灰扑扑的旧世界。
oklch() 的 L 值为什么不能直接套用 rgb() 的亮度计算
rgb() 没有 L 维度，所谓“亮度”只是线性光值或 sRGB gamma 后的粗略估算；而 oklch() 的 L 是 OKLab 空间中经 CIE 2002 色貌模型校正的感知亮度坐标，0 = 黑、1 = 白，且在所有色相下视觉等亮。
实测对比：rgb(255, 0, 0)（纯红）CIE Y ≈ 0.21，rgb(0, 255, 0)（纯绿）CIE Y ≈ 0.72，差三倍；但 oklch(0.5 0.32 0) 和 oklch(0.5 0.32 120) 在人眼看来才真正明暗一致。
-
L必须带单位：oklch(62% 0.28 258.5)✅，oklch(0.62 0.28 258.5)仅新浏览器支持，oklch(62 0.28 258.5)❌（静默失效） - 别试图从
rgb()公式推导L：没有解析解，必须用专业转换器重采样（如 https://bottosson.github.io/misc/colorpicker/） - 深色模式下直接用
L控制文字对比度：oklch(38% 0.28 258.5)→oklch(62% 0.28 258.5)，蓝调稳定，不发青不发紫
@supports 检测写错会导致整条声明静默失效
oklch() 不支持时浏览器不会报错，而是跳过整行 CSS——如果 fallback 写错位置或检测值缺单位，UI 就直接黑、透明或错色。
- 降级色必须写在
@supports块**外部且上方**：background-color: #2563eb;→ 再跟@supports (color: oklch(0% 0 0)) { ... } - 检测值必须带单位：
@supports (color: oklch(0% 0 0))✅，@supports (color: oklch(0 0 0))❌（Safari 17.4+ 也返回 false） - 绝对不要用
@supports not：安卓 WebView 解析失败，整块规则被丢弃 - 别用
oklab()检测：所有主流浏览器目前都返回 false
linear-gradient 中色相跨 0°/360° 会出灰紫色带
CSS 对 oklch() 渐变不做色相短弧优化。写 oklch(0.7 0.25 350) → oklch(0.7 0.25 10)，浏览器按数值线性插值：350 → 360 → 10，中间段 H≈0° 附近 C 被强制压缩，出现难看的灰紫色带。
- 色相差 > 180° 时，必须手动拆段：
linear-gradient(oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10)) - 所有节点必须统一用
oklch()：混用hsl()或rgb()，插值 fallback 到 sRGB，立刻失去感知均匀性 - 禁用态和深色模式要区分调参逻辑：禁用态固定
L和H，只降C；深色模式固定C和H，只调L
空格分隔语法不是风格偏好，而是 Level 4 强制规范
oklch() 属于 CSS Color Level 4，其参数分隔符是空格，alpha 必须用 / 引入——这不是可选项，是语法结构。混用逗号或漏掉 /，整条声明静默失效。
- 正确写法只有：
oklch(62% 0.28 258.5)或oklch(62% 0.28 258.5 / 0.8)✅ - 错误写法：
oklch(62%, 0.28, 258.5)❌，oklch(62% 0.28 258.5 0.8)❌（漏/，alpha 丢失） - Sass/Less 默认输出逗号语法，需显式改用插值：
rgb(#{$r} #{$g} #{$b})或升级 color 模块 - 构建工具（如 cssnano）若未配置
css-color-adjust，可能合并空格导致 Safari 17.3- 静默失败
真正卡住落地的，从来不是“要不要用 OKLCH”，而是 L 单位有没有写对、@supports 块有没有放反、渐变有没有手动拆段、工具链有没有悄悄吐出逗号语法——这些细节一错，感知均匀性就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
