什么是Material Design 取色器？

Material Design 取色器提供完整的 Material Design 调色板，涵盖所有主色及其色阶变体（50 至 900）。点击任意色块即可按 HEX、RGB 或 HSL 复制色值，并用内置的 WCAG 对比度工具检查可访问性。

调色板涵盖 19 个主色(红色到棕色),每个主色都有 50、100、200、300、400、500、600、700、800、900 共 10 个色阶,Google 定义了强调色的还附带 A100、A200、A400、A700。每个色块都显示精确的 HEX 代码,已选颜色面板能让你拼出一套项目专用配色,直接复制或下载。

使用方法

1. 浏览展示所有 Material Design 主色的色板——红色、粉色、紫色、深紫、靛蓝、蓝色等。
2. 点击任一主色展开从最浅（50）到最深（900）的色阶变体，以及强调色阶（A100–A700）。
3. 点击任意色阶按所选格式（HEX、RGB 或 HSL）复制色值，把它们加入“已选颜色”，再以 CSS、SCSS、Tailwind 配置或 JSON 下载到项目里。

何时使用

• 在同一主色里挑选主色调、浅一档的容器色和深一档的悬停色。
• 做 Android 或 Flutter 界面时,直接对齐 Google 官方参考色,不用自己猜 HEX。
• 为幻灯片或营销素材搭一套统一的配色。

结果

您正在构建一个仪表盘，需要精确的 Material Design Indigo 500（#3F51B5）作为主按钮颜色，以及 Indigo 50（#E8EAF6）作为悬停背景色。

常见问题

主色阶和强调色(A 系列)有什么区别?

主色阶(50–900)是同一色相的明暗变化,用于背景、表面和文字。强调色(A100–A700)饱和度更高,Google 建议留给按钮、徽章这类需要吸引注意的元素。

为什么有些颜色没有强调色?

棕色和灰色在设计上就是低饱和度,所以 Google 没有为它们定义强调色变体。本工具忠实于原始规范,不会自己编造 Google 从未发布过的色值。

正文文字应该用哪个色阶?

Material 规范推荐浅色背景配 Grey 900,深色背景配 Grey 50 或白色。中间色阶(500–600)适合次要文字或对比要求较低的图标。

这些颜色和 Material 3(Material You)的颜色一样吗?

不一样。本工具用的是 Google 2014 年发布的原始 Material Design 配色系统。Material 3 改用从单一种子色生成动态色阶的算法,是另一套体系。

怎么判断两个色阶之间的对比度够不够?

把这两个色阶都加到“已选颜色”面板，然后滚动到对比度检查器。选一个作为前景色，另一个作为背景色，面板会立即显示 WCAG 对比度，并标出正文和大字在 AA、AAA 级别下的通过情况。

相关工具