Material Design Palette
Browse Google's 2014 Material Design color palette with accent colors.
The full Material Design 2014 palette — 19 color families with shades 50 through 900 plus the A100/A200/A400/A700 accent colors. Click any swatch to copy the hex. A go-to reference for Android, Material Web and any retro Material UI work.
Common use cases
- Pick swatches for an Android Material 2 theme.xml
- Match an existing Material UI color token in code
- Reference accent A100–A700 colors for FABs and chips
- Compare Material families against custom branding
Frequently asked questions
Is this Material 2 or Material 3?▾
It's the original Material Design 2014 palette (Material 2). Material 3 uses dynamic, generated palettes per device — not a fixed swatch set.
Why don't brown, grey and blue-grey have accents?▾
Google's spec only defined accent A-series for the colorful families. Neutrals only have 50–900 steps.
What's the difference between 500 and A200?▾
500 is the family's standard tone. A-series accents are bright, saturated variants meant for emphasis like floating action buttons.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.