必须只改lightness，因为人眼对明暗最敏感，固定色相和饱和度仅调lightness可确保所有变体落在视觉连贯的“灰阶轴”上，不跳色、不发灰、对比度可控；动saturation或hue会导致偏色、可读性崩坏。
只调 lightness 才能稳住同色系，其他参数一动就偏色、发灰、可读性崩坏。
为什么必须只改 lightness，不能碰 saturation 或 hue
人眼对明暗变化最敏感，同一 --h 和 --s 下仅调节 lightness，所有颜色会落在一条视觉连贯的“灰阶轴”上：不跳色、不发灰、对比度可控。一旦同时改 saturation，比如按钮悬停时写成 hsl(calc(var(--h) + 5), calc(var(--s) - 10%), var(--l))，结果可能偏紫或泛粉；在浅背景上文字直接看不清。常见现象是：--color-primary-300 是 #c2e9ff，--color-primary-700 是 #0288d1，但换主色后发现两者根本不在同一色相环上——因为它们是手动挑的，不是从同一基础色派生。
-
lightness低于 12% 容易失色（尤其高饱和蓝/绿） -
lightness高于 92% 会泛白、刺眼、对比度不足 - 深色背景上的亮色变体建议用
calc(var(--l-base) - 25%)，但下限卡死 15% - 禁用态可用
calc(var(--l-base) + 30%)，上限封顶 92%
hsl() 里嵌 calc() 明度？Safari ≤15.4 会静默失效
写成 hsl(var(--h), var(--s), calc(var(--l) + 10%)) 在 Safari ≤15.4（含 iOS 15.4）中整条声明被忽略，回退到继承色或透明——没有报错，你根本看不到提示。这不是兼容性警告，是静默失效。
- 正确做法是提前算好并存为独立变量：
--l-primary-dark: 40%、--l-primary-light: 85% - 然后直接用：
background-color: hsl(var(--h-primary), var(--s-primary), var(--l-primary-dark)); - 如果真要动态缩放亮度（如深色模式下），确保所有
calc()结果已落地为具体百分比值，不再嵌套在hsl()内部
怎么用 CSS 变量批量生成 5 档实用色阶
以主色 hsl(220, 70%, 55%) 为基准，按用途分档更可靠：
- 深色背景 / 强调文字：
--l-primary-900: 30%（不低于 15%） - 默认主色：
--l-primary-500: 55% - 浅色背景 / 卡片底色：
--l-primary-100: 70%（不超 92%） - 悬停态：
--l-primary-400: 48%（微调 7~12%，避免跳变） - 禁用态：
--l-primary-300: 85%+ 同时降saturation至30%增加灰度感
所有档位共用同一 --h-primary: 220 和 --s-primary: 70%，保证家族感。
想换整套主题色？只动 hue，saturation 和 lightness 必须锁死
改 hue 相当于把整套颜色在色轮上平移，视觉关系完全保留；动 saturation 或 lightness 则会让对比度、可读性、层级感全乱。比如把 hsl(200, 70%, 60%) 改成 hsl(230, 80%, 50%)，结果灰色背景变深、文字反白失效、悬停态发灰——问题出在 s 和 l 跟着变了。
- 所有主题色必须共用同一组
s和l值，例如70%和60% -
hue步进建议用 30° 或 45°（对应 12 色环或 8 色环），避开 17° 这种难复现的偏移 - 别混用
0和360，CSS 解析时视为不同值，可能导致变量计算异常
真正麻烦的是亮度边界和 Safari 的静默失效——这两个点漏掉，一套配色体系上线后就等于没体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
