Material Color Generator

What this tool does

Material Design, Google's design system, comes with a well-known set of colours, and sometimes you just want one of them to hand, picked for you, without scrolling through the whole palette. That is what this does.

Press the button and it gives you a single random Material colour, shown as a swatch with its Material name and its hex code, and press again for another. Each result is one real colour drawn from the Material palette, so you get a quick, on-system colour to drop into a mockup or a design, one at a time, rather than having to choose from the full set yourself.

How to use it

1. Generate a colour. Press the button for a random Material colour, and again for another.
2. Read its name and code. The tool shows the colour as a swatch with its Material name and its hex value.
3. Copy the hex. Take the hex code for the colour, and generate again if you want a different one.

Press for a random Material colour, read its name and hex, and copy the one you want or keep pressing for more.

How it works

The tool holds Google's standard Material palette, which is organised into colour families such as red, blue, teal, and amber, each with a range of tones. On each press it picks a random family and then a random tone within it, and shows you that one colour with its name and hex.

So the result is a genuine Material colour, not a random colour that happens to look similar. Because it draws from the fixed Material set, whatever comes up is a real entry from that palette, identified the way Material identifies it. Each press is an independent pick, giving you a single, specific Material swatch rather than a range or a scale.

What Material colours are

Material Design is a design system Google introduced to give apps and websites a consistent look, and colour is a central part of it. Rather than a loose collection of shades, Material lays out a defined palette of colour families, each built as a set of tones from very light to very dark.

That structure is what makes Material colours recognisable. The families cover the spectrum, reds through blues to greens and neutrals, and within each family the tones step evenly from pale to deep. A colour from this palette carries that clean, considered Material character, which is why designers reach for it when they want an interface to feel consistent with the system.

Reading the Material name

Each colour the tool gives you comes with its Material name, and that name has two parts: the family and the tone. A result like blue 500 means the blue family at the 500 tone, and something like amber 200 means the amber family at a lighter 200 tone.

The numbers are the useful part. They run from low to high across each family, where the low numbers are the palest tints and the high numbers are the deepest shades, with 500 sitting around the middle as the main, representative version. So the name tells you not just which colour you have but where it sits in its family, which makes it easy to describe and to find again in a full Material palette.

Why generate a Material colour

The most direct reason is speed when you are working in the Material style. If you are building an Android app, designing within Google's ecosystem, or just want the familiar Material look, a single tap hands you a real Material colour without opening the whole palette to pick one.

It is also good for mockups and inspiration. When you need a placeholder colour for a demo screen, or want to land on a Material shade you might not have chosen deliberately, generating one and reacting to it is quicker than deciding from scratch. Designers use it to grab an on-system accent fast, or to explore the palette a colour at a time rather than all at once.

Using the colour you get

Each result gives you a hex code, which is all you need to use the colour in a design tool or a stylesheet. Copy it and apply it as a fill, an accent, or a background, and because it is a real Material colour, it will sit naturally alongside other Material shades.

If the first colour is not quite right, press again and take another, since the tool is built around generating them one at a time. When you find one that fits, its name tells you exactly which Material colour and tone it is, so you can note it down and reach for the same one, or its lighter and darker neighbours, elsewhere in your work.

Questions people ask

What does it give me?

One random Material colour, a family and a tone such as blue 500, shown with its Material name and its hex code. Press again for another.

Can I enter my own colour?

No. The tool generates a random Material colour rather than taking an input, so you press for one and keep pressing until one suits.

What do names like blue 500 mean?

The first part is the colour family and the number is the tone, where low numbers are the palest tints, high numbers the deepest shades, and 500 the main version.

Is this the whole Material palette?

It draws from the standard Material families and their tones, giving you one random swatch at a time rather than showing the full palette at once.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Material Design, Google's design system. Wikipedia. https://en.wikipedia.org/wiki/Material_Design
3. Material Design, official site. https://m3.material.io/