Free Online Material Design Colors Tool

The Material Design color palette is Google's 2014 system of 19 hue families and 10 shades each (50–900), widely used across Android and web.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed

Click any swatch to copy its hex code. 19 hues × 10 shades = 190 colors.

Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Gray
Blue Gray

How to Use This Tool

  1. Scroll the grid by hue family.
  2. Hover any swatch to see its name and shade number.
  3. Click any swatch to copy its hex to your clipboard.
  4. Use 500 as the canonical brand color, 50–200 for backgrounds, and 700–900 for text on light surfaces.

What Is a Material Design Colors?

Material Design's 2014 palette was published alongside the original Material spec for Android Lollipop. It defines 19 hue families — Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey — each with 10 shades from 50 (lightest tint) through 500 (canonical base) to 900 (darkest). Many hues also have A100–A700 accent colors for emphasis on top of the base palette.

Mobile developers reach for it because Android's default theme is built on these values; web designers use it as a starting point for theming non-Material frameworks; product teams reference it when porting a Material app to web or desktop.

The palette is colorimetrically tuned — neighbouring shades are perceptually evenly spaced — so it still holds up as a credible default years after publication. Click any swatch to copy.

Frequently Asked Questions

Which Material palette is this?
The original Material Design 2014 palette — the one most teams still use day-to-day. Newer Material You uses dynamic theming and is less of a static reference.
What are the shade numbers?
50 is the lightest tint; 500 is the canonical base color; 900 is the darkest shade. A100–A700 (where present) are 'accent' colors meant for emphasis.
Can I use these in any design tool?
Yes — they're plain hex codes. Click a swatch to copy and paste into Figma, Sketch, CSS, or anywhere else.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Tailwind Color Palette

Browse the full Tailwind CSS v4 color palette — 22 hues × 11 shades. Click any swatch to copy the hex code.

Flat UI Colors

Browse the original Flat UI color palette — curated, named flat-design colors with hex codes. Click to copy.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.

Color Shades Generator

Generate 10 shades, 10 tints and 10 tones of any color. Build a Tailwind-style 50–950 scale from a single seed.

Color Contrast Checker

Check WCAG contrast between two colors. See AA and AAA pass/fail results for both normal and large text instantly.