在 CSS 中，HSL（色相 Hue、饱和度 Saturation、亮度 Lightness）是一种直观的颜色表示方式，比传统的十六进制或 RGB 更容易调节颜色的明暗。通过调整 HSL 中的亮度值，你可以轻松实现颜色变亮或变暗，而无需手动计算 RGB 值。
理解 HSL 的三个参数
HSL 颜色由三个部分组成：
- 色相（Hue）：0 到 360 之间的数值，代表色轮上的角度。例如，0 或 360 是红色，120 是绿色，240 是蓝色。
- 饱和度（Saturation）：0% 到 100% 之间的百分比。0% 表示灰色，100% 表示完全饱和的颜色。
- 亮度（Lightness）：0% 到 100% 之间的百分比。0% 是纯黑，100% 是纯白，50% 是标准亮度。
语法如下：
color: hsl(色调, 饱和度, 亮度);通过调节亮度控制明暗
要让一个颜色变亮或变暗，只需修改 lightness 值即可。
立即学习“前端免费学习笔记（深入）”；
- 增加 lightness 值（如从 50% 提高到 70%），颜色会变得更亮，接近白色。
- 降低 lightness 值（如从 50% 降到 30%），颜色会变暗，接近黑色。
例如，定义一个基础蓝色：
background-color: hsl(240, 100%, 50%); /* 标准蓝色 */让它变亮一些：
background-color: hsl(240, 100%, 70%); /* 浅蓝色 */
再变暗一些：
background-color: hsl(240, 100%, 30%); /* 深蓝色 */结合 CSS 变量统一管理颜色明暗
使用 CSS 自定义属性（变量）可以更高效地管理同一色相的不同明暗版本。
:root {--primary-hue: 200;
--primary-sat: 70%;
}
.light-blue { color: hsl(var(--primary-hue), var(--primary-sat), 80%); }
.normal-blue { color: hsl(var(--primary-hue), var(--primary-sat), 50%); }
.dark-blue { color: hsl(var(--primary-hue), var(--primary-sat), 30%); }
这样只需修改变量，就能统一调整整个项目的颜色主题。
支持透明度：使用 hsla
如果需要透明效果，可以使用 hsla()，它在 hsl 的基础上增加一个 alpha 通道：
color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */alpha 值范围是 0（完全透明）到 1（完全不透明）。
基本上就这些。用 HSL 调节明暗直观又方便，特别适合做主题配色或悬停状态的颜色变化。不复杂但容易忽略。
