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'
}工具说明
什么是 Material Design 色板？
Material Design 3（Material You）是 Google 推出的新一代设计系统，其色彩系统基于动态配色方案，可从壁纸中提取主色生成个性化主题。本工具提供 MD3 官方色板参考，帮助你在设计与开发中快速查找、复制并落地主题色。
色系说明
Primary（主色）
用于关键 UI 元素与核心强调，如主按钮、进度与高亮状态。
Secondary（次色）
用于次要强调与辅助组件，如芯片、次按钮、分隔与提示。
Tertiary（第三色）
用于平衡主/次色并制造差异化，常用于点缀或特殊强调。
色调级别说明
- 10-30：偏浅色调，常用于深色内容或浅色背景的层次区分
- 40：常用于悬停/按下等交互状态
- 50-70：中间色调，适用于常规 UI 元素与大面积配色
- 80-90：偏深色调，常用于浅色内容或深色背景的对比表现
如何使用本工具
1
浏览各个色系的 10-90 色调色块
2
点击任意色块复制对应的 HEX 颜色值
3
点击“复制全部”复制整个色系的配置代码
4
将色值应用到 Android / Flutter / Web 的主题与组件样式中
5
按设计规范选择合适的色调级别，保证对比度与一致性
常见问题（FAQ）
这些颜色可以直接用于生产环境吗？
可以。本工具提供的色值来自 Material Design 3 规范，可用于 Android、Flutter 与 Web 的 Material 组件与主题配置。
Material Design 3 与 Material Design 2 有什么区别？
MD3 更强调个性化与动态配色，引入更完整的色系与色调级别，并可从壁纸等来源生成主题色，从而提升一致性与可定制性。
如何在 Android 应用中使用这些颜色？
你可以将色值写入 resources 的 colors.xml，或在 Jetpack Compose 中定义 Color 常量并注入到 Material3 主题；Web/Flutter 也可用同一套色值做主题变量。