HSL配色关键在于固定色相、反向调节亮度、约束饱和度：同色相下拉大L差值（≥40%）保对比度，浅背景（L=90%）配深文字（L=20%～30%），深背景（L=15%）配亮文字（L=85%～95%），S依L调整避免失真。
用 HSL 设计背景与文字颜色对，关键不是随意选色，而是控制色相（H）、饱和度（S）和亮度（L）的协同关系，让对比度自然达标（WCAG AA/AAA 要求），同时保持视觉协调。核心思路是：**固定色相、反向调节亮度、适度约束饱和度**。
用同一色相，拉开亮度差（L）
HSL 的 L（Lightness）直接决定明暗程度，是控制可读性的主力。背景和文字共用一个色相（H）和相近饱和度（S），仅让 L 值一高一低，就能保证和谐又清晰。
- 浅背景（如 L=90%）配深文字（L=20%～30%）：适合正文，柔和不刺眼
- 深背景（如 L=15%）配亮文字（L=85%～95%）：适合标题或强调区块
- 避免 L 差值小于 40%：例如 L=60% 和 L=50%，对比太弱，易被判定为不可读
饱和度（S）不宜过高，尤其在深/浅极端亮度下
高饱和度 + 高亮度（如 S=100%, L=95%）容易发“灰白”，显脏；高饱和度 + 低亮度（如 S=100%, L=5%）则趋近纯黑，失去色彩特征。建议：
- 浅色背景（L > 80%）时，S 控制在 5%～20%：保留色调感但不抢眼
- 深色背景（L
- 中等亮度（L=40%～60%）可稍提高 S（30%～50%），用于按钮或标签等强调元素
快速验证对比度：用浏览器开发者工具+HSL微调
写好 CSS 后，打开 DevTools → 选中元素 → 在 Styles 面板点击颜色值旁的小色块 → 切换到 HSL 模式。拖动 L 滑块实时观察文字是否仍清晰可辨，同时看右上角自动显示的对比度比值（如 4.7:1）。目标：
立即学习“前端免费学习笔记（深入）”；
- 普通文本：≥ 4.5:1（满足 WCAG AA）
- 大号文本（≥18pt 或加粗 ≥14pt）：≥ 3:1 即可
- 关键操作（如按钮文字）建议 ≥ 7:1，兼顾老年用户和强光环境
小技巧：用 CSS 自定义属性统一管理配对
把主色 H 和基准 L 封装起来，通过 calc() 动态生成文字和背景：
:root {
--hue: 210; /* 蓝色系 */
--light-bg: hsl(var(--hue), 12%, 94%);
--dark-text: hsl(var(--hue), 15%, 22%);
--dark-bg: hsl(var(--hue), 25%, 12%);
--light-text: hsl(var(--hue), 15%, 96%);
}
.card { background: var(--light-bg); color: var(--dark-text); }
.card.inverse { background: var(--dark-bg); color: var(--light-text); }
换主题时只改 --hue 和微调 S/L，整套配色自动适配，对比度有保障。
