Which step should I use for buttons and links?

500 to 700 usually, since those have enough contrast against white. Always check the pairing in the contrast checker — a mid-tone that looks strong can still fail AA for body text.

Why do the light steps look washed out?

At very high lightness there is little room left for saturation, so 50 and 100 always read as tints. That's expected — they're for backgrounds and hover states, not for text.

Material Color Generator

Turn a single brand colour into a Material-style scale from 50 through 900. Each step holds the hue and saturation and moves the lightness, which is what makes a scale feel like one family rather than ten unrelated colours. The output comes as CSS custom properties, named however you like.

Base colour

Palette name

primary-500

#6415EA

#EFE8FD

100

#DAC7FA

200

#C1A2F6

300

#A273F2

400

#8344EE

500

#6415EA

600

#5813CE

700

#4C10B2

800

#400E96

900

#300A70

--primary-50: #EFE8FD;
--primary-100: #DAC7FA;
--primary-200: #C1A2F6;
--primary-300: #A273F2;
--primary-400: #8344EE;
--primary-500: #6415EA;
--primary-600: #5813CE;
--primary-700: #4C10B2;
--primary-800: #400E96;
--primary-900: #300A70;

Google's own Material palettes were hand-tuned rather than generated, so this is a faithful-looking approximation of the scale, not a reproduction of any official palette.

Nothing is uploaded — this tool runs inside your browser, so your files never leave your device.

Help us improve

Why use this tool

Full 50–900 scale from one colour
CSS custom properties generated with your own palette name
Every step shown as a swatch so you can judge the ramp
Honest that it approximates the Material scale rather than reproducing it

How it works

1Enter your base colour and a palette name.
2Check the ramp reads evenly from light to dark.
3Copy the custom properties into your stylesheet.

Material Color Generator — frequently asked questions

No. Google's palettes were hand-tuned by designers rather than generated by formula, so individual steps differ. This produces a scale that behaves the same way and looks consistent, which is what matters for your own brand colour.

More colour tools

Color Converter HEX → RGB RGB → HEX HEX → HSL CMYK Contrast

Looking for something else? Browse all colour tools

Explore the other tools

Same deal everywhere on the site — free, no sign-up, and no watermark on anything you download.

QR Code Tools Barcode Tools PDF Tools Image Tools Developer Tools SEO Tools Text Tools Calculators Unit Converters File Tools Business Tools AI Tools Utilities

Or see every tool on one page.