用hsl()调亮度l实现明暗切换最直接，因l精准控制明度且不改变色相与饱和度；建议基础色l=50%，悬停升至68%以上，禁用时l=30%并降s至20%以增强语义。
用 hsl() 调整亮度（l）实现明暗切换最直接
按钮的明暗状态本质是同一色相下的明度变化，hsl() 的第三个参数 l（lightness）就是干这事的。比起改 rgb() 里三个值或套 filter: brightness()，直接调 l 更精准、可预测，且不破坏原有色相和饱和度。
实操建议：
- 基础色用中等明度，比如
hsl(210, 60%, 50%)（一种稳重的蓝） - 悬停态提高
l值：hsl(210, 60%, 65%)—— 看起来更亮，但仍是同一种蓝 - 禁用态降低
l值：hsl(210, 60%, 30%)—— 暗而不发灰，保持色调统一 - 避免把
l设到 0% 或 100%，否则会变成纯黑/纯白，失去颜色本意
为什么别用 filter: brightness() 替代 hsl() 的 l
filter: brightness() 是后处理，它会无差别提亮整个元素（包括边框、阴影、文字），还可能让半透明背景溢出预期范围；而 hsl() 改的是颜色本体，所有基于该色值的衍生效果（如 box-shadow: inset、border-color）都能自然同步变亮/变暗。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用了
filter: brightness(1.2)后，按钮文字也变亮，对比度反而下降 - 配合
background: linear-gradient()时，filter会让渐变失真或出现色带 - 在部分旧版 Safari 中，
filter可能触发渲染层提升，引发意外重绘
明暗状态要兼顾可访问性，l 的跨度不能太小
视觉上“有点变亮”不等于满足 WCAG 对按钮状态对比度的要求。文本与背景之间至少需 4.5:1（正常文本），而状态变化本身也应有足够区分度，避免用户误判是否已悬停或点击。
实操建议：
- 从基础色的
l: 50%出发，悬停至少调到l: 68%以上（实测多数 HSL 组合下这个跨度能保证文本对比度达标） - 禁用态不要只靠降低
l，建议同时降低s（saturation）到 20% 左右，模拟“褪色感”，强化语义 - 用浏览器 DevTools 的颜色拾取器实时看计算后的对比度，别凭感觉估
在 CSS 自定义属性中管理 HSL 的三元组，方便批量调整
硬编码多处 hsl(210, 60%, 50%) 很难维护。把 H、S、L 拆成独立变量，状态只需改一个值，主题切换也顺手。
示例写法：
:root {
--btn-h: 210;
--btn-s: 60%;
--btn-l-base: 50%;
--btn-l-hover: 68%;
--btn-l-disabled: 30%;
}
.btn {
background: hsl(var(--btn-h), var(--btn-s), var(--btn-l-base));
}
.btn:hover {
background: hsl(var(--btn-h), var(--btn-s), var(--btn-l-hover));
}
.btn:disabled {
background: hsl(var(--btn-h), var(--btn-s), var(--btn-l-disabled));
}
注意点：
-
var(--btn-s)后面的%必须保留在变量值里，不能写成--btn-s: 60再在hsl()里拼 —— CSS 不支持字符串拼接 - 如果要用 JS 动态改主题色，优先改
--btn-h和--btn-s，l值保持相对比例，明暗逻辑不会乱
l 参数在两端（接近 0% 或 100%）时人眼感知是非线性的，微调 2% 可能毫无感觉，调 5% 又突然刺眼 —— 实际配色时得在真实设备上反复点按验证。 
