HSL是基于人类感知的颜色模型，以色调、饱和度、亮度描述颜色；RGB是设备导向的三通道叠加模型。HSL的亮度0%为黑、100%为白、50%最饱满，而RGB中间值不保证视觉均衡。
什么是HSL，和RGB有什么本质区别
HSL不是“另一种写法”，而是完全不同的颜色建模思路：hsl()用人类更易理解的维度描述颜色——色调（Hue）决定是红、黄、蓝；饱和度（Saturation）控制颜色有多“纯”；亮度（Lightness）决定明暗程度。而rgb()是设备导向的三通道叠加，调色时靠试错。
关键差异在于亮度处理：HSL的lightness: 0%是纯黑，100%是纯白，50%才是最饱满的色彩；RGB中rgb(0,0,0)黑、rgb(255,255,255)白，但中间值不保证视觉均衡。
怎么用hsl()函数写颜色值
hsl()接受三个参数，顺序固定且单位不可省略：hsl(hue, saturation, lightness)。
-
hue是角度值，范围0deg–360deg（或无单位数字），0和360都是红色，120是绿色，240是蓝色 -
saturation和lightness必须带%，0%饱和度是灰色，100%是全彩；0%亮度是黑，100%是白 - 支持透明度变体
hsla()，第四个参数是alpha（0–1或0%–100%）
示例：hsl(200, 80%, 60%)比hsl(200, 80%, 40%)更亮，但色调和饱和度一致，适合做同色系按钮悬停态。
立即学习“前端免费学习笔记（深入）”；
用HSL做主题色动态调整的实际技巧
比起硬编码十六进制，HSL真正优势在可计算性——CSS自定义属性 + calc()能实时推导衍生色。
- 主色存为
--hue: 210; --sat: 75%; --light: 55%;，按钮禁用态可写hsl(var(--hue), var(--sat), calc(var(--light) - 20%)) - 深色模式切换时，只改
--light值（如从55%→25%），整套色系自动变暗，无需重写所有选择器 - 注意：浏览器对
hsl()中calc()的支持已稳定（Chrome 111+、Firefox 115+、Safari 16.4+），但旧版Safari可能不支持嵌套calc()
HSL常见踩坑点
看似简单，但几个细节容易导致意外交互：
- 别混淆
lightness和brightness：HSL没有brightness，那是HSB/HSV模型的参数，混用会导致颜色偏移（比如把Photoshop里HSV的brightness直接当HSL的lightness用） - 高饱和度+极端亮度下，颜色会“发灰”或“刺眼”：例如
hsl(0, 100%, 95%)是极淡粉，而非明亮红；hsl(0, 100%, 5%)是近黑酒红，不是深红 - CSS预处理器（如Sass）的
lighten()/darken()函数默认基于HSL，但部分版本底层用的是HSLA空间插值，和纯CSS行为略有差异，跨工具调试时建议用浏览器开发者工具实时验证
真正要发挥HSL价值，得放弃“调出某个固定色”的思维，转而建立色调锚点，再通过饱和度与亮度区间去组织系统级色彩关系——这恰恰是多数人停在hsl(120, 50%, 50%)就不再往下走的地方。
