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

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.

Related tools

Color Sort

Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.

Color 0 0

Color Shades & Tints Generator

Generate tints (lighter), shades (darker), and tones (with gray) from any base color — 2 to 20 stops, in HEX, RGB, or HSL.

Color 0 0

Color Palette Generator

Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.

Color 0 0

Color Palette from Image

Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.

Color 0 0

Color Token Exporter

Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.

Color 0 0

Color Name Finder

Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.

Color 0 0