hsl(from)仅解包变量值，真正变色需calc()运算；l为0–100整数，须防越界并严格遵循空格、斜杠、小写语法。
直接用 hsl(from) 搭配 calc() 就能生成单色系配色，但必须写对通道运算、注意亮度越界、且不能漏掉空格或斜杠——错一个字符整条声明就被浏览器静默丢弃。
为什么 hsl(from var(--primary) h s l) 什么都没变
因为 from 只是“解包”，不是“变色”。它把 --primary 的 HSL 值拆成三个变量 h、s、l，原样塞回去，等于复读原色。真正起作用的是 calc()：比如 calc(l - 10) 才会让颜色变暗，calc(s * 0.7) 才会降饱和。
-
l是 0–100 的整数（不是百分比），calc(l + 20%)会失效 - 没写
calc()的声明，浏览器当普通 HSL 解析，不报错也不警告 - 常见错误现象：
color: hsl(from var(--primary) h s l);→ hover 色和默认色完全一样
hsl(from) 生成按钮状态色的典型写法
HSL 对明暗和鲜艳度控制最直观，适合批量生成 hover / active / disabled 等单色系变体。关键是要让亮度 l 和饱和度 s 在合理范围内浮动。
- 悬停微暗：
background: hsl(from var(--primary) h s calc(l - 10)); - 按下态再暗一点：
background: hsl(from var(--primary) h s calc(l - 20)); - 禁用态提亮+降饱和：
color: hsl(from var(--primary) h calc(s * 0.3) calc(l + 15)); - 文字强调（浅底深字）：
color: hsl(from var(--primary) h calc(s * 0.8) calc(l + 20));
注意：l 容易越界（如原值为 5，calc(l - 10) 得 -5），建议用 max(10, calc(l - 10)) 或 min(90, calc(l + 20)) 兜底。
立即学习“前端免费学习笔记（深入）”；
绕不开的语法雷区：空格、斜杠、单位一个都不能错
新版相对颜色函数对格式极其敏感，错一个空格或漏一个 /，整条声明就静默失效，开发者工具里也看不到报错。
-
from和颜色值之间**必须有空格**：hsl(from var(--primary) h s l)✅，hsl(fromvar(--primary) h s l)❌ - alpha 必须用
/引入：rgb(from #000 r g b / 0.6)✅，rgb(from #000 r g b, 0.6)❌ - 所有通道名（
h、s、l、r、g、b、L、C、H）全小写，大小写混用会失效
复杂点不在写法，而在亮度分布是否符合人眼感知
同一套 calc(l - 10) 在深蓝（l ≈ 25）和浅蓝（l ≈ 85）上产生的视觉明暗变化完全不同。OLED 屏、深色模式、甚至不同品牌显示器都会放大这种差异。真正落地时，最容易被忽略的是：没为极端值做 clamp（比如 l 或 <code>s > 95%），结果在深色背景下文字发灰、在浅色背景上按钮糊成一片。
