material design色彩系统需用hsl(from)语义化生成，严格分基础/语义/场景三层变量，禁用态须同步降饱和度，深色模式应预设校准hex值，强调色与互补色需独立校验可访问性。
不能靠手调 HEX 或硬写一堆 --primary-300、--primary-500 变量来模拟 Material Design 的色彩层级——它本质是一套语义驱动、可计算、带约束的颜色生成系统，不是色值罗列。
为什么 hsl() + from 是唯一靠谱的起点
Material Design 色阶的核心逻辑是：同一色相（h）、锁定饱和度（s），仅调节明度（l）形成深浅分层。手动改 HEX 会偏色，比如 #2563eb → #1d4ed8 看似变暗，实际色相偏移约 3°、饱和度掉 8%，长期维护必然失衡。
hsl(from var(--md-primary) h s calc(l - 25)) 这种写法能真正锁死 h 和 s，只动 l，生成的色值天然属于同一视觉家族。且 from 语法在 Chrome 111+、Firefox 111+、Safari 16.4+ 已稳定支持；旧版需 fallback 到预计算的 HEX 值。
- 明度下限建议不低过 15%，否则文字可访问性（WCAG AA）难达标
- 明度上限卡在 92% 左右，再高容易发白、失去容器感
- 禁用态不要只调明度，要同步降饱和度（如
calc(s - 15%)）来增灰度、降视觉权重
必须拆开三层：基础色、语义色、场景色
很多人定义一个 --color-primary: #2563eb 就完事，结果按钮背景、标题文字、禁用输入框边框全用它——这直接破坏 Material 的分层逻辑。真正合规的做法是严格分离：
- 基础色只存原始值：
--md-primary-h: 200; --md-primary-s: 70%; --md-primary-l: 55% - 语义色绑定意图：
--md-sys-color-primary（主色）、--md-sys-color-on-primary（主色上文字） - 场景色锁定用途：
--md-sys-color-primary-container（主色容器）、--md-sys-color-inverse-on-surface（反色表面文本）
这三层不能合并。否则换主题时得全局搜索替换，且无法单独微调某处对比度——比如卡片容器色变浅了，但按钮悬停态还得保持足够按压反馈，就得独立控制。
深色模式下别信 hsl() 动态算值
@media (prefers-color-scheme: dark) 块里重定义变量时，常见错误是写 --md-sys-color-surface: hsl(from var(--md-sys-color-surface) h s calc(l - 40))。浏览器对 hsl() 在深色上下文中的渲染不一致，尤其在 Safari 16.4 之前，明度计算可能失效或偏灰。
正确做法是为深色模式单独提供一套经过校准的 RGB/HEX 值：
/* 深色模式 */
@media (prefers-color-scheme: dark) {
:root {
--md-sys-color-surface: #191c1b;
--md-sys-color-on-surface: #e1e3df;
--md-sys-color-primary: #84e1d4;
--md-sys-color-primary-container: #004d44;
}
}
测试时务必关掉系统“减少动画”和“增加对比度”设置，它们会干扰 prefers-color-scheme 的触发，导致你以为变量没生效。
强调色和互补色不能从主色简单派生
Material Design 的强调色（Accent）不是主色的明度变体，而是另一独立色相，通常来自绿色系或黄色系。互补色（Secondary）也非固定 ±180°，而需兼顾可访问性与品牌调性。
用 hsl(from) 派生是可行的，但要注意约束：
- 互补色可用：
--md-sys-color-secondary: hsl(from var(--md-sys-color-primary) calc(h + 180) s l)，但需人工校验对比度是否 ≥ 4.5:1 - 强调色建议另设基准：
--md-sys-color-secondary: hsl(140, 60%, 50%)，再基于它生成自己的明度层级 - 所有派生色必须走
color-mix(in srgb, ...)或 oklch() 校验，不能只靠眼睛看
真正难的不是写出那几行 CSS 变量，而是守住分层边界：设计师改一个 --md-primary-h，前端得立刻知道哪些容器色、文本色、禁用态会连锁变化，哪些必须手动微调以保对比度——这个边界一旦模糊，整套系统就退化成一堆魔法数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
