Browse the Google Material Design 2 official palette — 254 colors in total. Copy HEX/RGB/HSL with one click.
💡 License
Material Design colors are released under Apache 2.0 License — free for commercial and non-commercial use. Reference:
Material Design colors are released under Apache 2.0 License — free for commercial and non-commercial use. Reference:
material.io/design/color
About Material Design shades
Each color has shades 50 (lightest) → 900 (darkest), plus optional A100·A200·A400·A700 accent shades (higher saturation). 500 is the primary, 700 is for pressed/active states, 50-100 for backgrounds. Accent colors are used for FAB buttons, toggles, and emphasis. Grey, Brown, and Blue Grey have no Accent shades.
FAQ
Material 2 vs Material You (3)?
This tool shows M2 fixed palette. Material You (M3) generates colors dynamically from device wallpaper, so it has no fixed palette.
When to use Accent colors?
For CTAs, FABs, toggles — small accent areas. Avoid as page backgrounds.
Which shade for primary?
Most brands use 500 as primary, 700 as hover/pressed, 100-200 as light backgrounds. Dark mode often uses 200-300 as primary.
Commercial use?
Yes, Apache 2.0 — free for commercial products.