固定色相与饱和度、仅用calc()调亮度是生成可维护阶梯色板的最简路径；手动写死HEX或混用HSL/HEX变量会导致换主题时需重写整套样式。
固定色相与饱和度、只用 calc() 调亮度，是生成可维护阶梯色板的最简路径；手动写死一串 HEX 或混用 HSL/HEX 变量，后期换主题等于重写整套样式。
为什么只调 lightness 才算真正“同色系”阶梯
人眼对明暗变化比色相偏移更敏感，同一色相（--h）和饱和度（--s）下，仅调节 lightness 值，能保证所有变体归属同一视觉家族——不会发灰、不跳色、对比度可控。常见错误是把 --color-primary-100 写成 #e6f3ff、--color-primary-500 写成 #2196f3，结果换主色时得逐个查表换值，且无法响应深色模式。
- 亮度值建议分档：深色背景用
calc(var(--l-base) - 25%)（但不低于15%），禁用态用calc(var(--l-base) + 30%)（上限92%） - 浅色变体可同步略降饱和度（如
calc(var(--s) - 10%)），避免过“粉”；深色变体可略提饱和（如calc(var(--s) + 5%)），防止发闷 - 别在
hsl()里直接嵌套calc(var(--l-base) + 15%)—— Safari ≤15.4 会静默忽略整条声明
hsl() 内 calc() 兼容性陷阱与稳妥写法
Chrome 111+、Firefox 115+、Safari 16.4+ 支持 hsl(calc(...), s, l)，但旧版 Safari 和部分安卓 WebView 仍会失效。最稳方案是提前把计算结果声明为独立变量：
:root {
--h: 210;
--s: 85%;
--l-base: 55%;
--l-dark: 30%;
--l-light: 85%;
--l-disabled: 85%;
--s-disabled: 30%;
}
<p>.btn { background: hsl(var(--h), var(--s), var(--l-base)); }
.btn:hover { background: hsl(var(--h), var(--s), var(--l-light)); }
.btn:disabled {
background: hsl(var(--h), var(--s-disabled), var(--l-disabled));
}- 变量名用功能语义（
--l-dark）而非数值语义（--l-30），换设计规范时不用猜含义 - 禁用态推荐同时降饱和+提亮度，比单调高亮度更符合“弱化交互”的视觉意图
- 若需动态响应主题切换，JS 读取应统一用
getComputedStyle(document.documentElement).getPropertyValue('--l-dark')
用 color-mix() 替代纯 lightness 调节的适用场景
当需要从品牌色自然过渡到中性灰（比如禁用态、分割线、背景层），color-mix() 比单纯调 lightness 更精准：它按比例混合颜色，能保持色相稳定的同时线性衰减饱和感。
立即学习“前端免费学习笔记（深入）”；
- 写法：
color-mix(in srgb, hsl(218 32% 47%) 70%, hsl(0 0% 50%) 30%)—— 注意第二个颜色必须是纯灰（s: 0%） - 兼容性优先选
in srgb，in lch虽更符合感知均匀性，但 Safari 当前不支持 - 不适用于主按钮悬停等需强对比的场景，
color-mix()本质是“稀释”，不是“提亮”
真正难的不是生成五个色值，而是让这五个值在换主题、切深色模式、改设计规范时，全部自动对齐——关键在于把 --h、--s、--l-base 这三个锚点抽干净，其余全靠 calc() 或 color-mix() 衍生；任何一处手写 HEX 或硬编码数字，都会在下次设计评审时成为技术债。
