十六进制颜色失控因RGB无语义，改HSL可精准控色：用浏览器开发者工具复制为hsl(210,70%,60%)，固定色相210°，调节亮度值实现悬停变亮、禁用变暗等可预期效果，并用CSS变量统一维护。
为什么十六进制颜色改着改着就失控了
因为 #4a90e2 这类值不携带任何语义：你没法一眼看出它偏蓝还是偏紫，更没法判断“再亮一点”该动哪个数字。改 e2（blue 分量）可能让颜色发青，降 4a（red 分量）又容易变灰——RGB 是设备模型，不是人眼模型。
怎么把现有 HEX 颜色转成 HSL 并立刻用起来
别手算，也别依赖第三方工具出错。直接打开 Chrome 或 Firefox 的开发者工具，选中带颜色的元素，在 Styles 面板里找到 color 或 background-color 声明，点击颜色小方块，右键 → “Copy color as HSL”。你会拿到类似 hsl(210, 70%, 60%) 的结果。
- 这个
210就是色相，固定它，整套颜色就不会跑调 -
70%是饱和度，控制“鲜不鲜”，日常 UI 建议保持在 30%–80% 区间，太低显脏，太高刺眼 -
60%是亮度，悬停变亮？改成72%；禁用态变暗？改成40%——只动这一个数，效果可预期
用 CSS 变量把亮度抽出来统一控制
硬写多个 hsl(210, 70%, 40%)、hsl(210, 70%, 55%)、hsl(210, 70%, 85%) 很难维护。换成变量：
:root {
--primary-h: 210;
--primary-s: 70%;
}
.light-bg { background: hsl(var(--primary-h), var(--primary-s), 85%); }
.normal-text { color: hsl(var(--primary-h), var(--primary-s), 55%); }
.disabled { color: hsl(var(--primary-h), var(--primary-s), 40%); }
深色模式切换时，只需覆盖 --primary-l（如果也抽成变量），或直接在 @media (prefers-color-scheme: dark) 里重设亮度值。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的亮度感知陷阱
不是所有 lightness 变化都等效：
- 当
saturation低于 20% 时，调lightness几乎只影响灰度，看不出“颜色变亮”，而是“变浅灰→变亮灰” -
lightness: 5%和lightness: 15%在深色背景上差异极小，但85%→95%可能直接过曝 - 纯黑（
lightness: 0%）和纯白（lightness: 100%）会丢失色相信息，慎用于主色
真正可控的亮度调节，得落在中等饱和度 + 20%–80% 的 lightness 范围内——这里人眼对明暗变化最敏感，也最稳定。
