HSL模式是动态调整CSS颜色最自然的方式，通过色相（H）、饱和度（S）、亮度（L）三个独立维度实现精准控制：H调节主色调（0–360°色轮），S控制浓淡（0%–100%），L调整明暗（0%–100%）。
用 HSL 模式写 CSS 颜色，是动态调整最自然的方式。它把颜色拆成色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个可独立调节的维度，改哪项就调哪项，不牵连其他。
色相（H）控制主色调
H 是 0–360 的角度值，对应色轮上的位置：0 和 360 是红色，120 是绿色，240 是蓝色。想批量切换主题色？只需统一改一个变量的 H 值，整套按钮、标签、边框就能同步换底色。
- 用 CSS 自定义属性定义：--hue: 210;
- 在颜色中直接引用：background: hsl(var(--hue), 70%, 60%);
- 配合 JavaScript 动态更新：document.documentElement.style.setProperty('--hue', '180');
亮度（L）轻松做明暗变体
L 控制从黑（0%）到白（100%）的明暗程度，中间 50% 是纯正颜色。按钮悬停变亮、文字深浅适配背景、夜间模式降亮度——全靠调 L，不伤色相和饱和度。
- 基础色：hsl(210, 70%, 60%)
- 悬停亮版：hsl(210, 70%, 75%)
- 禁用暗版：hsl(210, 70%, 30%)
饱和度（S）调节色彩浓淡
S 从 0%（灰阶）到 100%（最鲜艳）。降低 S 可快速生成柔和 UI 色彩；设为 0% 就是响应式灰度模式的基础；高 S 适合强调状态或品牌高光。
立即学习“前端免费学习笔记（深入）”；
- 日常界面常用 40%–70%，耐看不刺眼
- 警告色可提至 90%，突出但不过曝
- 配合 L 使用更稳妥，比如 hsl(30, 90%, 55%) 比 hsl(30, 100%, 50%) 更易读
基本上就这些。HSL 不是万能，但在需要程序化、可预测地调整颜色时，比 RGB 或十六进制直观太多。只要记住 H 是“转色轮”，S 是“加灰/加艳”，L 是“调明暗”，调色就不再靠试错。
