Material colour palette generator
Nearest named colour: royalblue
Calculated in your browser · nothing is uploaded
Builds a tonal scale from a seed colour; the structure Material Design uses, where a single colour becomes a ladder of tones referenced by number rather than by name.
How to use the material colour palette generator
The insight behind Material’s system is that naming colours "primary-light" and "primary-dark" stops working as a system grows, whereas numbered tones scale indefinitely and make contrast predictable: if tone 10 and tone 90 always have sufficient contrast, any pair chosen by that rule is safe without checking each one. Material 3 builds its tones in a perceptual space rather than in HSL, so the steps are visually even; the scale here is built in HSL and is numerically even, which looks slightly less uniform at the extremes. For a real Material implementation, the official tooling generates the full tonal palette from a seed.
Questions
Names stop scaling. Numbers make contrast predictable. A fixed gap between tones is always safe.
Similar in shape, not identical. Material 3 builds tones in a perceptual space; this uses HSL, so the steps are numerically rather than visually even.
Material uses thirteen. Nine to eleven covers most needs outside a full design system.
Not necessarily. A palette generator arranges hues; it says nothing about contrast. Check any text-on-background pair against the contrast checker before shipping it.
Hex for anything going into a design tool, HSL when you want to adjust lightness by hand, and OKLCH when you need two colours to look equally light; it is the only one of the four where that number means what you expect.