HSL由色相、饱和度、亮度三部分组成，通过hsl()函数在CSS中设置颜色，支持透明度的hsla()可实现半透明效果，相比RGB更直观易调，适合创建统一配色与动态主题。
在CSS中，HSL（Hue, Saturation, Lightness）是一种直观且灵活的颜色表示方式。相比传统的十六进制或RGB，HSL让你更容易理解和调整颜色的视觉效果。
什么是HSL？
HSL由三个部分组成：
- 色相（Hue）：用角度表示（0-360），代表颜色的种类。比如0是红色，120是绿色，240是蓝色。
- 饱和度（Saturation）：用百分比表示（0%-100%），数值越高颜色越鲜艳，0%为灰色。
- 亮度（Lightness）：也用百分比表示（0%-100%），控制颜色明暗程度。0%是纯黑，100%是纯白，50%通常是标准色彩。
如何在CSS中使用hsl()
使用hsl()函数可以直接设置颜色。语法如下：
例如：
立即学习“前端免费学习笔记（深入）”；
.example {color: hsl(120, 100%, 50%); /* 纯绿色 */
}
这个颜色是标准绿色——色相120对应绿色，100%饱和度让颜色饱满，50%亮度让它清晰明亮。
调整颜色的小技巧
使用HSL可以快速生成配色方案：
- 保持色相不变，降低饱和度可得到更柔和的灰调颜色。
- 提高亮度到90%以上，能得到接近白色的浅色调，适合背景。
- 把亮度设为20%，饱和度适中，可得到深色文字或边框颜色。
比如从一个主色出发：
.text-light { color: hsl(200, 70%, 80%); }.text-normal { color: hsl(200, 70%, 50%); }
.text-dark { color: hsl(200, 70%, 30%); }
这样能轻松创建统一色调的层次感。
支持透明度：hsla()
如果需要透明效果，可以用hsla()，它在最后加一个透明度参数（alpha值）：
现代浏览器也支持在hsl()中直接写第四个参数（alpha），写法一致。
基本上就这些。HSL让颜色控制变得更直观，特别适合做主题切换或动态调色。试试用它代替RGB，调色会更高效。不复杂但容易忽略。
