Material Design Color Palette
Material Design 3 (MD3) official palette reference with one-click HEX copy and full palette config export
Material Design Palette (MD3)
Browse color families and tones 10-90. Click a swatch to copy HEX, or copy the full palette config
Primary
Primary
Primary: {
'10': '#D0BCFF',
'20': '#AAA7FF',
'25': '#9F9AF8',
'30': '#8F87FB',
'40': '#7C73EA',
'50': '#6750A4',
'60': '#553F93',
'70': '#442A7E',
'80': '#331C6A',
'90': '#21005D'
}Secondary
Secondary
Secondary: {
'10': '#E8DEF8',
'20': '#D0BCFF',
'25': '#C4B3FD',
'30': '#B69DF8',
'40': '#9E88F6',
'50': '#6D6280',
'60': '#4A4458',
'70': '#332D41',
'80': '#1D192B',
'90': '#141218'
}Tertiary
Tertiary
Tertiary: {
'10': '#FFD8E4',
'20': '#F2B8D5',
'25': '#E7A6CC',
'30': '#E391BC',
'40': '#D96FA9',
'50': '#7D5260',
'60': '#5E3F4A',
'70': '#4A2D38',
'80': '#351826',
'90': '#1B1118'
}Error
Error
Error: {
'10': '#F9DEDC',
'20': '#F8D7DA',
'25': '#F5C2C7',
'30': '#EFA9A9',
'40': '#E69393',
'50': '#B3261E',
'60': '#8C1D18',
'70': '#601410',
'80': '#410E0B',
'90': '#1C0B0A'
}Neutral
Neutral
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
'Neutral Variant': {
'10': '#E7E0EC',
'20': '#D0BCFF',
'25': '#CCC2DC',
'30': '#B69DF8',
'40': '#9E88F6',
'50': '#625B71',
'60': '#4A4458',
'70': '#332D41',
'80': '#1D192B',
'90': '#141218'
}Documentation
What is the Material Design palette?
Material Design 3 (Material You) is Google's latest design system. Its color system supports dynamic color schemes that can be derived from wallpapers and applied as app themes. This tool provides an MD3 palette reference so you can quickly find, copy, and apply theme colors in design and development workflows.
Color families
Tone levels
- 10-30: lighter tones for layering and subtle surfaces
- 40: commonly used for hover/pressed interaction states
- 50-70: mid tones for general UI elements and larger areas
- 80-90: deeper tones for contrast on light content or dark surfaces
How to use
Browse tones 10-90 for each palette
Click any swatch to copy its HEX value
Use “Copy palette” to copy the full config block
Apply the values to Android / Flutter / Web themes and components
Pick tone levels based on contrast and consistency needs