Material Design 配色生成器

根据 Material Design 规范自动生成配色方案

Material 2Material 3 (Material You)
紫色
靛青
蓝色
青色
绿色
琥珀
橙色
红色
粉色
深紫

Primary

Primary
#6200EE
On Primary
#FFFFFF
Primary Container
#c9a3ff
On Primary Container
#1a003d

Secondary

Secondary
#d519e6
On Secondary
#FFFFFF
Secondary Container
#f2baf7
On Secondary Container
#400845

Tertiary

Tertiary
#ff1a9f
On Tertiary
#FFFFFF
Tertiary Container
#ffccea
On Tertiary Container
#66003b

Error

Error
#B3261E
On Error
#FFFFFF
Error Container
#F9DEDC
On Error Container
#410E0B

Surface & Outline

Surface
#FFFBFE
Surface Variant
#E7E0EC
Outline
#79747E
Outline Variant
#CAC4D0

组件预览

Card Title

Card content goes here

Outlined Card

导出代码

:root {
  /* Primary */
  --md-primary: #6200EE;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #c9a3ff;
  --md-on-primary-container: #1a003d;

  /* Secondary */
  --md-secondary: #d519e6;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #f2baf7;
  --md-on-secondary-container: #400845;

  /* Tertiary */
  --md-tertiary: #ff1a9f;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #ffccea;
  --md-on-tertiary-container: #66003b;

  /* Error */
  --md-error: #B3261E;
  --md-on-error: #FFFFFF;
  --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;

  /* Surface */
  --md-surface: #FFFBFE;
  --md-surface-variant: #E7E0EC;
  --md-on-surface: #1C1B1F;
  --md-on-surface-variant: #49454F;

  /* Outline */
  --md-outline: #79747E;
  --md-outline-variant: #CAC4D0;

  /* Background */
  --md-background: #FFFBFE;
  --md-on-background: #1C1B1F;
}

更多推荐

颜色选择器
颜色格式转换器
配色方案生成器
色盲模拟器
品牌颜色查询
Pantone 色卡查询
CSS 颜色变量生成器
屏幕颜色拾取
颜色混合器
中间色计算器
颜色匹配度计算器
相反颜色计算器
中国传统色彩
日本传统色彩
Web安全色大全
渐变色大全

工具概述

Material Design 配色工具根据 Google Material Design 设计规范自动生成完整的配色方案。支持 Material Design 2 和 Material Design 3 (Material You) 两个版本，提供 CSS 变量和 MUI Theme 两种导出格式，帮助开发者快速构建符合 Material Design 规范的应用界面。

Material Design 2 vs Material Design 3

Material Design 2

Material Design 2 使用固定的颜色角色（Primary、Secondary、Error 等），每个颜色有 Light、Main、Dark 三个变体。适合需要明确色彩层级的传统应用设计。

Material Design 3 (Material You)

Material Design 3 引入了更灵活的色彩系统，每个颜色角色都有 Main、On、Container、OnContainer 四个变体，还新增了 Tertiary 颜色和 Outline。支持更个性化的配色方案，适合追求现代感的应用设计。

常见问题与回答

1. 什么是 Primary 和 Secondary 颜色？

Primary 是应用的主要品牌色，用于最重要的 UI 元素如按钮、活动状态等。Secondary 是辅助色，用于强调和区分次要元素。Material Design 3 还新增了 Tertiary 颜色，提供更多设计可能性。

2. 什么是 Container 颜色？

Container 是 Material Design 3 引入的概念，提供比主色更柔和的背景色变体。例如 Primary Container 用于需要主色调但不需要强烈视觉冲击的区域。

3. 如何选择深色还是浅色模式？

工具会根据您选择的主色自动判断。如果主色较深，生成的背景色会偏浅；如果主色较浅，背景色会保持白色系。Material Design 2 会自动调整文字颜色以保持可读性。

4. 如何在项目中使用？

如果您使用 MUI (Material-UI)，可以直接复制生成的 Theme 配置到项目中。对于其他项目，使用 CSS Variables 格式，然后在样式中通过 var(--md-primary) 引用。