必须用HSL变量+calc()或hsl(from...)动态推导色阶，固定--h和--s仅调l才能保证同色系；深色模式需设l下限15%、浅色容器上限92%，禁用态同步降s，color-mix()适用于自然退色但兼容性有限。
直接用 hsl() 写死数值生成色阶，等于把设计系统钉死在墙上——换主色就得手动改十几处，深色模式一开全乱套。必须用 HSL 变量 + calc() 或 hsl(from ...) 动态推导，才能真正实现“改一个值，整套变”。
为什么只调 lightness 才算同色系阶梯
人眼对明暗变化比色相偏移更敏感。固定 --h 和 --s，仅用 calc() 调 l，所有衍生色才真正归属同一视觉家族：不发灰、不跳色、对比度可控。常见错误是把 --color-primary-100 写成 #e6f3ff、--color-primary-500 写成 #2196f3，结果换主题时得逐个查表重算，且无法响应深色模式。
- 深色背景建议用
calc(var(--l-base) - 25%)（但不低于15%） - 浅色容器底色可用
calc(var(--l-base) + 37%)（上限卡在92%防发白） - 悬停态推荐
+8%微亮，避免视觉跳变 - 禁用态别只提亮度——同步降饱和（如
calc(var(--s) - 15%)），更符合“弱化交互”的意图
hsl(from ...) 相对计算的兼容性陷阱
hsl(from var(--primary) h s calc(l + 15)) 看起来干净，但 Safari ≤15.4 会静默忽略整条声明；Chrome 111+、Firefox 111+、Safari 16.4+ 才稳定支持。实际项目里，尤其要兼顾安卓 WebView 或旧版 iOS，最稳妥的方式是提前把计算结果声明为独立变量：
:root {
--h: 200;
--s: 70%;
--l-base: 55%;
--l-dark: 30%;
--l-light: 92%;
--l-hover: 63%;
--s-disabled: 55%;
}
.btn { background: hsl(var(--h), var(--s), var(--l-base)); }
.btn:hover { background: hsl(var(--h), var(--s), var(--l-hover)); }
.btn:disabled { background: hsl(var(--h), var(--s-disabled), var(--l-light)); }- 变量名用功能语义（
--l-dark）而非数值语义（--l-30），换设计规范时不用猜含义 - 所有 HSL 分量定义时**不带引号**：
--s: 70%;✅，不是--s: "70%";❌ - 避免在
hsl()中混用变量与字面量单位，统一用变量声明
用 color-mix() 替代纯 lightness 调节的时机
当需要从品牌色自然过渡到中性灰（比如禁用态文字、分割线、背景层），color-mix() 比单纯调 lightness 更精准：它按比例混合颜色，能保持色相稳定的同时线性衰减饱和感。
立即学习“前端免费学习笔记（深入）”；
写法示例：color-mix(in srgb, hsl(218 32% 47%) 70%, hsl(0 0% 50%) 30%)
- 第二个颜色必须是纯灰（
s: 0%），否则混合结果不可控 - 适用于需“视觉退场”但又不能完全失色的场景，比如表单禁用输入框边框
- 注意兼容性：Chrome 111+、Firefox 115+、Safari 16.4+ 支持，旧环境需 fallback 到
hsl()方案
真正难的不是写对一行 hsl()，而是让整套色阶在主题切换、深色模式、禁用状态、悬停反馈之间保持视觉连贯——这要求每个变量都承载明确语义，每处 calc() 都有设计依据，而不是靠“看起来差不多”硬凑。
