Tailwind color scales explained: How they're built and how to replicate them

1. A short history of the Tailwind palette

Tailwind CSS was first released by Adam Wathan in November 2017 as a utility-first CSS framework. The default color palette in early versions used a relatively muted, opinionated set of hues. It was workable, but designers often replaced it.

Tailwind CSS v1.0 (May 2019) shipped the first stable version. The palette stayed roughly the same shape: 10 steps per color (50, 100–900), with the same set of named hues.

Tailwind CSS v2.0 (November 2020) brought the first significant palette upgrade — more vibrant colors, an expanded set of hues, and better tuning across the scales. This was when Tailwind colors started to feel like a production-ready palette rather than a starter pack.

Tailwind CSS v3.0 (December 2021) made the JIT engine the default (it had been opt-in since v2.1 in March 2021) and shipped another palette refresh. The five neutral families were reorganized and renamed in v3: blueGray became slate, coolGray became gray, the old gray became zinc, trueGray became neutral, and warmGray became stone — giving designers a clearer vocabulary for picking between warm and cool greys. Still 10 steps per color at this point.

Tailwind CSS v3.3 (March 2023) added a 950 step at the dark end of every color, making each scale an 11-step ramp. The 950 was a response to dark-mode designs where step 900 felt too light for background surfaces.

Tailwind CSS v4.0 (January 2025) re-derived the entire default palette in OKLCH (see our OKLCH vs HSL vs HEX guide). Visually similar to v3 in most cases, but more uniform across hues and able to express wider-gamut colors on P3-capable displays.

2. What's in the default palette?

Tailwind's default palette (as of v4) ships 22 color families, each with 11 steps, plus pure black and white:

The five neutrals matter more than they look. Most products only use one neutral family across the entire UI; the choice between slate (cool blue undertone), gray (neutral), zinc (warmer neutral), and stone (warm) sets the overall temperature of the design. Pick the neutral first, then build your accent palette around it.

3. How the scales are constructed

Three properties define a Tailwind scale: the lightness curve, the chroma curve, and the hue treatment.

Lightness curve

Tailwind scales aren't linear in lightness. The steps cluster more tightly at the light end (50 → 100 → 200 in OKLCH space cover smaller L deltas than 400 → 500 → 600). This makes tinted backgrounds at steps 50–100 feel distinguishable from each other instead of blurring together.

Chroma curve

Chroma peaks in the middle of the scale (typically around 400–600) and tapers toward both ends. Light steps lose saturation to read as pastels rather than candy; dark steps lose saturation because the sRGB gamut narrows as you approach black. This is what keeps a yellow-50 from looking like a cartoon and a blue-950 from looking radioactive.

Hue tuning

Each Tailwind hue has its own micro-tuning. The reds get a touch warmer at the dark end; the blues hold their hue more strictly through the mid-tones because perceived blueness drifts toward purple if you aren't careful. The neutrals are tinted: slate is cool, stone is warm, zinc and gray sit near-neutral. None of this is captured by “same scale for every hue” — it's the per-family handwork that makes the palette feel coherent.

Since v4, all of this is computed in OKLCH, which makes the per-hue tuning more consistent. In earlier versions the scales were tuned by eye in sRGB.

4. Why developers reach for Tailwind colors

Even on projects that don't use Tailwind CSS itself, Tailwind's palette has become a common reference. Three reasons:

• Shared vocabulary.Saying “red-600” or “slate-100” refers to the same swatch in every codebase that uses Tailwind. That vocabulary lets designers and developers communicate quickly without a custom dictionary.
• Known good defaults.The palette is carefully tuned. For most products, replacing “blue-600” with a custom blue produces a worse result than just using blue-600.
• Tooling lock-in.Tailwind's documentation site, component libraries (shadcn/ui, Headless UI, Catalyst), and the wider React/Vue/Svelte ecosystem default to these color tokens. Going off-grid means rebuilding what most libraries hand you.

5. When to replicate, when to customize

Use Tailwind's palette as-is when:

• You're prototyping or shipping an internal tool
• You're building on shadcn/ui or a similar library
• Your brand color happens to match one of Tailwind's hues at one of its steps (rarer than you'd think but not unheard of)

Customize when:

• Your brand has a specific primary color — almost always the case for production products
• You need stricter accessibility guarantees than the defaults (e.g. you want APCA-tuned contrast across every hue)
• You want a smaller, curated set rather than 22 × 11 = 242 swatches a developer might reach for arbitrarily
• You're building a multi-brand product where each brand needs its own anchor color

Many production design systems keep the Tailwind neutrals (or pick one and rename it “gray”), then replace the accent hues with brand-specific scales. That gives you the well-tuned greys for free while keeping the brand colors yours.

6. Building your own Tailwind-style scale

A practical recipe for matching the character of a Tailwind scale on a custom brand color:

1. Pick your anchor step.If your brand color is mid-saturated, anchor at 500 or 600. If it's darker, consider 700. See our 11-step scale guide for the anchor-step decision in detail.
2. Work in OKLCH. Convert your anchor to OKLCH and hold the hue constant. Use OKLCH lightness to generate the lighter and darker variants.
3. Match the lightness curve.Map your steps to OKLCH lightness values that approximate Tailwind's spacing — denser at the ends, sparser in the middle.
4. Taper chroma. Reduce chroma at steps 50–100 and 800–950. Keep peak chroma around 400–600.
5. Verify contrast pairs. White on 600 should hit WCAG 2 AA. Dark text on 50–100 should too. If a step fails for your hue, adjust lightness, not the rule.
6. Test in light and dark mode. Pick a representative component (a card with a button) and render it with light and dark backgrounds. Tweak until both feel right.

This is the recipe Palette Daddy automates in its Tailwind mode.

7. How Palette Daddy's Tailwind mode works

Palette Daddy offers a Tailwind algorithmon the home generator. It takes any input color and produces an 11-step scale (50–950) whose lightness and chroma curves are tuned to match the character of Tailwind's default palette — so your custom brand color drops into a Tailwind codebase and feels native.

The output exports as a Design Tokens (DTCG) JSON file compatible with Figma Token Studio, or you can copy individual values in HEX, OKLCH, or HSL.

If you care more about predictable contrast than aesthetic match, switch to the APCA algorithm instead. See our APCA vs WCAG guide for when APCA-tuned scales make more sense.

8. Frequently asked questions

9. Further reading

• Tailwind CSS — Colors — the official documentation, with the full default palette and OKLCH values.
• Tailwind CSS v4 release notes — the v4 announcement, including the rationale for moving to OKLCH.
• Tailwind CSS v3.3 release notes — where the 950 step was added.
• Building an 11-step color scale (our guide) — deeper on the lightness/chroma curve mechanics that Tailwind tunes.
• OKLCH vs HSL vs HEX (our guide) — why the v4 palette is computed in OKLCH and what that buys you.