The Tailwind Color Palette, Explained
How Tailwind picks its 22 colors, what the 50-950 scale means, and how to extend it with brand colors that play nicely with the defaults.
The 22 colors
Tailwind v3 ships with 22 named colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose. Five neutrals plus 17 saturated hues - enough variety for nearly any design.
What the 50-950 scale means
Each color has 11 steps from 50 (almost white) to 950 (almost black). The mid-step (500) is the "true" hue. Tailwind tunes each ramp by hand so equivalent steps across colors feel similar in lightness - sky-500 and emerald-500 read with comparable weight.
How to use the steps
- 50, 100 - backgrounds, hover states, subtle dividers.
- 200, 300 - borders, disabled states.
- 400 - icons, secondary buttons.
- 500, 600 - primary brand actions, links.
- 700 - active/pressed states.
- 800, 900, 950 - heading text on light backgrounds; surfaces in dark mode.
Adding your brand color
The trick is to generate a ramp that matches Tailwind's perceived lightness at each step. Naive sweeps look off because they ignore hue-dependent perception. Use our Design System tool to generate a brand ramp in OKLCH that drops in beside the defaults without looking out of place.
Browse and copy any shade
The full Tailwind palette - every color, every step, in HEX, RGB, OKLCH and class form - is one click away in our Tailwind Colors tool.