只改--hue就能实现冷暖切换且不崩对比度，因为色相（h）独立控制冷暖语义：0°–60°偏暖、180°–300°偏冷；s和l不变时，明暗关系、可读性及组件对比度均保持稳定，如hsl(210,70%,55%)切至hsl(30,70%,55%)无需重写悬停/禁用逻辑。
为什么只改 --hue 就能实现冷暖切换，且不崩对比度
冷暖感本质是色相在色轮上的位置：0°–60°（红→黄）偏暖，180°–300°（青→紫）偏冷。HSL 的 h 参数独立控制这个方向，s 和 l 保持不变时，整套颜色的明暗关系、文本可读性、组件层级对比都维持原状。比如从 hsl(210, 70%, 55%)（冷蓝）切到 hsl(30, 70%, 55%)（暖橙），饱和度和亮度完全一致，按钮悬停、禁用态的衍生逻辑无需重写。
常见错误是试图用 RGB 或 HEX 做“冷暖映射”，结果不是发灰就是对比骤降——RGB 没有语义维度，改一个通道就牵动明暗和色相，#3b82f6 变暖不是简单调高 R，而是要先转 HSL、调 h、再转回，否则极易掉进色域陷阱。
hsl() 里怎么选冷暖临界点才不突兀
人眼对色相变化的敏感度不均等：0°（红）、120°（绿）、240°（蓝）最醒目；而 60°–90°（黄绿）、270°–300°（紫红）过渡区感知平缓。所以冷暖切换别卡在边界上硬跳，推荐：
- 冷色调基准选
--hue: 210（偏紫蓝），比纯240更柔和，避免屏幕蓝光刺眼 - 暖色调基准选
--hue: 30（橙红），比0更稳重，避开正红的警示感 - 两者差 180°，属互补色，切换时视觉张力足但不冲突；若需更渐进，可用
45（金黄）或195（青蓝）作中间态
注意：色相超过 360 会自动取模，hsl(390, 70%, 55%) 等价于 hsl(30, 70%, 55%)，加减运算可放心写，但别指望 calc(var(--hue) + 15) 在 hsl() 内直接生效——语法非法。
立即学习“前端免费学习笔记（深入）”；
如何用 JS 动态切换并保证禁用态/悬停态同步更新
核心是把色相变量定义在 :root，其他状态通过层叠继承，而非重复写死值。例如：
:root {
--primary-hue: 210;
--saturation: 70%;
--lightness: 55%;
}
.button {
background-color: hsl(var(--primary-hue), var(--saturation), var(--lightness));
}
.button:hover {
background-color: hsl(var(--primary-hue), var(--saturation), 68%);
}
.button:disabled {
background-color: hsl(var(--primary-hue), 40%, 30%);
}
JS 切换只需一行：
document.documentElement.style.setProperty('--primary-hue', '30');
所有 .button 实例立刻响应，包括已渲染的悬停态和禁用态——因为它们依赖的是同一个变量，不是快照值。容易踩的坑：
- 别在 JS 里拼接字符串塞进
style.backgroundColor，会丢失 CSS 层叠能力 - 禁用态别只降 alpha，那只是变透明，不是变“旧”；应同步调低
s和l，模拟褪色感 - Shadow DOM 内部需显式继承变量，
:host { --primary-hue: inherit; }
深色模式下冷暖切换为什么不能只调 l
深色模式不是简单把所有 l 从 55% 降到 20%，那样会让暖色（如 h=30）在暗背景下泛黄发脏，冷色（如 h=210）反而更干净。正确做法是：固定 --primary-hue 不变，但为深色模式单独定义 --lightness-dark 和 --saturation-dark，并在 @media (prefers-color-scheme: dark) 中覆盖：
@media (prefers-color-scheme: dark) {
:root {
--lightness: 25%;
--saturation: 50%;
}
}
这样暖色在暗背景下依然保留橙调（h=30 不变），只是饱和度压到 50% 防辉光、亮度设为 25% 保层次；冷色同理，不会因统一降亮而失去冷感。十六进制值无法参与这种分层调控，hsl(from #3b82f6 h s l) 语法虽好，但 Firefox/Safari 尚未支持，线上项目必须绕开。
