Material Design Colors

Ten standard steps from 50 to 900, plus four accents named A100, A200, A400, and A700 on the hues that have them. That gives up to 14 swatches per hue, all clickable.

The long-standing pattern is the 500 shade for colorPrimary, the 700 of the same hue for colorPrimaryDark, and an A200 accent from a contrasting hue for colorAccent. Indigo 500, indigo 700, and pink A200 is the combination Android Studio shipped as its template for years.

It's the official 2014 Material Design value set, not a generated approximation. A material color generator in the Material 3 sense derives fresh tonal palettes from a seed color; this tool gives you the fixed, documented hexes that older apps and component libraries still reference.

Google never published accent variants for brown, grey, or blue grey because accents are meant to pop, and muted hues can't. The tool renders those cells empty rather than fabricating values that don't exist in the spec.

Yes, in two ways. Any hex here works as a seed color for Material 3's dynamic scheme generation, and plenty of production apps still hard-code these classics alongside newer role-based tokens. As a material palette tool it stays relevant as long as those apps do.

It matches the classic palette page that defined values like blue 500 as #2196F3. Material 3 documentation now centers on tonal palettes and roles instead of fixed swatch tables, but the underlying 2014 hexes remain unchanged wherever they're referenced.

The 500 column is the balanced workhorse tone meant for large surfaces and app bars. A-series swatches are more saturated and brighter, tuned for small doses of emphasis like FABs, switches, and selection highlights. Using an accent as a background usually reads as glaring.

It lists the classics. The material color palette generator here is really a browsable material color palette of the 2014 values, so each hex is the documented one rather than a tone derived from a seed.

A Material 3 tool spins fresh tonal palettes from one seed color. This material palette generator hands you the fixed material palette that older apps and component libraries still hard-code, so the values never drift between visits.

Yes. Click any square and its hex copies with a toast, so the grid works as a material ui color picker for grabbing a colorPrimary or an accent value. It beats hunting the numbers in documentation.

Read each hue row as a scheme on its own: the 500 as the main tone, 700 for depth, and an A-series swatch for emphasis. Pairing two hue rows gives you material design color schemes without leaving the grid.