TOOLTIKI Lovable tool, really free
Colour Scales

Material colour palette generator

Nearest named colour: midnightblue

Format

Calculated in your browser · nothing is uploaded

Local · numerically even, not perceptually
Advertisement
320 × 100

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

1 Set your colour, by picker or by typing a hex value.
2 Switch the format if you need RGB, HSL or OKLCH rather than hex.
3 Tap any swatch to copy it, or copy the whole set at once.

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.

Material Design 3 — the colour system
Advertisement
300 × 250
Was this tool any good?
INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING