Material Design Color Chart
The complete official Material palette — 19 hues, steps 50–900 plus accents where defined, 254 swatches. Click to copy HEX; hover for step and HEX on desktop.
Black & white
Red
Accents
Click a row to copy HEX
Pink
Accents
Click a row to copy HEX
Purple
Accents
Click a row to copy HEX
Deep Purple
Accents
Click a row to copy HEX
Indigo
Accents
Click a row to copy HEX
Blue
Accents
Click a row to copy HEX
Light Blue
Accents
Click a row to copy HEX
Cyan
Accents
Click a row to copy HEX
Teal
Accents
Click a row to copy HEX
Green
Accents
Click a row to copy HEX
Light Green
Accents
Click a row to copy HEX
Lime
Accents
Click a row to copy HEX
Yellow
Accents
Click a row to copy HEX
Amber
Accents
Click a row to copy HEX
Orange
Accents
Click a row to copy HEX
Deep Orange
Accents
Click a row to copy HEX
Brown
Click a row to copy HEX
Grey
Click a row to copy HEX
Blue Grey
Click a row to copy HEX
About the Material Design color chart
A Material Design color chart is the fastest way to pick colors from Google's classic palette without digging through documentation. Every swatch on this page matches the official MDC values — the same HEX behind themes in Material UI, Angular Material, and many Android design specs.
Use lighter main steps (50–200) for backgrounds; mid steps (400–600) for primary actions and key UI; darker steps (700–900) for text and emphasis. Accent steps (A100–A700) add punch for FABs, toggles, and secondary highlights. Neutral families — brown, grey, and blue grey — cover earthy and monochrome UI without accent ramps.
Browse more reference palettes on the Color Charts hub, including the Tailwind CSS color chart.
Frequently asked questions
What are Material Design colors?
50 (lightest) to 900 (darkest), plus up to four accent steps (A100–A700) for highlights and secondary actions.How do I copy a Material Design color?
Are these the official Material Design colors?
What is the difference between main steps and accent steps?
50–900) form the primary color ramp for backgrounds, surfaces, and primary UI. Accent steps (A100, A200, A400, A700) are brighter, more saturated variants for FABs, selection states, and emphasis.