OKLCH 的 L 值是感知亮度坐标，0 为纯黑、100% 为纯白，中间值视觉明暗一致；单位必须为 %，否则声明静默失效；调 L 不导致色相漂移，但混用色彩空间会引发偏色。
oklch() 的 L 值不是“亮度百分比”，而是感知标度
OKLCH 的 L 不是 sRGB 亮度的线性映射，也不是 HSL 那种基于 RGB 极值的算术平均。它是 OKLab 空间中的人眼感知亮度坐标，0 表示纯黑、1（或 100%）表示纯白，中间值在所有色相下视觉明暗一致。比如 oklch(60% 0.28 0)（红）和 oklch(60% 0.28 120)（绿）在人眼看来真正“一样亮”——这正是它能精确控亮的基础。
写错 L 单位会导致整条声明静默失效
浏览器对 L 的单位极其敏感，写错就直接跳过，不报错、不降级、不提示：
-
oklch(60 0.28 258.5)❌ —— 缺%，Chrome 112+ / Safari 17.4+ 拒绝解析 -
oklch(0.6 0.28 258.5)✅ —— 仅新版本支持（Chrome 112+/Firefox 121+/Safari 17.4+），且H小数位建议 ≤1（258.5可，258.543在部分 Safari 中失败） -
oklch(60% 0.28 258.5)✅ —— 兼容性最高写法，推荐作为默认选择
调 L 时色相漂移？其实是混用了色彩空间
OKLCH 本身调 L 绝不会导致色相漂移——这是它的设计保证。但实际项目中“偏色”的常见原因全是外部干扰：
- 自定义属性里存了
--primary: oklch(62% 0.28 258.5)，但:hover用的是hsl(240, 70%, 70%)→ 浏览器 fallback 到 sRGB 插值，中间帧发灰 - 渐变里混写
oklch(62% 0.28 258.5), hsl(240, 70%, 70%)→ 整个linear-gradient()被忽略 - 深色模式媒体查询里用
oklch(38% 0.28 258.5)，但禁用态却用gray(200)→gray()在 Safari 中仍不稳定，且未与 OKLCH 的L对齐
深色模式与禁用态的 L/C 分离控制才是关键
OKLCH 的真正价值不在“调亮不偏色”，而在 L 和 C 解耦后可独立调节：
立即学习“前端免费学习笔记（深入）”；
- 深色模式适配：从
oklch(62% 0.28 258.5)→oklch(38% 0.28 258.5)，只降L，蓝调完全稳定，不会发紫或发青 - 禁用态处理：从
oklch(62% 0.28 258.5)→oklch(62% 0.12 258.5)，只降C，文字保可读性，对比度不崩 - 灰色系必须用
oklch(L 0 H)构建（如oklch(40% 0 258.5)），而非gray()或hsl(258.5, 0%, 40%)，后者在多设备上明暗不一致
