HSL 更适合生成色阶，因其色相、饱和度固定时仅调节亮度（Lightness）即可自然形成同一色系的明暗层次，避免偏色或发灰；推荐按用途分5档亮度值，并用CSS自定义属性高效复用。
用 HSL 模式管理同一色系的多种深浅，比手动调 HEX 或 RGB 更直观、更可控。
为什么 HSL 更适合生成色阶
HSL（色相 Hue、饱和度 Saturation、亮度 Lightness）把颜色拆解成符合人眼直觉的三个维度。其中 只调 Lightness 值就能自然生成明暗层次，而色相和饱和度保持不变，确保所有颜色属于同一色系，不跑偏、不发灰。
比如主色是 hsl(200, 70%, 55%)（一种清爽蓝），把 Lightness 分别设为 30%、45%、55%、65%、80%，就能得到从深到浅的一组协调色阶，无需反复试错。
一套实用的 HSL 色阶生成策略
推荐按用途划分 5 档 Lightness 值（以主色 Lightness 为基准 L₀）：
立即学习“前端免费学习笔记（深入）”；
- 深色背景 / 文字强调： L = L₀ − 25%（下限不低于 15%，避免纯黑感）
- 默认主色： L = L₀（即你选定的基础色）
- 浅色背景 / 卡片底色： L = L₀ + 15%（上限不超 92%，保证可读性）
- 悬停/激活态： L = L₀ + 8% ~ +12%（微调即可，避免跳变）
- 禁用态 / 辅助文字： L = L₀ + 30%（同时可降 Saturation 10~15% 增加灰度感）
CSS 中高效复用的写法
利用 CSS 自定义属性统一维护色相与饱和度，只暴露 Lightness 变量：
:root {
--hue: 200;
--sat: 70%;
--l-base: 55%;
--l-dark: calc(var(--l-base) - 25%);
--l-light: calc(var(--l-base) + 15%);
--l-disabled: calc(var(--l-base) + 30%);
}
<p>.btn { background: hsl(var(--hue), var(--sat), var(--l-base)); }
.btn:hover { background: hsl(var(--hue), var(--sat), var(--l-light)); }
.btn:disabled {
background: hsl(var(--hue), var(--sat), var(--l-disabled));
color: hsl(var(--hue), calc(var(--sat) - 12%), 50%);
}小技巧：快速校验色阶是否可用
生成后别急着上线，做两件事：
- 用浏览器开发者工具实时拖动 Lightness 滑块，观察对比度是否满足 WCAG AA 标准（文字与背景对比度 ≥ 4.5:1）
- 在灰度模式下（DevTools → Rendering → Emulate vision deficiencies → Grayscale）看层次是否依然清晰——真正考验色阶逻辑是否健壮
