hsl()函数需严格按标准语法使用：hsl(h, s, l)，色相为0–360无单位数，饱和度与明度必须带%，支持CSS变量但须每个参数独立包裹var()，无alpha需用hsla()。
直接用 hsl() 函数，别写成 hsl_() 或 hsl() 拼错
浏览器不认 hsl_()、hslx() 这类变体，只支持标准的 hsl(h, s, l)。三个参数必须是数字 + 单位（deg、%），顺序不能颠倒：
-
h：色相，0–360 的无单位数或带deg（如120或120deg） -
s：饱和度，必须带%（如70%，不能写70） -
l：明度，也必须带%（如50%）
button {
background-color: hsl(210, 80%, 60%);
border-color: hsl(210, 80%, 40%);
}
想动态调色？用 CSS 自定义属性 + hsl() 组合
把色相、饱和度、明度抽成变量，改一个值就能批量更新整套颜色，比硬编码十六进制方便得多：
:root {
--hue: 195;
--sat: 75%;
--light: 60%;
}
.card {
background: hsl(var(--hue), var(--sat), var(--light));
color: hsl(var(--hue), var(--sat), 20%);
}
.card:hover {
--light: 75%;
}
注意：var() 不能直接插在 hsl() 里当单个参数用（比如 hsl(var(--hue) 70% 50%) 会报错），必须每个参数都独立包裹 var()。
和 rgb() / 十六进制比，hsl() 调色更直观但有兼容性边界
hsl() 在所有现代浏览器中完全可用（Chrome 1+、Firefox 3+、Safari 3.1+），IE9+ 也支持。真正要注意的是：
立即学习“前端免费学习笔记（深入）”；
- 没有 alpha 通道 —— 想透明得用
hsla()，不是hsl(..., 0.5) - 色相循环是线性的，
hsl(0, 100%, 50%)（红）到hsl(60, 100%, 50%)（黄）之间过渡自然，但人眼对蓝→紫段敏感度不同，微调时建议用 DevTools 颜色拾取器实时拖动 - 明度
0%总是黑、100%总是白，和 RGB 的亮度逻辑一致，但中间值不一定对应“视觉等亮”
常见错误：复制粘贴时漏掉括号、逗号或百分号
这些写法全都会失效：
-
color: hsl(180 60% 50%);→ 缺少逗号 -
background: hsl(180, 60, 50);→ 饱和度和明度没加% -
border: hsl(180deg, 60%, 50%);→deg可以加但非必需，加了也不报错，但容易和hwb()混淆
最稳妥写法：统一用无单位色相 + 带 % 的后两个参数，不加 deg，逗号后空格可选但建议留一个。
色相调整本身很简单，难的是记住哪些 UI 元素该联动改、哪些该保持对比度稳定——比如文字色跟着背景 hsl() 明度反向偏移时，别只调 l，有时换 s 更保可读性。
