How to use the Material palette generator
- Pick the Base colour (becomes 500).
- Enter a Palette name, such as primary, brand or error. It is used in the variable names.
- Check the ten swatches from 50 (lightest) to 900 (darkest).
- Use the table for HEX, RGB and a text-colour hint for each shade.
- Copy the CSS custom properties or save them as a .css file.
What it does and when to use it
Many design systems name colour steps 50, 100, 200 and up to 900, as Material Design did. Having the full set lets you use light shades for backgrounds, mid shades for borders, and dark shades for text and hover states, all from one brand colour. This generator gives you that set with a predictable rule, so the same base always gives the same palette.
It is handy for projects built on Material-style component libraries, or any theme that expects numbered shades. For an evenly spaced alternative with your own number of steps, try the tints and shades generator. To see Tailwind’s numbered shades, open the Tailwind colour palette, and to sort an existing set of shades use the colour sorter.
How it works
Shade 500 is your base colour. Lighter shades mix white with the base in sRGB, taking this share of the base:
| Shade | 50 | 100 | 200 | 300 | 400 |
|---|---|---|---|---|---|
| Base share | 12% | 30% | 50% | 70% | 85% |
Darker shades start from a “dark” colour made by multiplying each RGB channel of the base by itself, then mix toward the base:
| Shade | 600 | 700 | 800 | 900 |
|---|---|---|---|---|
| Base share | 87% | 70% | 54% | 25% |
These are the ratios in the computeColors function of mbitson/mcg.
Worked examples
These are the generator’s own outputs.
Indigo #3f51b5. 50 is #e8eaf6, 200 #9fa8da, 500 #3f51b5 and 900 #1b288e. White text passes on 400 and darker; 50 to 300 take black text.
Pink #e91e63, named “Brand Pink”. The variables are named --brand-pink-50 to --brand-pink-900. 50 is #fce4ec, 900 is #da0a36, and white text only passes from 700 down, because this pink is bright.
Limits and tips
- Mixing happens in sRGB, so mid tints of some hues can look slightly greyer than you might expect.
- Very light or very dark bases squeeze one side of the palette; white gives white for every tint.
- Check the shades you use for text with the contrast checker.
- The palette is calculated in your browser.
Frequently asked questions
Is this Google's official Material 3 palette?
How close is it to the original Material colours?
Why do my dark shades stay bright?
What does the "Text on it" column mean?
Are accent shades such as A200 included?
Sources
- Material Design Color Generator (mbitson/mcg) source code — GitHub, accessed 2026-10-08
How do we know nothing is uploaded? Test it yourself on the privacy proof page.