灰色层级不统一的根本原因是忽略人眼对明度（L）的感知，应使用HSL中L值精确控制灰度；通过定义--gray-10至--gray-90等变量建立可复用灰度系统，并在不同上下文中动态调整L值或透明度以保障一致性。
灰色层级不统一，根本原因是直接用十六进制或 RGB 写灰度时，人眼对明度（L）的感知被忽略了。HSL 中的 L（Lightness）值能直观对应视觉亮度，用它控制灰度，就能让不同深浅的灰在页面中真正“站得住队”。
用 HSL 替代 #888、#ccc 这类“经验灰”
传统写法如 #999 或 rgb(150, 150, 150) 看似是灰，但实际 L 值受色彩空间影响，并不严格线性。换成 HSL 后，你可以明确指定：
-
hsl(0, 0%, 20%)→ 深灰（L=20%） -
hsl(0, 0%, 40%)→ 中灰（L=40%） -
hsl(0, 0%, 60%)→ 浅灰（L=60%） -
hsl(0, 0%, 90%)→ 极浅灰（接近白，但非纯白）
建立一套可复用的灰度系统（比如 5 级）
不要临时取值，定义项目级变量更可靠：
-
--gray-10: hsl(0, 0%, 10%)（极深灰，适合文字强调） -
--gray-30: hsl(0, 0%, 30%)（主文字色） -
--gray-50: hsl(0, 0%, 50%)（次要文字 / 边框） -
--gray-70: hsl(0, 0%, 70%)（背景分割线） -
--gray-90: hsl(0, 0%, 90%)（卡片/弹层底色）
警惕“看起来一样”的假象 —— 检查对比度与上下文
即使 L 值一致，在不同背景上也可能显得不统一：
- 深色模式下，
hsl(0, 0%, 70%)会发亮刺眼 → 改用hsl(0, 0%, 30%)保持相对明度关系 - 放在图片或渐变上时，灰会“浮”或“沉” → 加一点透明度（如
hsla(0, 0%, 50%, 0.8)）柔化融合 - 小字号文字慎用 L＞85% 的灰 → 易读性下降，建议最低用
hsl(0, 0%, 80%)
基本上就这些 —— 把灰当成“明度标尺”来用，而不是颜色来挑，一致性自然就稳了。
