HSL通过色调、饱和度和亮度直观定义颜色，语法为hsl(h, s, l)，支持透明度的hsla()，更易调整色彩并适用于现代CSS设计。
在CSS中，HSL是一种基于色调（Hue）、饱和度（Saturation）和亮度（Lightness）的颜色表示方法。使用 hsl(h, s, l) 函数可以方便地定义颜色，比传统的十六进制或RGB更直观，尤其适合调整色彩明暗和鲜艳程度。
hsl() 函数的基本语法
CSS 中 hsl() 的语法如下：
hsl(hue, saturation, lightness)三个参数的含义和取值范围分别为：
- hue（色调）：用角度表示，范围是 0 到 360。0（或360）代表红色，120 是绿色，240 是蓝色。其他颜色按色轮分布。
- saturation（饱和度）：百分比值，0% 表示灰色，100% 表示完全饱和的色彩。
- lightness（亮度）：百分比值，0% 是纯黑，50% 是正常亮度，100% 是纯白。
例如：
立即学习“前端免费学习笔记（深入）”；
background-color: hsl(120, 100%, 50%); /* 纯绿色 */实际使用示例
通过调整 HSL 参数，可以轻松创建配色方案：
- hsl(0, 100%, 50%) — 红色
- hsl(60, 100%, 50%) — 黄色
- hsl(240, 100%, 50%) — 蓝色
- hsl(180, 100%, 75%) — 浅青色（增加亮度）
- hsl(180, 50%, 50%) — 柔和的青色（降低饱和度）
支持透明度：hsla()
如果需要设置透明度，可以使用 hsla()，它在原有三个参数基础上增加一个 alpha 通道：
color: hsla(200, 100%, 50%, 0.5); /* 半透明蓝色 */alpha 值范围是 0（完全透明）到 1（完全不透明）。
现代浏览器兼容性与优势
所有现代浏览器都支持 hsl() 和 hsla()。相比 RGB，HSL 的优势在于：
- 更容易理解颜色构成
- 便于动态调整亮度或饱和度（比如悬停效果）
- 更适合用在 CSS 变量或预处理器中进行颜色计算
基本上就这些。hsl() 提供了一种更符合人类视觉感知的方式来控制颜色，让样式设计更直观高效。
