Material Design Palette
Build a Material-style 50–900 colour ramp.
How to use
- 1 Enter your base colour as a hex value, or pick one with the colour input.
- 2 Review the generated 50–900 ramp; the 500 stop is your original colour.
- 3 Check the readable text colour shown on each swatch.
- 4 Copy the CSS custom properties to use in your project.
About Material Design Palette
The Material Design Palette tool turns a single brand colour into the ten-tone scale that Google's Material Design system uses for accents and surfaces.
You give it one base hex value — your primary colour — and it produces the familiar numbered stops from 50, the lightest tint, through 500, your unchanged base, down to 900, the darkest shade.
It builds the ramp the way Material does: the light stops (50–400) are made by mixing your colour toward white, and the dark stops (600–900) by mixing toward black, in fixed proportions at each step.
That keeps the hue recognisable across the whole scale while giving you usable tints and shades for backgrounds, hover states, borders and text.
Each swatch also comes with the contrast colour — black or white — that reads cleanly on top of it, so you can drop the palette straight into a component library.
When you are happy with the ramp, copy it as CSS custom properties ready to paste into your stylesheet or design tokens file.
Everything runs locally in your browser: no colour is uploaded, logged or stored, and the tool keeps working offline once the page has loaded.
Use the text field for precise hex entry or the colour picker to explore visually.
FAQ
How are the lighter and darker stops calculated?
Light stops (50–400) mix your colour toward white and dark stops (600–900) mix it toward black by fixed amounts, so the hue stays consistent while lightness changes. The 500 stop is your unmodified base colour.
Will these match Google's official Material palettes exactly?
They closely approximate the Material feel using sRGB mixing. The official palettes were hand-tuned, so individual stops may differ slightly, but the ramp is consistent and ready for UI work.