真正能兼顾感知一致性与工程落地的是 hsl 的 l 值控制 + 明确的色彩空间标注；lab() 因浏览器解析不统一、css 变量不支持、兼容性差而无法实用，hsl(0, 0%, x%) 才是可靠灰度定义方式。
Lab 色彩空间本身不能直接用于定义灰色层级——lab() 函数在 CSS 中虽已支持，但用它写灰度既不直观也不稳定；真正能兼顾感知一致性与工程落地的，是 HSL 的 L 值控制 + 明确的色彩空间标注。
为什么不用 lab() 定义灰色？
lab() 的 L 确实代表感知亮度，但 a/b 轴对纯灰毫无意义：纯灰必须满足 a: 0, b: 0，而浏览器对 lab(50, 0, 0) 这类“理论纯灰”的解析并不统一，尤其在旧版 Safari 或部分 Android WebView 中易退化为 sRGB 插值偏差。更关键的是，CSS 变量无法存储 lab() 值（浏览器读不懂），也就没法做计算或主题切换。
实际项目中，你不会看到 --gray-50: lab(50, 0, 0); 这种写法生效——它只是个字符串，JS 无法读取，CSS 也无法参与计算。
用 hsl() 控制灰度时，L 值才是核心
灰色不统一，本质是明度感知没对齐。HSL 的 L 值（0%–100%）虽非严格感知均匀，但在纯灰（H: 0, S: 0%）路径下，其线性变化已足够可靠，且兼容性拉满。
- 所有灰必须写成
hsl(0, 0%, X%)，确保色相和饱和度锁死 - 不要用
#888、rgb(136,136,136)这类“经验灰”，它们的 L 值受色彩空间影响，不可控 - 建立变量系统时，用
--gray-20: hsl(0, 0%, 20%)而非--gray-20: #333 - 深色模式下不是简单翻转 L 值，而是按相对关系缩放：浅色模式
--gray-30: hsl(0, 0%, 30%)→ 深色模式改hsl(0, 0%, 70%)（注意：这是反直觉的，因为背景变暗后，同 L 值文字会显得过亮）
需要 Lab 才能解决的灰度问题，其实该换思路
如果你遇到的问题是：同一段 hsl(0, 0%, 50%) 在 MacBook Pro（Display P3）和 Windows 笔记本（sRGB）上看起来明暗不同——这不是灰度定义错了，是整个渲染上下文没对齐。
此时该做的是：
- 给关键 UI 元素（如按钮、卡片）加
color: color(srgb 0.5 0.5 0.5)强制走 sRGB 渲染路径 - 用
@supports (color: color(srgb 0 0 0))包裹现代写法，并降级到hsl(0, 0%, 50%) - 禁用
opacity调灰：比如opacity: 0.5会让文字和背景混合，破坏 L 值的语义，应改用hsla(0, 0%, 50%, 0.8)显式控透明度 - 检查图片背景是否嵌入了 Display P3 配置——若灰字叠在未声明色彩空间的 PNG 上，偏色会更明显
真正难的不是选哪个函数，而是让 L 值在不同设备上“被理解成同一个视觉重量”。这要求你在写灰时，始终把 hsl() 当作明度标尺，而不是颜色开关；同时用色彩空间声明守住渲染边界。一旦漏掉其中一环，再准的 Lab 数值也救不回视觉断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
