不能对单个hsl变量做calc()运算是因为css变量本质是字符串，无法索引提取数值；必须拆分为h/s/l三个独立变量，才能用calc()分别运算并确保兼容性与可维护性。
直接拆分 HSL 三参数为独立变量，再用 calc() 动态调整 l 值，是唯一稳定、可维护、兼容性好的方案。
为什么不能对单个 HSL 变量做 calc() 运算？
CSS 自定义变量本质是字符串，var(--color) 的值如 hsl(200, 50%, 60%) 是完整文本，calc() 无法从中提取或修改第三个数值。试图写 hsl(var(--h), var(--s), calc(var(--l) - 10%)) 是可行的，但写 hsl(calc(var(--color)[2] - 10%)) 完全无效——CSS 不支持索引访问多值变量。
正确做法：把 H、S、L 拆成三个独立变量
这样每个维度都可被 calc() 直接引用和运算，且语义清晰、调试直观：
-
--primary-h: 200;（无单位数字或带deg） -
--primary-s: 70%;（必须带%） -
--primary-l: 60%;（必须带%）
使用时组合：hsl(var(--primary-h), var(--primary-s), var(--primary-l))；悬停变暗只需局部覆盖：.btn:hover { --primary-l: 45%; }。
深色模式切换时只改 L 值，但要注意饱和度影响
在 .dark-theme 类里重设 --primary-l: 30% 确实能一键压暗全站颜色，但以下情况会失效：
- 原始色饱和度
s过低（）时，<code>l变化几乎不可见，视觉上像灰度浮动 - 高饱和色（
s > 90%）配极低l（如10%）容易发黑失真，建议下探不超过原值-25% -
l降到20%以下时，文字对比度大概率不达标，必须用 DevTools 的无障碍面板实测
color-mix() 是备选，但别默认开启
color-mix(in srgb, var(--primary) 80%, black 20%) 能绕过变量拆分，直接混合变暗，但它有硬伤：
- 仅 Chrome 111+、Firefox 115+、Safari 16.4+ 支持，IE 和旧 Edge 完全不识别
- 混合结果依赖色彩空间（
srgbvsoklab），不同浏览器渲染可能有细微偏移 - 无法精确控制明度百分比，只能靠试错调节权重，不适合需要 WCAG 合规的场景
真正关键的地方不是“怎么调暗”，而是调完之后是否还满足可读性——l 值下降 20%，背景不变，对比度可能从 7.2:1 掉到 3.8:1，这种事只有点开 DevTools 颜色 picker 才能看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
