hsl(from ...)搭配calc()才能真正衍生ui调色板，因from仅拆解通道，calc()才实现明暗、饱和度等动态调整，且需严格遵循语法规范避免失效。
直接用 hsl(from ...) + calc() 就能生成整套 UI 调色板，不需要手写十几个 HEX 值，也不依赖 JS 或构建工具。
为什么必须搭配 calc() 才算真正“衍生”颜色
from 关键字本身不改变颜色，它只是把输入色（比如 var(--primary)）拆成可读取的通道变量：h、s、l。如果只写 hsl(from var(--primary) h s l)，浏览器就原样输出基础色——hover 和默认色完全一样，毫无变化。
- 所有明暗、透明、禁用态、悬停变体，都靠
calc()对通道做运算：比如calc(l - 10)变暗、calc(s * 0.7)降饱和 -
l在 HSL 中是 0–100 的纯数字（不是百分比），所以calc(l + 20)合法，calc(l + 20%)会失效 - 别在
oklch()里乱调H（色相）：数值跳变大，容易跨视觉断层；补色建议用预设或lch()
用 HSL 派生最稳的 UI 状态色
HSL 对 UI 开发最友好：亮度 l 和饱和度 s 调整直观，且 Safari 15.4+ 已支持 hsl(from ... calc())，无需 polyfill。
- 按钮悬停变暗：
background: hsl(from var(--primary) h s calc(l - 10)); - 禁用态文字（提亮+降饱和）：
color: hsl(from var(--primary) h calc(s * 0.3) calc(l + 15)); - 避免
l超出安全范围：用max(15%, calc(l - 30))防止负值导致渲染不可控 - 浅色背景建议略降饱和（如
calc(s * 0.8)），深色文字建议略提饱和（如calc(s * 1.1)），否则容易发灰或刺眼
绕不开的语法雷区：空格、斜杠、单位一个都不能错
新版相对颜色函数对格式极其敏感，错一个字符整个声明就被浏览器忽略，且不报错。
- alpha 必须用
/引入：rgb(from #000 r g b / 0.6)✅，rgb(from #000 r g b, 0.6)❌ -
from和颜色值之间**必须有空格**：hsl(fromvar(--primary) ...)❌，hsl(from var(--primary) ...)✅ -
oklch()的L是 0–1 小数（非百分比），C无上限，实测calc(C * 0.7)比calc(C - 0.1)更稳定 - 用
@supports (color: oklch(0 0 0))包裹高保真逻辑，Safari 不支持时自动 fallback 到 HSL
真正难的不是写对一行 hsl(from ... calc())，而是整套变量命名是否分层（基础/语义/场景）、亮度分布是否符合人眼感知（非线性）、以及是否为 l 或 <code>s > 95% 这类边界情况做了 clamp 或降级 —— 这些地方一漏，UI 在 OLED 屏或深色模式下就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
