Tailwind colour scale generator
Nearest named colour: royalblue
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.
For a custom colour in Tailwind, yes. Utilities assume the whole ladder exists; defining only 500 breaks the rest.
Around 500, the middle. The lighter and darker steps are derived from it.
Same shape, not the same values. Tailwind hand-tunes its built-in colours rather than deriving them.
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.