Tailwind colour scale generator
Nearest named colour: steelblue
Calculated in your browser · nothing is uploaded
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
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.