Material Design Colors Reference

Material Design colors are the official color palette published by Google as part of the Material Design system. They are organized into 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 and Blue Grey.

Each family is broken into shades from 50 (lightest) to 900 (darkest), with most families also including accent shades labelled A100, A200, A400 and A700.

The numbers represent lightness weights within a single hue family. 50 is the lightest tint and 900 is the darkest shade, with 500 acting as the baseline or default version of that color.

In practice, designers use 50–200 for backgrounds and surfaces, 300–600 for primary UI and brand elements, and 700–900 for text, active states and emphasis.

Primary shades (50 through 900) are the structural backbone of your interface. They are calibrated to layer well — for example, a 100 background under 700 text — and to feel calm enough for large surface areas.

Accent shades (A100, A200, A400, A700) are deliberately brighter and more saturated. They are intended for small, attention-grabbing elements such as floating action buttons, sliders, switches and key call-to-action links.

Yes. The Material Design color system is published by Google as part of an open design language and is free to use in personal and commercial work without special licensing.

You should still avoid copying Google product branding directly, and you should verify that the specific color combinations you choose meet your accessibility and trademark obligations.

For solid-color buttons, start with the 500 shade of your chosen family — that is the Material Design default. If you need a hover or pressed state, step down to 600 or 700 for a darker, more saturated feel, or step up to 300 or 400 for a softer state.

For text, use white or a very light shade on backgrounds in the 500–900 range, and use dark text (typically a high-weight grey or black) on the 50–400 range. Always confirm the final pair clears WCAG contrast minimums.

Material Design 2 ships a fixed, hand-curated palette of 19 hue families with shades 50–900 and accent tiers. The values on this page reflect that system, which is still widely used in Android XML resources, Material UI v4/v5 and many established design tokens.

Material You (Material 3) replaces the static palette with dynamic color schemes generated from a source color or wallpaper, expressed in tonal palettes from 0 to 100. The two systems can coexist, but the HEX values and shade names are not interchangeable.

Yes. Click any swatch to copy its HEX code, or open the per-color detail view to grab a full set of CSS custom properties for that family.

You can paste the variables straight into a :root block, a Sass map, a Tailwind config or an Android colors.xml file, depending on the platform you are styling.