Material Design Color Reference

The Material Design color palette reference shows nineteen Material families — red, deep purple, light blue, lime, brown and the rest — each as an eleven-step ramp with the base hex and every step value.

What is Material Design Color Reference?

Nineteen families are laid out one block each: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, gray and blue-gray. Every block carries eleven tiles labelled 50 through 950 with the hex printed under each swatch, and the hyphenated names are kept as the framework writes them, so searching for light-blue finds the same family the framework does.

• Each family is anchored on Material's own base colour: the red at #f44336, the blue at #2196f3, the teal at #009688, the amber at #ffc107.
• Those are the published values for the five hundred step, and they are the part of this page that can be used verbatim in a project.
• The nineteen of them together give a good sense of the system's temperament — heavy on the cool half of the wheel, with three neutrals at the end for surfaces and text.

The numbered steps themselves are generated rather than sampled. Each is placed at a fixed lightness — 0.97 at the pale end down to 0.14 at the darkest — with the family's hue and chroma held constant through the ramp. So the preview has the right hue and a plausible progression, and the steps will not always match the framework's published palette values exactly.

One difference is worth expecting before it surprises you. Material's own system is not a plain eleven-step ramp: it publishes a base scale plus separate accent values, and the darkest families in the list — brown and the two grays — behave differently from the saturated hues, because a near-neutral has very little chroma for a lightness ladder to work with. Raising one of those bases through the same ladder produces a set of near-neutrals with barely any colour in them, which is honest to the model and not a bug.

As a material design color palette reference the page is most useful for two jobs: finding the base value of a family by name, and comparing families against each other when picking one for a product. Seeing nineteen ramps stacked is also a quick lesson in how similar a pale tint of a red and a pale tint of an orange look, which is the failure mode pale steps usually cause.

Reading the list as a whole also shows where the material color families overlap. The two blues and the two greens are close cousins, the yellow and the amber are nearly the same hue at different lightnesses, and the pink sits between the red and the purple rather than beside either of them. Those relationships are hard to see one documentation page at a time, and they matter as soon as a product needs four or five distinct accents rather than a single family: picking blue, light-blue and cyan together would leave three colours that no legend could separate.

Limits: no search, no copy buttons, no accent steps, no dark-theme values and no alpha variants.

• The material design color names are exactly the framework's, and each material palette hex codes entry is printed under its swatch.
• Within those limits the material colors list is honest about what it is — the framework's base colours, expanded into a generated ramp.

How to use Material Design Color Reference

1. Scroll to the family you want; the blocks run red, pink and purple through to brown, gray and blue-gray.
2. Read the eleven steps from 50 to 950, each labelled with its step number.
3. Copy the printed hex for the step you need, or take the base value from the family you recognise.

When to use Material Design Color Reference vs related tools

Use this when a project follows Material and needs a family's anchor colour, or when comparing Material families while choosing one. Use the palette generators when the ramp should come from your own brand colour rather than from the framework's palette. Carrying a brand colour through that ramp structure is what the Material UI color exporter does, and the same ramp without the theme wrapper is the Material palette generator's output.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Material Design Color Reference