<p>hsl(from var(--color) h s l) 单独使用不会变色，因 from 仅解构变量而不修改值；需配合 calc() 动态调整亮度，如 hsl(from var(--primary) h s calc(l - 12)) 才生效。</p>
直接用 hsl(from var(--color) h s l) 不会变色，必须配合 calc() 才能动态调亮度。
为什么 hsl(from ...) 单独写没用？
很多人写 color: hsl(from var(--primary) h s l) 发现悬停颜色纹丝不动——这不是 bug，是预期行为。from 只负责“解构”，把变量拆成 h、s、l 三个值，但不改它们就等于原样重绘。真正驱动变化的是 calc()。
怎么写才生效：hsl(from ...) + calc() 组合
核心写法是把 l（亮度）放进 calc() 里减一个数：
-
background-color: hsl(from var(--primary) h s calc(l - 12))→ 背景变深 -
color: hsl(from var(--text) h s calc(l - 8))→ 文字更易读 -
color: hsl(from var(--primary) h s calc(l - 5) / 0.6)→ 禁用态：降亮度+透明度
注意：l 和 s 是纯数字（0–100），不能带 %；写成 calc(l - 12%) 会静默失效。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：空格、斜杠、越界
新版颜色函数对格式极其敏感：
- 正确：
hsl(210 75% 48%)、rgb(255 0 0 / 0.7)（数值间空格，/前后必须有空格） - 错误：
hsl(210, 75%, 48%)、rgb(255 0 0/0.7)、hsl(210 75% 48)（漏 % 或 / 缺空格） - 亮度别超限：
calc(l - 15)对l: 5的颜色会得负数，部分浏览器 clamp 到 0，但行为不一致；建议预估安全范围或加@supports降级
备选方案：color-mix() 更稳妥
如果担心 hsl(from ...) 兼容性（Safari 16.4+ 才稳定支持），或者原始色亮度已很低（比如 l: 10），用 color-mix() 混合黑色更鲁棒：
background-color: color-mix(in srgb, var(--primary), black 20%)- 它不依赖 HSL 解构，也不怕亮度越界，且语义清晰：加多少黑，就暗多少
- 注意写法：
in srgb必须显式指定颜色空间，否则无效
真正麻烦的不是语法本身，而是你得同时盯住三件事：变量定义是否带单位、calc 里有没有多写 %、空格有没有错位——少一个，整个悬停就静默失效。
