What is Material Design Color Picker?

Material Design Color Picker provides the complete Material Design color palette with all primary colors and their shade variants (50 to 900). Click any swatch to copy its value in HEX, RGB, or HSL, then check accessibility with the built-in WCAG contrast tool.

The palette covers all 19 primary hues (Red through Brown) with shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 plus accent shades A100, A200, A400, A700 where Google defines them. Each swatch shows the exact HEX, and the selected colours panel lets you build a project palette and copy or download it as a list.

How to use

1. Browse the color grid showing all Material Design primary colors — Red, Pink, Purple, Deep Purple, Indigo, Blue, and more.
2. Click a primary color to expand its shade variants from lightest (50) to darkest (900), including accent shades (A100–A700).
3. Click any shade to copy its value in your chosen format (HEX, RGB, or HSL), add shades to the Selected Colors panel, then download the palette as CSS, SCSS, a Tailwind config, or JSON for your project.

When to use

• Picking a primary, lighter container, and darker hover variant from the same hue.
• Matching an Android or Flutter UI to Google's reference palette without guessing HEX values.
• Building a consistent palette for a slide deck or marketing asset.

Result

You're building a dashboard and need the exact Material Design 'Indigo 500' (#3F51B5) for your primary button color and 'Indigo 50' (#E8EAF6) for the hover background.

FAQ

What's the difference between primary shades and accent (A) shades?

Primary shades (50–900) are tonal variations of one hue used for backgrounds, surfaces, and text. Accent shades (A100–A700) are higher-saturation versions Google reserves for call-to-action elements like buttons and badges.

Why don't all colours have accent shades?

Brown and Grey are intentionally desaturated, so Google never defined accent variants for them. The picker reflects the original Material spec rather than inventing accents that were never part of it.

Which shade is the default body-text colour?

Material's guidance pairs Grey 900 with light backgrounds and Grey 50 or White with dark backgrounds. Mid shades (500–600) work for secondary text or icons that need lower contrast.

Are these the same as Material 3 (Material You) colours?

No. This palette is the original Material Design colour system Google published in 2014. Material 3 introduced dynamic tonal palettes derived from a source colour, which is a separate algorithm.

How do I check the contrast ratio between two shades?

Add both shades to the Selected Colors panel, then scroll to the Contrast Checker. Pick one as the foreground and one as the background, and the panel shows the WCAG ratio with AA and AAA pass/fail badges for normal and large text.

Related Tools