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，整套配色自动适配，对比度有保障。