hsl() 是构建 Material Design 色阶最直接可控的方式，因其可锁定色相与饱和度、仅调节明度，避免 HEX/RGB 手动调整导致的色相偏移与饱和度失衡；通过 CSS 自定义属性配合 hsl(from ...) 实现动态色阶管理，并支持强调色与互补色的精准派生。
hsl() 是最直接、最可控的方式，Material Design 色阶本质是同一色相下不同明度（Lightness）与适度饱和度变化的组合，hsl() 天然适配这一逻辑。
为什么不用 HEX 或 RGB 手动调色阶？
手动改 HEX 会跑偏：比如 #2563eb → #1d4ed8 看似变深，但实际色相偏移了约 3°，饱和度也下降了 8%，长期维护容易失衡。RGB 同理，三个通道同时缩放很难保持“同一色系”。而 hsl(200, 70%, 55%) 只动 l 值，色相 h 和饱和度 s 锁死，生成的 hsl(200, 70%, 30%) 和 hsl(200, 70%, 80%) 必然属于同一视觉家族。
Material Design 主色（Primary）色阶怎么用 hsl() 搭建？
以官方推荐的主色基准 hsl(200, 70%, 55%)（一种清爽蓝）为例，按 Material Design 的语义分层生成 5 档：
-
深色背景 / 强调文字：
hsl(200, 70%, 30%)（l−25%，但不低于 15%） -
默认主色（Primary）：
hsl(200, 70%, 55%) -
浅色容器底色：
hsl(200, 70%, 92%)（l+37%，上限卡在 92% 防发白） -
悬停态（Hover）：
hsl(200, 70%, 63%)（l+8%，微亮不跳变） -
禁用态文字：
hsl(200, 55%, 75%)（l+20% 且s−15%，增灰度降干扰）
如何用 CSS 自定义属性动态管理整套色阶？
把基准色存为变量，再用 hsl(from ...) 相对计算，避免硬编码数值：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
:root {
--md-primary-h: 200;
--md-primary-s: 70%;
--md-primary-l: 55%;
<p>--md-primary: hsl(var(--md-primary-h), var(--md-primary-s), var(--md-primary-l));
--md-primary-dark: hsl(from var(--md-primary) h s calc(l - 25));
--md-primary-light: hsl(from var(--md-primary) h s calc(l + 15));
--md-primary-hover: hsl(from var(--md-primary) h s calc(l + 8));
--md-primary-disabled: hsl(from var(--md-primary) calc(h) calc(s - 15%) calc(l + 20));
}这样换主题时只需改三行变量，整套色阶自动重算，from 语法兼容 Chrome 111+、Firefox 111+、Safari 16.4+，旧版需 fallback。
强调色（Accent）和互补色怎么生成？
Material Design 强调色通常来自另一色相（如绿色），不是主色的简单明度变化。用 hsl(from ...) 可直接派生：
-
互补色（Secondary）：色相 ±180°，
--md-secondary: hsl(from var(--md-primary) calc(h + 180) s l); -
强调色（Tertiary）：选固定色相（如
140度青绿），再按主色逻辑调明度：--md-accent: hsl(140, 65%, 50%);，然后衍生--md-accent-light和--md-accent-dark -
注意：强调色不能直接用
from var(--md-primary)计算，否则会继承错误的色相基底
真正麻烦的是深色模式下的亮度反向映射——l: 30% 在浅色模式是深色，在深色模式可能变成过亮；这时得用 @media (prefers-color-scheme: dark) 单独重定义变量，而不是靠单一公式推导。
