Does this match Tailwind v4?

Yes — v4's default theme keeps the same hue / shade values as v3.4, so the palette is identical. If you've customized `theme.colors` in your config, your project's palette may differ.

Why are there five gray families?

Tailwind ships slate / gray / zinc / neutral / stone as five neutral hues with slightly different undertones: slate is cool blue-leaning, gray is neutral, zinc is cooler / steely, neutral is true neutral, stone is warm taupe. Pick whichever pairs best with your accent.

What does shade 950 mean?

Tailwind added a darker 950 step in v3.3 alongside the existing 50–900 ladder. It's near-black with a faint hint of the hue, useful for deep dark-mode backgrounds and very subtle borders.

Tailwind Color Palette

Color

Visual reference for the entire default Tailwind palette (v3.4 and v4 share the same default values). Each swatch shows the shade number and HEX, with a copy mode toggle to grab the value in whatever form your codebase wants: `bg-slate-700`, `#334155`, or `rgb(51, 65, 85)`. Search filters by hue name or HEX substring.

—

Copy:

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Default theme values for Tailwind CSS v3.4 / v4.

How to use

Pick a copy format — Class for Tailwind utilities, HEX for design tools, rgb() for CSS variables.
Click any swatch to copy its value. A check mark briefly confirms the copy.
Type a hue (`emerald`) or HEX fragment (`fde0`) to filter.

Frequently asked questions

Does this match Tailwind v4?: Yes — v4's default theme keeps the same hue / shade values as v3.4, so the palette is identical. If you've customized `theme.colors` in your config, your project's palette may differ.
Why are there five gray families?: Tailwind ships slate / gray / zinc / neutral / stone as five neutral hues with slightly different undertones: slate is cool blue-leaning, gray is neutral, zinc is cooler / steely, neutral is true neutral, stone is warm taupe. Pick whichever pairs best with your accent.
What does shade 950 mean?: Tailwind added a darker 950 step in v3.3 alongside the existing 50–900 ladder. It's near-black with a faint hint of the hue, useful for deep dark-mode backgrounds and very subtle borders.