Material Design 色彩调色板

19 个颜色家族，包含 HEX 代码、CSS 变量和对比度检查。点击任何颜色即可复制。

下载 CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
白色文字 {{ whiteContrast.toFixed(1) }}:1
黑色文字 {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

什么是 Material Design 颜色系统？

Google 的 Material Design 颜色系统包含 19 个颜色家族，每个家族有 10 个主色调（50、1〜900）和最多 4 个强调色调（A100〜A700）。它为网站和应用提供了一致的颜色语言。

如何在 CSS 中使用 Material Design 颜色？

下载包含所有变量的 CSS 文件并将其包含在项目中。然后通过 CSS 自定义属性使用颜色，如 var(--color-md-teal-500)。也可以直接使用 HEX 代码。

颜色选择技巧

  • 选择一个主色（例如 Teal 500）和另一个家族的强调色。
  • 使用较浅的色调（50–200）作为背景，较深的色调（700–900）作为文本。
  • 确保文本和背景之间有足够的对比度（至少 4.5:1）以保证可访问性。
  • 500 色调是每个颜色家族的标准表示，非常适合作为主色。