hsl颜色模型的三个参数是色相（hue，0–360°）、饱和度（saturation，0%–100%）和亮度（lightness，0%–100%），分别控制颜色种类、纯度和明暗程度。
什么是 HSL 颜色模型中的三个参数
HSL 是 Hue（色调）、Saturation（饱和度）、Lightness（亮度）的缩写，它比 RGB 更符合人眼对颜色的直觉认知。其中：
Hue 是色相，用 0–360 的角度值表示，比如 0 或 360 是红色，120 是绿色，240 是蓝色；
Saturation 是饱和度，0% 表示灰色，100% 表示纯色；
Lightness 是亮度，0% 是纯黑，100% 是纯白，50% 才是该色相最“标准”的明暗程度。
注意：不要把 lightness 和 luminance 混淆——CSS 中用的是 Lightness（HSL），不是 Luminance（如 HSLuv 或 Lab 中的 L*）。
在 CSS 中怎么写 HSL 颜色值
CSS 支持 hsl() 和 hsla() 函数，语法为：hsl(h, s, l) 或 hsla(h, s, l, a)，其中：
- h 是无单位数字（0–360）
- s 和 l 必须带 % 单位
- a（alpha）是 0–1 的小数，可选
常见写法示例：color: hsl(200, 100%, 50%) → 鲜亮的青蓝色background-color: hsla(0, 80%, 60%, 0.7) → 半透明的偏橙红
HSL 和 RGB/HEX 混用时要注意什么
HSL 不是“更高级”的颜色格式，它只是另一种表达方式，浏览器最终仍会转成 RGB 渲染。但混用时容易踩坑：
- 浏览器对 hsl() 的解析完全符合规范，但旧版 IE（≤8）不支持，需提供降级：color: #3a86ff; color: hsl(210, 100%, 60%)
- 同一视觉颜色在不同亮度下，HSL 的 l 值和 RGB 的灰度感知不一致（例如 hsl(0, 100%, 50%) 看起来比 #ff0000 略暗）
- 使用预处理器（如 Sass）时，lighten()/darken() 默认基于 HSL 计算，但若原始颜色是 HEX，Sass 会先转成 HSL 再调整，可能和手算的 hsl(...) 值有细微偏差
用 HSL 做主题色动态调节的实际技巧
HSL 最实用的场景是设计系统中保持色相一致、仅调明暗与饱和度：
- 主色统一用 hsl(220, 90%, 55%)，悬停变亮：hsl(220, 90%, 65%)，禁用态降饱和：hsl(220, 30%, 55%)
- 利用 CSS 自定义属性实现主题切换：
body { --hue: 180; --sat: 85%; --light: 60%; }<br>button { background: hsl(var(--hue), var(--sat), var(--light)); }- 注意：CSS 不支持在
hsl() 内直接运算（如 hsl(calc(var(--hue) + 30), ...)），加减色相必须靠 JS 或构建时处理
立即学习“前端免费学习笔记（深入）”；
HSL 的灵活性集中在「可读性」和「语义调节」上，但它的数值不是线性感知的——比如把 l 从 50% 调到 60%，视觉明度变化远不如从 90% 调到 100% 那么明显。真正在意精确明暗匹配时，别只盯着 HSL 数字，得用 DevTools 实时拖动对比。
