Material Palette Generator
Turn one color into a Material-style 50–900 tonal palette.
One color into a full tonal scale
A design system needs many shades of each color — light backgrounds, mid tones, dark text — not just one. This generator expands a single color into a 50-to-900 tonal palette you can drop straight into a theme.
It anchors your color’s hue and saturation and walks the lightness in even steps, producing tints above and shades below. The result is a coherent scale where every step feels related to the others.
Consistent and private
It builds the scale in HSL in your browser, so the palette is generated instantly and nothing you pick is uploaded.
Frequently Asked Questions
What does it generate?
A tonal scale from 50 (very light) to 900 (very dark) built around your color, similar to a Material Design palette, ready to use as design tokens.
How are the tones made?
By adjusting the lightness of your color in HSL space across even steps, keeping the hue and saturation anchored.
Where do I use it?
As a consistent set of shades for backgrounds, borders, and states in a UI, or as CSS variables for a theme.
Browse the full set of free, private, in-browser tools.