Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
Material Design色板 - MD3官方颜色参考
Material Design 3官方色板参考工具，包含Primary、Secondary、Tertiary等核心色系。一键复制颜色代码，快速构建Material Design风格应用。
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
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
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'
}# 什么是Material Design色板？
Material Design 3（Material You）是Google推出的最新设计系统，其色彩系统基于动态色彩方案， 能够从用户的壁纸中提取颜色生成个性化主题。MD3色板包含三个核心色系：Primary（主色）、Secondary（次色）、Tertiary（第三色）， 每个色系都有从10到90的不同色调级别，为设计师提供完整的色彩参考。
# 色系说明
- Primary（主色）: 应用的主要颜色，用于关键UI元素，如按钮、滑块等
- Secondary（次色）: 辅助颜色，用于较少强调的组件，如FAB、筛选芯片等
- Tertiary（第三色）: 用于平衡主色和次色，创造独特的视觉效果，常用于强调元素
# 色调级别说明
- 10-30: 极浅色调，用于主色调背景上的文字和图标
- 40: 用于主色调上的悬停状态
- 50-70: 中等色调，50为基准色，用于常规UI元素
- 80-90: 深色调，用于主色调背景上的文字和图标
# 如何使用本工具
- 浏览Material Design 3的三个核心色系
- 点击任意色块可复制该颜色的十六进制值
- 点击"复制全部"可复制整个色系的配置代码
- 将颜色代码应用到您的Android应用、Web应用或设计项目中
- 参考Material Design 3规范正确使用不同色调级别
# 常见问题 (FAQ)
这些颜色可以直接用于生产环境吗？
完全可以。本工具提供的颜色值来自Material Design 3官方规范，与Android系统、Flutter、Web等平台的Material组件库完全兼容。 您可以直接使用这些颜色值，确保应用符合Material Design设计规范。
Material Design 3与Material Design 2有什么区别？
Material Design 3（Material You）相比MD2更加注重个性化和动态色彩。MD3的色板系统更加丰富， 引入了Tertiary色系，色调级别从原来的13个（A100-A700）变为10个（10-90）， 更符合现代设计需求。MD3还支持动态取色，能从壁纸自动生成配色方案。
如何在Android应用中使用这些颜色？
在Android项目中，您可以将这些颜色值添加到colors.xml文件中，或使用Material3主题（Theme.Material3.DynamicColors.*）。 对于Jetpack Compose，可以在Color.kt中定义这些颜色。对于Web项目，可以使用Material Design Web的CSS变量。