Material Design Colors
The full Material Design palette with hex & RGB.
The complete Material Design 2 color palette — all 19 families (red, pink, purple, indigo, blue, teal, green, amber, orange, brown, grey, blue-grey and more) across every shade from 50 to 900 — each with a live swatch, hex and RGB value. Search a name like blue-500, a hex like #f44336, or filter by family, and tap a swatch or value to copy it. Runs fully in your browser — no API.
How to use Material Design Colors
Open the palette
Launch this free Material Design colors tool to browse the full palette with live swatches.
Search a colour
Type a name like 'blue-500', a hex like '#f44336', or a family to filter instantly.
Filter by family
Use the family filter to see all shades (50–900) of one Material colour.
Read hex & RGB
Each colour shows its Material name plus the hex and RGB values.
Copy a value
Tap the swatch, hex or RGB to copy it for your Android, Flutter or web project.
Match a colour
Search a hex to find the closest Material colour, or a name to get its hex.
Frequently asked questions
What are Material Design colors?
Material Design is Google's design system, and it defines a standard colour palette of 19 families — like red, pink, indigo, blue, teal, green, amber and grey — each with shades from 50 (lightest) to 900 (darkest). They're widely used in Android, Flutter and Material UI apps.
What is the hex code for a Material color like blue-500?
Material blue-500 is #2196f3. Search this list for any Material colour name (like 'red-500' or 'teal-400') to see its exact hex and RGB, or search a hex to find the matching colour.
What do the shade numbers (50–900) mean?
The number is the lightness step: 50 is the lightest tint and 900 is the darkest shade of that colour, with 500 as the primary. Some families also have accent shades (A100–A700).
How are Material colors different from Tailwind colors?
They're two separate palettes with different hex values and shade scales — Material uses 50–900 (plus accents), while Tailwind uses 50–950. Use Material for Material Design / Android apps and Tailwind for Tailwind CSS projects.
Is this Material colors tool free?
Yes — it's completely free with no sign-up. The full palette runs in your browser, so there are no limits, no API keys and nothing is uploaded.
What is the hex code for Material red-500 or green-500?
Material red-500 is #f44336 and green-500 is #4caf50. Search any Material colour name in the list to see its exact hex and RGB, or paste a hex to find the closest matching Material colour.
How do I use Material colors in Flutter or Android?
In Flutter use the Colors class (e.g. Colors.blue[500]) and in Android use the material colour resources or the hex value directly. Copy the hex from this reference and drop it into your theme, XML or Dart code.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.