Hue50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Click any swatch to copy. Class names follow bg-{hue}-{shade}.
How to use
01
Find your hue row
Scan the 22 rows from slate down to rose. Each row runs shade 50 on the left through 950 on the right, matching the Tailwind v3.4 defaults exactly.
02
Hover to preview the hex
Hovering a swatch overlays its hex code, and the tooltip spells out the full token, like teal-700 and #0F766E, so you can confirm before you commit.
03
Click to copy
A single click puts the uppercase hex on your clipboard and pops a toast naming the token you grabbed, so there's no guessing which cell you hit.
Why Tailwind Color Picker
- Browse the complete Tailwind CSS palette, 22 hues × 11 shades.
- Click any swatch to copy its hex.
- Use as a designer-developer translation table.
Common questions
Is this a tailwind shades generator or a reference table?
It's a complete reference for the stock palette, not a generator of new ramps. If you searched for a tailwind shades generator because you need a scale built from your own brand hex, create the ramp with the Shades & Tints tool and then paste the results into your config.
How do I add tailwind custom colors from this grid?
Copy the hexes you want, then register them under theme.extend.colors in tailwind.config so your tailwind custom colors get class names like bg-brand-500. Extending keeps every default hue available alongside your additions.
What Tailwind version do these swatches match?
The grid mirrors the Tailwind CSS v3.4 default palette, including the 950 shades added for dark interfaces. If your project pins an older version, a few deep values may differ slightly from what you see here.
Why do Tailwind shade numbers run from 50 to 950?
The numbers encode lightness, with 50 as the palest wash and 950 as near black. The gaps leave room for design systems to insert intermediate steps without renaming anything, which is also why 500 is the conventional anchor for a hue.
Why can't I copy an entire Tailwind hue row at once?
Swatches copy one hex at a time by design, since most lookups are for a single token. When you genuinely need a full 11-step list in one string, generate the ramp in Shades & Tints and use its Copy all button.
Does clicking a swatch copy the class name or the hex?
It copies the hex value, because that's what design tools and non-Tailwind stylesheets need. The toast and tooltip both show the hue-shade pair, so you still know the class name to type on the code side.
What's the point of a Tailwind grid for designers who write no CSS?
It closes the vocabulary gap. A developer says sky-600, the designer clicks that cell, gets #0284C7, and drops it into Figma. Both sides reference the same token without either one leaving their tool of choice.