How are the ten steps spaced?

Lightness falls by 0.08 per step in OKLCH, from 0.95 at 50 to 0.23 at 900. Perceptual spacing is what makes the ladder look even rather than bunching at one end.

Is this an official Material Design palette?

The steps follow the convention, not the specification. Published ramps also reduce chroma near the ends, while this generator holds the base's chroma throughout.

Why do the light steps look more colourful than expected?

Because chroma is constant. A true reference ramp desaturates towards white; here the base's chroma survives all the way to step 50.

Can I export the ramp as code?

Not from this page — the tiles show names and values but no copy block. The Tailwind exporter and the CSS variable tools write ramps out as text.

Does the ramp tell me which steps are readable?

No. It is a set of values, not an accessibility report. Send any pair through the contrast checker before it carries text.

Material Palette Generator

Color

#a1eeff

100

#88d3ff

200

#6eb8ff

300

#569eff

400

#3d84f8

500

#236bdd

600

#0251c1

700

#0038a7

800

#001b8c

900

#000072

You Might Also Need

Palette Sorter

Sort a palette by hue, lightness or chroma

CSS Color Variables Generator

Generate CSS custom property color variables

The material palette generator builds a ten-step 50 to 900 ramp from one base colour, holding the base's hue and chroma while walking lightness down in even steps.

What is Material Palette Generator?

Design systems adopted numbered ramps because a number says more about a colour's role than a word does: 50 is always the lightest surface, 900 always the darkest ink, and nothing has to be memorised beyond the convention. The material palette generator produces that ramp from a single base colour, with ten steps labelled 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900, laid out in a grid that runs up to ten columns on a wide screen so the whole ladder can be compared at once.

Ten steps, in the conventional order, from 50 at the light end to 900 at the dark end.
Lightness walks down in fixed steps of 0.08, starting at 0.95 for the 50 slot and finishing at 0.23 for 900.
Hue and chroma are taken from the base colour and never change across the ramp, so every step belongs to the same family.
Each tile shows the step name and its hex value, which makes the ladder readable at a glance.

The mechanism is a lightness ladder in OKLCH, and that choice is why the ramp looks even rather than merely regular: equal steps in perceptual lightness read as equal steps to the eye, where the same arithmetic in HSL would bunch at the dark end and spread at the light end. Keeping chroma constant across all ten steps is the one place this diverges from published Material ramps, which reduce saturation as the steps approach white and black so the extremes stay believable. Here the light end keeps the base's full chroma, which produces a more saturated 50 and 100 than most design systems ship, and the dark end stays vivid rather than turning near-black.

Chroma is constant, so the pale steps can look more colourful than a reference ramp expects.
No copy button on the tiles and no export block: each hex value has to be lifted by hand.
Nothing checks that the ramp can carry text, and a ramp alone says nothing about which steps pass against which surfaces.
The step names are fixed. There is no way to add a 950 slot or to renounce the labels in favour of role names.

Read as a material design color scale, the convention is what carries the meaning: a 50 to 900 ramp tells a developer which step to reach for without opening a style guide, and a ten step ladder is enough resolution to cover surfaces, borders, states and text inside one hue family. That grammar is the reason numbered ramps outlived the frameworks that popularised them.

Use it when a project already speaks in numbered steps and a new hue has to join the convention — an accent family, a secondary brand colour, a data-series ramp. Because the base's hue survives intact, dropping a different input colour produces a ladder that sits beside the existing one without argument. Where the output has to be literal Material Design, check the pale steps against the published values rather than assuming a match, and where the destination is a Tailwind theme instead, the Tailwind exporter writes the ramp with 950 included and a config snippet attached.

How to use Material Palette Generator

Set the base colour with the picker field.
Read the ten-step ramp, 50 through 900, left to right.
Check the pale steps against your design system's reference if a literal match matters.
Lift the hex values you need from the tiles, or move to the exporter tools for a written block.

When to use Material Palette Generator vs related tools

Use this when a numbered ramp has to be derived from one hue. The Tailwind palette generator is the same idea with an extra 950 step and a config snippet, the shades generator gives a shorter ladder without step names, and the contrast checker answer whether a chosen step can carry text.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.