Material Design Colors

What this tool does

This is a full, browsable reference for the Material Design 2 color palette. It presents all 19 standard families — Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey and Blue Grey — as rows of shade swatches. Every family shows its primary scale from 50 to 900, and the sixteen non-neutral families also include the bright accent shades A100, A200, A400 and A700. Each swatch displays its step label and hex value, and a click copies it. A format toggle switches what gets copied between the hex value, the Material token name such as Blue 500, and a CSS rgb() string. The whole palette is bundled and resolved in your browser.

Use cases

Material’s palette is the backbone of countless Android apps, Flutter projects and web component libraries, so quick access to its exact values saves real time. App developers can grab a hex or token name that matches their theme without digging through framework source. Web designers porting a Material mockup into CSS can copy rgb() strings straight into custom properties. For branding, the 50–900 ramp gives a ready ladder of tints and shades around a chosen 500, while the A-accents supply a coordinated highlight color for buttons and badges. Accessibility auditors can lift hex pairs into a contrast checker to confirm body text and surfaces meet WCAG thresholds. Illustrators and data-visualisation authors get a well-tested categorical palette — the 500 shades across families read as distinct, balanced hues that work well for chart series and iconography.

How to use it

1. Pick a copy format with the toggle — HEX for raw values, Name for Material token names, or rgb() for CSS color strings.
2. Scroll to the family you need. Each family is a labelled row, with the primary 50–900 scale followed by any A100–A700 accents.
3. Click a swatch to copy its value, or use the small copy button beneath each swatch for the same result.
4. Paste the value into your code, stylesheet or design tool. Change the format and copy again whenever you need a different representation.

Tips

Use the primary scale for surfaces and text and reserve the A-accents for small, attention-grabbing elements — a full background in A400 is usually too loud. The neutral families pair naturally with any hue: Grey for clean modern surfaces and Blue Grey when you want a slightly cooler, more architectural feel. Material’s classic guidance pairs a 500 as the primary with the 700 for darker states such as a pressed button, and the 100 for light backgrounds. Always confirm contrast: a 500 on white frequently fails WCAG AA for small text, so step down to 700 or 800 for body copy. When you only need one value outside a Material toolchain, the rgb() form drops cleanly into custom properties and gradients.

Related techniques

After choosing a base color here, a palette generator can build harmony schemes around it, and a tints-and-shades tool extends a single hue into a custom ramp similar to Material’s 50–900 scale. A color name finder maps an arbitrary hex to the nearest familiar name. If your stack uses Tailwind instead, the Tailwind color reference offers the same browse-and-copy workflow for that palette. Whenever a color combination carries text, finish by running it through a WCAG contrast checker so the result is not just attractive but legible.