TOOLTIKI Lovable tool, really free
Colour Scales

Tailwind colour scale generator

Nearest named colour: steelblue

Format

Calculated in your browser · nothing is uploaded

Local · 50 is lightest, which catches everyone once
Advertisement
320 × 100

Builds a nine-step scale in the shape Tailwind uses — 50 at the lightest through 900 at the darkest, with your colour near the 500 mark.

How to use the tailwind colour scale 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.

Tailwind’s numbering is deliberately inverted from what people expect: 50 is the lightest and 950 the darkest, which is the opposite of a font-weight scale and trips everyone up once. The convention pays off in that a component written with `bg-blue-50` and `text-blue-900` works for any hue you swap in, because the relationship between the numbers is consistent across every colour in the system. When adding a custom colour, generating the full ladder rather than a single value is what makes it behave like the built-in ones — a custom colour with only a 500 defined breaks every utility that expects the others to exist.

Questions

Tailwind’s convention, inverted from font weights. It catches everyone once and then becomes automatic.

Tailwind CSS — customising colours
Advertisement
300 × 250
Was this tool any good?
INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING