Tailwind Colour Converter

In short Tailwind's palette is a fixed set of colours at eleven steps from 50 to 950, and this finds the closest class to any hex value — or the exact hex behind any class. The important word is closest. Unless your colour happens to be one of Tailwind's, the match is an approximation, and it is worth looking at how far off it is before using it: a nearly-right brand colour is a brand colour that fails a comparison against the real thing. If the distance is meaningful, extend the theme with your own colour rather than accepting the nearest neighbour. Going the other way — class to hex — is exact and is the more common need: you have a mockup built on `slate-800` and need the value for a chart library, an email template or a native app that does not know what Tailwind is. Worth knowing about the ramps themselves: Tailwind's steps are tuned so that consecutive values look evenly spaced rather than being evenly spaced numerically, and the numbering is designed so that a colour and its 500 step have similar contrast behaviour across hues. That is why swapping `blue-600` for `emerald-600` usually keeps a design working while swapping arbitrary hexes does not.