Understanding the Tailwind palette
Twenty-two hues, eleven steps.
A pre-built ladder of colour that's become the default vocabulary of modern web UI.
The grid.
Tailwind's default palette gives you twenty-two named hues (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) and eleven steps each (50, 100, 200, … 950). Step 500 is the canonical mid- tone; smaller numbers are lighter, larger ones darker. Across a row the lightness is roughly constant, so blue-500 and red-500 sit at comparable visual weight.
22 hues × 11 steps = 242 colours
Why the steps are wide.
The step numbers go in hundreds because Tailwind expects you to use only some of them. A typical design uses four or five steps from each hue: a light tint for backgrounds (50 or 100), a body-text tone (700 or 800), a dark heading tone (900 or 950), and one or two accents at 500–600. Using too many steps in close proximity makes the palette feel busy. The gaps are deliberate.
Why slate beats grey.
Tailwind ships five neutrals: slate (cool, blueish), gray (neutral but not perfectly so), zinc (slightly warm-leaning neutral), neutral (the most colour-free), and stone (warm, beige-leaning). Picking the right one is the easiest way to give a UI personality. Tech and finance products almost always pick slate; consumer brands lean toward stone or neutral; pure white-and-grey corporate tone leans on neutral. Mixing two of them in the same UI feels off.
Closest matching is approximate.
Asking "which Tailwind colour is this hex closest to?" is a nearest-neighbour problem in colour space. Naive RGB distance gives bad answers because the human eye doesn't perceive the channels equally. A perceptually uniform space like OKLab or OKLCH gives better matches — two colours with small OKLab distance look more alike than two colours with the same Euclidean distance in RGB. The closest match isn't always the right answer for a design, but it's a faithful starting point.
Why customise.
A brand colour rarely lands cleanly on a Tailwind step. Designers usually keep Tailwind's neutrals and define a single brand palette (often called brand-50 through brand-900) generated from one anchor hue. Tools that turn a single hex into a balanced 11-step palette in OKLCH have replaced the older approach of eyeballing tints and shades.
Tailwind v4 and OKLCH.
Tailwind v4 redefined every default colour in OKLCH and widened the gamut to display-p3 on supporting screens. Side by side, the v4 palette feels more vivid and more consistent across hues — a v3 red-500 looked dirtier than a blue-500; v4 makes them match. If your app still ships v3 and you've been wondering why colours feel slightly muddy on modern displays, that's why.
Read next