HSL替代RGB/十六进制可构建可维护颜色体系：用色相H锚定主色系（如品牌蓝H=220），通过微调H±10~20生成邻近色；同一H下调节S、L分层控制状态色；结合CSS自定义属性与calc()动态衍生，提升一致性与可维护性。
用 HSL（色相、饱和度、亮度）替代 RGB 或十六进制值，是构建可维护、可推演颜色体系的高效方式。它让颜色不再是一堆随机数字，而变成一组有逻辑关系的参数。
用色相（H）锚定品牌主色系
HSL 的色相 H 是 0–360 的角度值，对应色轮位置，非常直观。比如蓝色系集中在 200–260，绿色系在 120–180。你可以固定一个主色相（如品牌蓝 H=220），再通过微调 ±10~20 生成邻近色、辅助色，确保视觉协调。
- 主色：hsl(220, 70%, 55%)
- 加深版（降亮+增饱）：hsl(220, 75%, 42%)
- 浅色背景（同色相+高亮+低饱）：hsl(220, 20%, 94%)
用饱和度（S）和亮度（L）分层控制状态色
同一色相下，仅调整 S 和 L 就能系统化表达交互状态。例如按钮的常态、悬停、禁用，不必为每个状态单独挑色：
- 常态：hsl(220, 70%, 55%)
- 悬停（更鲜明）：hsl(220, 75%, 48%) —— 稍增饱、稍降亮，更“有力”
- 禁用（灰化）：hsl(220, 15%, 70%) —— 大幅降饱、提亮，自然变灰不突兀
建立 CSS 自定义属性 + calc() 动态衍生
在 :root 中定义基础 H、S、L 变量，再用 calc() 组合出整套颜色，修改一处即全局响应：
立即学习“前端免费学习笔记（深入）”；
:root {
--hue-primary: 220;
--sat-primary: 70%;
--light-primary: 55%;
<p>--color-primary: hsl(var(--hue-primary), var(--sat-primary), var(--light-primary));
--color-primary-hover: hsl(var(--hue-primary), calc(var(--sat-primary) + 5%), calc(var(--light-primary) - 7%));
--color-primary-disabled: hsl(var(--hue-primary), 15%, 70%);
}这样新增一个“强调红”只需加一组 --hue-accent: 8，后续所有衍生色自动对齐逻辑。
搭配工具快速验证与收敛
手动调 HSL 容易失准，推荐用浏览器开发者工具的拾色器（支持实时切换 HSL 模式），或在线工具如 hslpicker.com、culori.js 的色阶生成器。输入主色后，一键导出 5~7 级明暗/饱和度梯度，直接转成 CSS 变量，避免凭感觉拍脑袋。
