跳到主要内容

Material Design 颜色：含强调色的完整调色板

Google 经典 Material Design 调色板：19 种颜色，色阶 50 到 900，以及 A100 到 A700 强调色。以 HEX、RGB、HSL、OKLCH 或 MUI 名称复制每种颜色。

查看 UI 颜色
复制为

每种颜色的数值

选择一种颜色，查看它的所有色阶，包括 MUI 名称、HEX、RGB、OKLCH 以及对比最佳的文字颜色。

Blue

色阶MUIHEXRGBOKLCH文字
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

什么是 Material Design，它的调色板如何组织

Material Design 是 Google 于 2014 年推出的设计系统，用于统一其产品和 Android。其调色板包含 19 种颜色，每种有十个色阶，编号从 50（最浅）到 900（最深）。

与其他色阶不同的是强调色：A100、A200、A400 和 A700，是每种颜色更饱和的版本，用于按钮、开关等需要突出的元素。Brown、Grey 和 Blue Grey 没有强调色。

如何搭配主色和强调色

Material 最初的规范建议选择一种主色，在顶栏等最显眼的表面使用其 500 色阶，在状态栏使用 700。浅色色阶（50–200）用于背景和次要元素。

强调色选择另一个色系中的 A 色阶，通常是 A200：这样主操作按钮就能从其他元素中脱颖而出。经典搭配是 Indigo 配 Pink 强调色。

Material Design 2 与 Material 3：两套色彩系统

本表收录的是经典 Material Design 调色板（第 1 和第 2 版）。Material 3（也称 Material You）使用不同的系统。

Material Design 2（本调色板）

  • 19 种固定颜色，色阶 50–900，强调色 A100–A700。
  • 数值始终不变，因此可以直接从表格复制。
  • MUI（@mui/material/colors）和许多模板都包含这套调色板。

Material 3（Material You）

  • 调色板由一种基色生成，包含从 0（黑）到 100（白）的 13 个色调。
  • 在 Android 12 及以上版本中，基色可以取自壁纸（动态取色）。
  • 主题按角色组织：primary、secondary、tertiary、neutral 和 neutral variant。

如何在项目中使用 Material 颜色

如果你使用 MUI（React），颜色已内置，按色系导入即可。在其他项目中，从表格复制 HEX 并保存为 CSS 变量。

MUI（React）

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

常见问题

它们是每种颜色更饱和的变体，用于需要突出的元素，如按钮、链接或激活的图标；而主色阶（50 到 900）用于背景和表面。

最初的规范建议在顶栏等主要表面使用 500，状态栏使用 700，主操作按钮使用另一个色系的强调色（通常是 A200）。

两者都使用从浅到深的编号色阶，但 Material Design 增加了 Tailwind 没有的强调色阶（A100 到 A700）。此外，两套系统中各色系的名称和具体数值也不同。

这是经典的 Material Design 调色板。较新的版本（Material You）引入了由基色生成的动态调色板，但这套色阶仍被广泛使用，并与直接引用它的项目兼容。

MUI 包含同一套调色板。从 @mui/material/colors 导入色系，并用色阶作为索引：indigo[500] 或 pink.A200。在“复制为”中选择“MUI”即可直接复制该名称。

官方调色板没有定义。它们是用于背景、文字和次要元素的中性色或低饱和色，不用于突出。如果需要强调色，请搭配其他色系。

可以。在“复制为”中可以选择 HEX、RGB、HSL、OKLCH 或 MUI 名称，每种颜色的表格也会同时显示所有格式。