HSL颜色微调更可靠：固定色相H，hover微降亮度L并略增饱和度S，active再降L、S回归常态；用CSS变量+calc()动态控制，注意浏览器兼容性与WCAG对比度要求。
用 hsl() 函数做颜色微调比写死十六进制更可靠
直接改 hex 或 rgb() 值做 hover/active 变化，容易导致明暗突兀、对比度不足，甚至在深色模式下失效。而 hsl() 把色相（H）、饱和度（S）、亮度（L）拆开，只要动一个参数就能自然过渡——比如按钮常态用 hsl(210, 60%, 55%)，hover 时只降 L 到 48%，视觉上就是“按下去”的感觉，且保色相不偏移。
关键点：浏览器原生支持 hsl()，无需预处理器；所有现代浏览器都认，连 Safari 15.4+ 都没问题；但别用 hsla() 做透明叠加来模拟 active 效果——它会削弱文字可读性，尤其在浅底色上。
Hover 和 Active 的 HSL 参数该动哪个？
推荐固定 H（色相），微调 S 和 L，原因很实际：
-
Hover：小幅降低
L（比如 -5%～-7%），轻微提高S（+3%～+5%），模拟光照变弱+色彩更集中 -
Active：再降一次
L（比 hover 再低 5%～8%），S回到常态或略低，模拟物理按压后反光减少 - 别碰
H——哪怕只动 10°，蓝色可能变青，橙色偏黄，UI 一致性立刻崩
示例：
button {
background: hsl(200, 70%, 60%);
}
button:hover {
background: hsl(200, 75%, 53%);
}
button:active {
background: hsl(200, 70%, 45%);
}
用 CSS 自定义属性让 HSL 动态更可控
硬编码多组 hsl() 值维护成本高。把基准值抽成 --h、--s、--l，后续只需算差值：
立即学习“前端免费学习笔记（深入）”；
button {
--h: 200;
--s: 70%;
--l: 60%;
background: hsl(var(--h), var(--s), var(--l));
}
button:hover {
background: hsl(var(--h), calc(var(--s) + 5%), calc(var(--l) - 7%));
}
button:active {
background: hsl(var(--h), var(--s), calc(var(--l) - 15%));
}
注意：calc() 在 hsl() 里只支持数值型单位（如 %、无单位数字），不能混用 px 或 em；S 和 L 必须带 % 符号，否则解析失败；Chrome 115+ 才支持 calc() 直接嵌在 hsl() 里，旧版需用 JS 或构建时处理。
对比度和可访问性容易被忽略的坑
光看着“颜色变深了”不等于达标。L 值降太多，文字（尤其灰色字）可能低于 WCAG AA 要求的 4.5:1 对比度。实操建议：
- 用浏览器 DevTools 的颜色拾取器，点开 eyedropper，看右下角实时对比度数值
- 常态
L设在 50%～70%，hover 控制在 40%～60%，active 别低于 35%（白字配深底除外） - 如果按钮文字是
#fff，背景L降到 30% 以下，灰度接近黑，但人眼对蓝紫系敏感度低，实际可读性反而不如 L=38% 的深蓝
最稳妥的方式：用 color-contrast()（实验性，仅 Safari 支持）或外部工具校验，而不是凭感觉调。
