TAILWIND v4 · OKLCH-NATIVE

Tailwind CSS Colors — The Full Default Palette

Every default Tailwind v4 color in one place: 22 hues × 11 shades. Click any swatch to copy the HEX or OKLCH value. Search to filter, then drop it into bg-, text-, border-, ring-, or any other utility.

Click a swatch to copy. The numbers under each color are the last 6 digits of its HEX value.

slate

--color-slate-500

gray

--color-gray-500

zinc

--color-zinc-500

neutral

--color-neutral-500

stone

--color-stone-500

red

--color-red-500

orange

--color-orange-500

amber

--color-amber-500

yellow

--color-yellow-500

lime

--color-lime-500

green

--color-green-500

emerald

--color-emerald-500

teal

--color-teal-500

cyan

--color-cyan-500

sky

--color-sky-500

blue

--color-blue-500

indigo

--color-indigo-500

violet

--color-violet-500

purple

--color-purple-500

fuchsia

--color-fuchsia-500

pink

--color-pink-500

rose

--color-rose-500

How to read the palette

Tailwind's palette is structured as 22 hue families with 11 shades each. The numbering is consistent across hues, so swaps stay coherent.

Shades 50 → 950

Lower numbers are lighter, higher numbers are darker. 500 sits in the middle and is typically the "brand" shade — the one in your logo. 50 / 100 / 200 are tints for backgrounds; 800 / 900 / 950 are shades for dark mode.

17 colors + 5 grays

The five neutrals (slate, gray, zinc, neutral, stone) differ in warmth: slate is coolest, stone is warmest. Pick one and stay with it — mixing neutrals inside a single design system causes subtle hue drift in greys.

New in v4

Tailwind v4 ships colors in OKLCH. Here's what changes.

Up through v3, Tailwind's palette was defined in HEX values that were hand-tuned to look "evenly spaced" — a heroic effort that still drifted across hues. v4 redefines every color as oklch() — a perceptually uniform color space — and the difference shows up immediately in dark mode and on wide-gamut displays.

The shade numbers stay the same, the HEX values stay (very nearly) the same, and existing utilities (bg-blue-500, text-slate-200) work without changes. What's new is that v4 exposes each color as a --color-<name>-<shade> CSS variable, and you can theme the whole system by overriding those variables in CSS instead of editing tailwind.config.js.

Practical implication: if you're extending the palette in 2026, define your custom shades in OKLCH from the start. The v4 docs lay out the math, and our color converter will translate any color into OKLCH instantly.

Add your own brand color

In v4 you customize colors in CSS, not JavaScript. Drop this into your main stylesheet and bg-brand-500 starts working immediately.

/* CSS-first config in Tailwind v4 */
@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(97% 0.02 280);
  --color-brand-500: oklch(58% 0.20 280);
  --color-brand-900: oklch(20% 0.10 280);
}

/* Use with: bg-brand-500, text-brand-50, ring-brand-900 */

Need help defining the OKLCH values? Use our color converter — paste your brand HEX and copy the oklch() output.

Frequently asked questions

Where do these colors come from?

They are the default palette shipped with Tailwind CSS v4, published under the MIT license at tailwindcss.com. We reproduce them here for reference — the source of truth is always the official docs.

Why does Tailwind use 500 as the "default" shade?

500 is the middle of the 50–950 scale and tends to be the most saturated, on-brand version of a hue. Adam Wathan picked the convention early in Tailwind's history and it has stuck because writing bg-blue-500 reads as "the blue".

Is 950 new?

Yes — the 950 shade was added in Tailwind v3.3 (2023) specifically to support dark mode backgrounds. Before that the scale ended at 900, which often felt too light for "page background" surfaces in dark themes.

Which gray should I use?

Pick one and commit. Slate (cool) works well with blue / purple brand colors; stone (warm) pairs with orange / red brands; zinc and neutral are the most "true" greys. Gray sits in the middle. Don't mix two grays in the same product — it produces subtle hue inconsistencies that the human eye picks up unconsciously.

Why include slate and gray? They look identical.

They are similar but not identical. Slate has a slight blue cast (cooler), gray has a slight neutral cast. The difference is most visible in the 500–700 range. Many design teams pick the one that complements their accent color and stick with it.

Can I use these colors outside Tailwind?

Absolutely. The HEX and OKLCH values are just colors — they work in any CSS, any framework, Figma, Sketch, anywhere. The "Tailwind" part is just the naming convention. Copy them and use them however you want.