hsl()配色关键在于参数规范与联动：色相可无单位或带deg，饱和度和亮度必须带%，且lightness极值易发灰；css变量+calc()可动态推导主题色，新from语法能直接提取调整颜色分量。
直接用 hsl() 函数就能做系统性配色，关键不是“能不能用”，而是参数怎么设、怎么联动、哪些值会悄悄失效。
hsl() 三个参数的单位和取值边界必须严格匹配
色相（hue）可以是无单位数字（如 200）或带单位角度（如 200deg），但饱和度（saturation）和亮度（lightness）**必须带 % 符号**，写成 70 或 0.7 都会被浏览器忽略整条声明。常见错误包括：
-
color: hsl(200, 70, 60);→ 无效，后两个参数缺 % -
color: hsl(200, 70%, 0.6);→ 无效，第三个参数不能是小数 -
color: hsl(400, 80%, 50%);→ 合法，色相自动对 360 取模（等价于hsl(40, 80%, 50%)）
用 CSS 自定义属性 + calc() 实现主题色动态推导
把主色拆成变量存起来，再用 calc() 算衍生色，比硬写一堆十六进制高效得多。比如：
:root {
--hue: 210;
--sat: 85%;
--light: 55%;
}
<p>.btn {
background-color: hsl(var(--hue), var(--sat), var(--light));
}</p><p>.btn:disabled {
background-color: hsl(var(--hue), var(--sat), calc(var(--light) - 20%));
}</p><p>@media (prefers-color-scheme: dark) {
:root {
--light: 25%;
}
}</p>
注意：Chrome 111+、Firefox 115+、Safari 16.4+ 支持 hsl() 内直接用 calc()，但旧版 Safari 不支持嵌套 calc()（比如 calc(calc(...))）。
HSL 的 lightness 不是 RGB 的明度，调太极端会“发灰”
lightness 是感知亮度，0% 是纯黑、100% 是纯白、50% 才是最饱满的色彩。但高饱和 + 极端亮度组合容易出问题：
-
hsl(0, 100%, 95%)看起来像淡粉，不是明亮红；实际渲染可能偏灰，尤其在 OLED 屏上 -
hsl(0, 100%, 5%)接近深酒红，不是标准暗红，且部分设备会压缩色域导致细节丢失 - 禁用态别只降
lightness，建议同步微调saturation（比如calc(var(--sat) * 0.6)），否则容易显得脏
现代方案：用 from 语法从已有颜色提取 HSL 分量
CSS 新增的 hsl(from ...) 语法能绕过手动转换，直接从任意颜色（包括 HEX、RGB、命名色）提取并调整分量：
:root {
--primary: #2563eb;
}
<p>.text-primary {
color: hsl(from var(--primary) h s calc(l + 10%)); /<em> 变亮 </em>/
}</p><p>.text-complement {
color: hsl(from var(--primary) calc(h + 180) s l); /<em> 互补色 </em>/
}</p>
这个语法目前在 Chrome 115+、Firefox 116+、Safari 17.4+ 可用。它真正解决的是“从设计稿 HEX 色值出发，如何快速生成同色系变体”的问题——不用查换算表，也不依赖 JS。
真正难的不是写对一个 hsl()，而是理解 lightness 在不同设备上的非线性映射，以及当 saturation 和 lightness 同时接近极值时，浏览器底层色域裁剪带来的不可预测偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
