首页Material Design色板

Material Design色板

Material Design 3（MD3）官方色板参考工具，支持一键复制HEX与整组配置代码

Material Design 色板（MD3）

按色系与10-90色调展示，点击色块复制 HEX，可一键复制整组配置代码

Primary（主色）

Primary

10
20
25
30
40
50
60
70
80
90
Primary: {
  '10': '#D0BCFF',
  '20': '#AAA7FF',
  '25': '#9F9AF8',
  '30': '#8F87FB',
  '40': '#7C73EA',
  '50': '#6750A4',
  '60': '#553F93',
  '70': '#442A7E',
  '80': '#331C6A',
  '90': '#21005D'
}

Secondary（次色）

Secondary

10
20
25
30
40
50
60
70
80
90
Secondary: {
  '10': '#E8DEF8',
  '20': '#D0BCFF',
  '25': '#C4B3FD',
  '30': '#B69DF8',
  '40': '#9E88F6',
  '50': '#6D6280',
  '60': '#4A4458',
  '70': '#332D41',
  '80': '#1D192B',
  '90': '#141218'
}

Tertiary（第三色）

Tertiary

10
20
25
30
40
50
60
70
80
90
Tertiary: {
  '10': '#FFD8E4',
  '20': '#F2B8D5',
  '25': '#E7A6CC',
  '30': '#E391BC',
  '40': '#D96FA9',
  '50': '#7D5260',
  '60': '#5E3F4A',
  '70': '#4A2D38',
  '80': '#351826',
  '90': '#1B1118'
}

Error（错误色）

Error

10
20
25
30
40
50
60
70
80
90
Error: {
  '10': '#F9DEDC',
  '20': '#F8D7DA',
  '25': '#F5C2C7',
  '30': '#EFA9A9',
  '40': '#E69393',
  '50': '#B3261E',
  '60': '#8C1D18',
  '70': '#601410',
  '80': '#410E0B',
  '90': '#1C0B0A'
}

Neutral（中性色）

Neutral

10
20
25
30
40
50
60
70
80
90
Neutral: {
  '10': '#E7E0EC',
  '20': '#CAC4D0',
  '25': '#C4C7C5',
  '30': '#79747E',
  '40': '#625B71',
  '50': '#49454F',
  '60': '#1D1B20',
  '70': '#141218',
  '80': '#0F0D13',
  '90': '#0B0A0D'
}

Neutral Variant（中性变体）

Neutral Variant

10
20
25
30
40
50
60
70
80
90
'Neutral Variant': {
  '10': '#E7E0EC',
  '20': '#D0BCFF',
  '25': '#CCC2DC',
  '30': '#B69DF8',
  '40': '#9E88F6',
  '50': '#625B71',
  '60': '#4A4458',
  '70': '#332D41',
  '80': '#1D192B',
  '90': '#141218'
}

相关工具

调色板生成器
图片配色方案提取
Tailwind色板生成器
色彩命名
颜色选择器/转换器
RGB颜色对照表
随机颜色生成器
色盲模拟器

说明文档

工具简介

Material Design 色板工具提供 MD3 官方色系参考，支持查看不同色系的 50-900 色阶，并可一键复制单个色值或整组配置代码。

核心功能

  • 内置多组 Material Design 常用色系。
  • 每组色系提供完整 tone（50-900）色阶预览。
  • 点击色块即可复制 HEX，方便快速取色。
  • 支持复制整组 JS 对象配置，用于主题开发。

使用步骤

  1. 浏览色系卡片并选择目标色。
  2. 点击任意色阶色块复制 HEX。
  3. 点击“复制整组”获取完整色板代码。
  4. 粘贴到项目主题配置或设计规范文档。

适用场景

  • 设计系统与品牌主题色建立。
  • Web、Android、Flutter 等多端主题开发。
  • 组件库 token 维护与色板对齐。
  • 设计交付中的颜色标注与沟通。

常见问题

tone 数值越小或越大代表什么？

通常 tone 越小颜色越浅，tone 越大颜色越深，可用于不同层级的背景、边框和文本。

如何选择主色和辅助色？

建议先确定主色系，再搭配中性色和强调色，保证对比度与可读性。

隐私说明

色板数据与复制操作均在本地完成，不会上传你的使用内容。

数据默认在您的本地浏览器上处理，不会上传至服务器。如需上传会明确提示。

© 2026 See-Tool. 保留所有权利。 | 联系站长