The Tailwind Color Palette, Explained

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.