当需要系统性调整颜色明暗、饱和度或生成深浅变体时，应优先使用hsl()；因其色相、饱和度、亮度三属性独立可控，比rgb()和十六进制更直观高效。
什么时候该用 hsl() 而不是 rgb() 或十六进制？
当你需要系统性地调整一组颜色的明暗、鲜艳程度，或者要基于某个主色生成深浅变体（比如主题色、悬停态、禁用态）时，hsl() 是更可控的选择。它把颜色拆成「色相（hue）」「饱和度（saturation）」「亮度（lightness）」三个独立维度，改哪个就调哪个，不像 rgb() 改一个值常牵连其他视觉属性。
hsl() 的 lightness 和 saturation 为什么比 rgb() 直观？
lightness 是从黑（0%）到白（100%）的中间轴，50% 就是“标准亮度”；saturation 是纯色（100%）到灰（0%）的线性变化。这意味着：
- 想让按钮悬停时“变亮一点”？直接把
lightness从40%改成55%，不用反复试rgb()三个通道 - 想让警告色“不那么刺眼”？降低
saturation，而不是瞎调green或blue分量 - 整套 UI 暗色模式切换？批量把所有
lightness从90%→20%，色相和饱和度不动，风格统一
实际写法注意：别混淆 hsl() 和 hsla() 的 alpha 位置
hsla() 的第四个参数是透明度（alpha），必须写在最后，且是 0–1 的小数，不是百分比：
button {
background-color: hsl(200, 70%, 60%); /* 无透明 */
background-color: hsla(200, 70%, 60%, 0.8); /* 80% 不透明 */
}常见错误是写成 hsl(200, 70%, 60%, 0.8) —— 浏览器会直接忽略整条声明。另外，hue 单位是度（deg），可以省略单位（200 等价于 200deg），但建议显式写 deg 避免和数字混淆。
立即学习“前端免费学习笔记（深入）”；
兼容性和性能没坑，但别在 CSS 变量里裸写 hsl()
所有现代浏览器都支持 hsl()，包括 IE9+，性能和 rgb() 完全一致。唯一要注意的是：CSS 自定义属性（--color-primary: hsl(200, 70%, 60%)）本身只是字符串，不能直接参与计算。如果想动态调亮度，得用 color-mix()（较新）或预设多个变量，例如：
:root {
--primary-hue: 200;
--primary-sat: 70%;
--primary-light: 60%;
}
.btn {
background-color: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
}真正容易被忽略的点是：人眼对不同色相的「同等 lightness 值」感知亮度并不一样（比如 hsl(60, 100%, 50%)（黄）看起来比 hsl(240, 100%, 50%)（蓝）亮得多）。调色时别只信数值，一定要在真实界面里看效果。
