HSL调亮度最直接：只调整L值即可精准控明暗而不偏色；HEX/RGB改通道会同时影响色相、饱和度和明度，易导致变脏或跑色调。
用 HSL 调整颜色亮度最直接：把 L（Lightness，明度） 值调高变亮、调低变暗，而 H（色相）和 S（饱和度）保持不变，就能精准控制明暗，不偏色、不发灰。
为什么 HSL 比 HEX/RGB 更适合调亮度？
HEX 和 RGB 是混合三原色的表示方式，改一个通道（比如 R/G/B）会同时影响色相、饱和度和明度，容易让颜色“变脏”或“跑色调”。HSL 把颜色拆成三个独立维度：
- H（Hue）：0–360°，决定“什么颜色”（红、蓝、绿等）
- S（Saturation）：0%–100%，决定“有多纯”（灰→艳）
- L（Lightness）：0%–100%，决定“有多亮”（黑→白）
只动 L 值，就像调节台灯亮度——颜色本质不变，只是更清晰或更柔和。
怎么把现有颜色转成 HSL 并调亮/调暗？
浏览器开发者工具（F12）里选中元素，点击颜色值旁的小色块，通常会自动显示 HSL 滑块；也可用在线转换工具或浏览器控制台快速换算。例如：
立即学习“前端免费学习笔记（深入）”；
- 原始深蓝色：
#0a4c8c→hsl(210, 80%, 29%) - 想让它更友好易读：把 L 从 29% 提到 55% →
hsl(210, 80%, 55%)（更亮但仍是正蓝） - 想用于背景弱化：把 L 降到 15% →
hsl(210, 80%, 15%)（更深沉，不发黑）
实用技巧：避免调过头
L 值不是越接近 0% 或 100% 越好：
- L 接近 0%（如 5%）：几乎全黑，细节消失，文字可读性差
- L 接近 100%（如 95%）：接近白色，饱和度视觉上大幅下降，颜色像“被水洗过”
- 推荐安全范围：正文色 L 在 20%–80%，背景色 L 在 85%–98%（浅灰白），强调色 L 在 40%–70%
css 中直接写 HSL，支持所有现代浏览器
无需转换工具，直接在 CSS 中使用，还能配合变量动态调整：
:root { --primary: hsl(210, 80%, 29%); --primary-light: hsl(210, 80%, 55%); --primary-dark: hsl(210, 80%, 15%); } .btn { background: var(--primary-light); color: var(--primary-dark); }需要响应式明暗切换（比如深色模式），只需覆盖 L 值，H 和 S 不变，风格统一又高效。