Material Color Generator
Complete Material Design color palette reference. All 19 color families with shades 50-900 — click any swatch to copy its HEX code.
What Is the Material Design Color Palette?
The Material Design color palette is Google's curated color system used across Android, Material UI, Google products and millions of third-party apps. It includes 19 color families — red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, gray, blue-gray — each with 10 shades from 50 (lightest) to 900 (darkest).
How to Use This Reference
Browse all 19 families. Click any swatch to copy its HEX value. Use "Copy CSS Variables" to get the entire palette as CSS custom properties for use outside of Material UI.
Material 3 vs Material 2
The 50-900 shade palette comes from Material Design 1 and 2. Material Design 3 introduces a new "tonal palette" system based on HCT color space, with roles like Primary, Primary Container, Surface, etc. This page documents the classic 50-900 palette, which is still widely used and supported.