直接修改hsl()的第二、三个参数可批量调整饱和度与明暗，无需重写颜色值或依赖JS；调亮度（L）最安全，能自然提亮（如50%→68%）或压暗（50%→30%），色相不变且衍生色自动同步；降饱和度（S）比降透明度更可控，如70%→40%使色彩柔和耐看而不影响明暗层次。
直接改 hsl() 的第二、三个参数就能批量调明暗和饱和度，不需要重写整套颜色值，也不用依赖 JS 或构建工具。
只调亮度（L）就能统一变亮或变暗
亮度参数（第三个值）控制从黑到白的明暗层级，改它最安全：同一色相下，L 从 50% → 75% 是自然提亮，L 从 50% → 25% 是协调压暗，色相和饱和度完全不变，所有衍生色（如 box-shadow、border-color）自动同步响应。
- 基础蓝：
hsl(210, 70%, 50%) - 悬停亮版：
hsl(210, 70%, 68%)（别超 75%，否则发灰） - 禁用暗版：
hsl(210, 70%, 30%)（避开 0%–10%，纯黑会丢失色调） - 深色模式背景建议 L=15%–20%，不是 0%；主文字建议 L=90%–95%，确保对比度 ≥ 4.5:1
降饱和度（S）比降透明度更可控
把饱和度（第二个参数）从 70% → 40%，颜色立刻变柔和、更耐看，且不改变明暗感知——这比加 opacity 或 rgba() 强行“弱化”靠谱得多：后者会让边框、阴影、文字一并变淡，破坏层次；而降 S 只影响色彩浓度，灰阶过渡自然。
- 品牌按钮常态：
hsl(210, 70%, 55%) - 禁用态：
hsl(210, 40%, 30%)（同步降 L 防止发灰） - 深色模式中，同 hue 下 S 建议压到 40%–55%，高 S 蓝/青在暗底上易出辉光
- 别设 S=0% 除非真要灰度模式；S
用 CSS 变量批量驱动 HSL 参数
把 --hue、--sat、--light 抽成根变量，所有颜色声明都基于它们，改一处就全局生效。注意：变量必须带单位（%），且不能在 calc() 里参与运算——hsl(calc(var(--hue) + 30), ...) 是非法语法。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
:root { --primary-hue: 210; --primary-sat: 70%; --primary-light: 55%; } .btn { background: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light)); } - 夜间模式切换只需：
document.documentElement.style.setProperty('--primary-light', '20%'); - 悬停态别现场算，提前定义好：
--primary-light-hover: 68%; - 浏览器兼容性没问题：
hsl()和自定义属性在 Chrome 49+/Firefox 31+/Safari 9.1+ 全支持
真正难的是感知一致性：L 在 10% 或 90% 附近时，再调色相几乎无效；S 低于 25% 后，人眼对 H 的变化不再敏感。调完务必在真实设备上扫一眼——参数数字对了，不等于视觉对了。
