真正能精准控制亮度的是lch()和oklch()，因其L值基于人眼感知标度；oklch()在蓝紫区更通透、深色模式下线性更好；需注意单位、fallback顺序及色彩空间一致性。
lab() 在 CSS 中根本不能用来控制亮度——浏览器不解析它，写了等于白写。
真正能用、且亮度控制更准的是 lch() 和 oklch()，它们基于 Lab 空间但已落地支持。关键不在“Lab”这个词，而在亮度维度是否锚定人眼感知。
为什么 lch() 的 L 值调明暗更自然
它的 L 是 0–100 的感知亮度标度，不是 RGB 的线性光强度或 HSL 的算术平均值：
• lch(40% 60 210) → lch(60% 60 210)：视觉上是等量变亮，中间过渡干净无灰浊
• 对比 hsl(210, 70%, 40%) → hsl(210, 70%, 60%)：在蓝紫区容易发白或偏品，尤其高饱和时
• 对比直接改 rgb()：会扰动色相和饱和度，比如 rgb(100, 150, 200) → rgb(130, 180, 230) 实际轻微偏暖、降饱和
oklch() 比 lch() 更进一步的原因
OKLCH 的底层是 OKLab 空间，对蓝紫区域的感知压缩更小，L 通道更贴近人眼响应：
• 同一组参数 lch(50% 80 270) 和 oklch(50% 0.8 270) 渲染出的蓝，前者偏暗发闷，后者更通透
• 深色模式下 oklch(30% 0.15 240) → oklch(40% 0.15 240) 的变化更线性，不易“跳灰”
• C 值必须写成小数（如 0.28），写成 95 或 95% 会静默失效
常见错误导致亮度失控
• L 缺单位：写成 lch(60 50 210) 或 oklch(0.6 0.28 258.5)（旧 Safari 不认小数）→ 整条声明被忽略
• fallback 顺序错：必须把兼容色写在前面，color: rgb(120, 160, 210); color: lch(62% 52 210);
• 混用色彩空间做 transition：hover 用 hsl()，正常态用 oklch() → 浏览器 fallback 到 sRGB 插值，动画中先灰一下再显色
• 用 CSS 变量存原始值：--main: oklch(62% 0.28 258.5); → 变量无效，JS 也读不到结构
