Why 11 stops and not 9 or 12?

Tailwind shipped 9 stops (50–900) until v3.0 added 950 in 2023, making 11. The extra dark stop solved the dark-mode problem where 900 was not dark enough for surfaces. The progression (50, 100, 200… 950) is convention now, used by shadcn/ui, Radix Themes, Mantine, and most modern UI kits.

Tailwind v3 vs v4 — which output do I want?

Both. Tailwind v3 reads JS/TS config objects; v4 reads CSS @theme blocks. Our generator emits both forms — paste whichever your project uses. v4 is the future direction (zero-config, CSS-first); v3 remains widely deployed.

Does this support shadcn/ui-style CSS variables?

Yes. Pick the CSS-variable output and you get a :root block plus a tailwind.config snippet that references the variables (colors: { brand: { 500: 'hsl(var(--brand-500))' } }). This is the shadcn pattern and it lets you theme at runtime without rebuilding Tailwind.

Can I generate a scale from a Pantone color?

Yes — start with the Pantone’s sRGB approximation (use the Pantone → HEX converter), then feed that HEX into the Tailwind generator. Verify the brand-500 stop matches your Pantone visually before committing.

What if the scale clashes with Tailwind’s built-in colors?

Tailwind extends rather than overrides when you use theme.extend.colors — your custom 'brand' coexists with built-in 'blue', 'red', etc. To replace a built-in color entirely (e.g. override gray), use theme.colors instead of theme.extend.colors.

How does this differ from the regular palette generator?

The palette generator produces 5 colors from color theory harmonies (complementary, triadic…) — useful for picking a brand palette. The Tailwind palette generator takes ONE color and produces 11 shades of that same color — useful once the palette is decided and you need to operationalize each color into UI tokens.

Tailwind v3 / v4

Tailwind Palette Generator

Generate an 11-step Tailwind color scale (50, 100, 200… 950) from any base color. Output is ready to paste under theme.extend.colors in tailwind.config.ts — with OKLCH-based perceptual lightness for visually even ramps.

11 stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Perceptually even lightness via OKLCH interpolation
Pastes straight into theme.extend.colors
Optional CSS-variable form for shadcn/ui-style theming

Direct answer

A Tailwind color scale is 11 named stops from 50 (almost-white) to 950 (near-black) at the same hue. The trick to a usable scale is interpolating lightness in a perceptually uniform space (OKLCH) so stop 500 looks like the midpoint, not a random offset.

Source color (HEX)

Token name

#6366F1

100

200

300

400

500

600

700

800

900

950

Tailwind Config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: "#6366F1",
          50: "#F3F3FE",
          100: "#E6E7FD",
          200: "#CDCEFB",
          300: "#B1B3F8",
          400: "#8A8CF5",
          500: "#6366F1",
          600: "#5457CD",
          700: "#40429D",
          800: "#2D2E6C",
          900: "#191A3C",
          950: "#0C0C1D",
        },
      },
    },
  },
};

When this saves you time

Real workflows where tailwind palette generator replaces tedious manual work or an in-app subscription tool.

Brand setup

Spin up a Tailwind theme around a brand color

Paste the brand HEX, get an 11-step scale named after your brand (e.g. brand-50 to brand-950), drop into tailwind.config.ts. Buttons, hover states, focus rings all derive from the scale.

Multi-brand

Per-brand themes from one Tailwind config

Generate one scale per brand, expose them as CSS variables, swap at the document root. Same components serve every brand without rebuilding Tailwind.

shadcn/ui

Customize shadcn/ui base colors

shadcn templates ship with default neutrals. Generate a custom neutral scale (warmer or cooler than zinc), paste into the config, and the entire component library re-tones.

Dark mode

Inverted scale for dark mode

Use the same hue at flipped lightness: light-mode bg uses 50, dark-mode bg uses 950. The scale provides every intermediate without ad-hoc color picking.

State colors

Success / warning / error ramps

Generate one ramp per state from your chosen base (#16A34A for success, #F59E0B for warning, #DC2626 for error). Hover/disabled/focus states drop in from the scale.

Editorial

Marketing site neutrals tuned to brand temperature

Default gray reads cold. Generate a warm-leaning gray scale from a tinted near-black (e.g. #1a1614) — content site feels less corporate, more editorial.

How it works

The methodology — every transformation documented so the output is reproducible.

Identify the base color

We treat the input as approximately stop 500–600 (mid-saturation, mid-lightness). Tailwind’s default scales (blue-500, red-500…) sit around L=55% in OKLCH.

Map stops to lightness curve

Stops 50–950 follow a non-linear lightness ramp: 97, 94, 86, 75, 65, 55, 45, 35, 25, 18, 12. The curve is denser at the ends so the lightest and darkest stops separate properly.

Interpolate in OKLCH

Lightness scaled in OKLCH (perceptually uniform), hue preserved, chroma damped near the endpoints (saturation tapers as the color approaches white or black, mirroring how pigments behave).

Emit Tailwind config

Output is a TypeScript object ready to drop under theme.extend.colors. Optionally emits CSS variables for shadcn/ui-style theming.

Worked examples

Input	Result	Notes
#3B82F6 · name: brand	brand-50 → brand-950 (blue scale, perceptually even)	Mirrors Tailwind’s built-in blue scale. Base maps to roughly brand-500.
#10B981 · name: success	success-50 #ECFDF5 … success-950 #022C22	Emerald-style success ramp. Use for confirmations, success states.
#F59E0B · name: warning	warning-50 #FFFBEB … warning-950 #451A03	Amber warning ramp. Pair with brand neutrals for non-destructive alerts.
#1A1614 · name: neutral	neutral-50 #FAFAF9 … neutral-950 #0C0A09	Warm-leaning gray. Replaces Tailwind’s zinc/slate/stone defaults.

Common mistakes to avoid

Interpolating in sRGB instead of OKLCH

sRGB-linear lightness produces flat, muddy mid-stops because human perception is not linear in RGB. OKLCH is the modern fix — lightness in OKLCH matches what the eye sees.

Holding chroma constant across the scale

Real pigments desaturate as they approach white or black. Pin chroma at the same value and the lightest stops look unnaturally vivid (and the darkest look muddy).

Treating the base as stop 500 exactly

Some brand colors are deeper or lighter than a typical 500. Use the live preview to verify the base maps to a stop that makes sense (e.g. dark navy might land at 700 or 800).

Forgetting accessibility on extreme stops

Tailwind 50/100 on white fails contrast for body text; 900/950 on black is hard to read. Run text-bg pairs through the contrast checker before shipping.

Frequently Asked Questions

What a 'good' Tailwind scale looks like

The defining property of a usable color scale is perceptually even spacing: stop 500 looks like the midpoint between 50 and 950, and adjacent stops feel evenly separated. The pre-Tailwind state of the art (Material Design’s 50–900 scales) interpolated in HSL, which is geometric but not perceptual — yellow at L=50% looks visibly brighter than blue at L=50%. The result was scales that worked for blue but felt off for yellow and green.

Tailwind v3+ and shadcn/ui moved to OKLCH-based scale generation — same hue, lightness in a uniform space, chroma tapered at endpoints. That is what we do here.

Stops that matter most in practice

50, 100: backgrounds, subtle surfaces, hover tints. Almost-white at the lightest end.
200, 300: borders, dividers, disabled states. Bright enough to read structure, soft enough not to dominate.
400, 500: primary brand accents, large call-to-action elements. 500 is the canonical brand color in most systems.
600, 700: hover/pressed states of 500; primary text on tinted backgrounds.
800, 900, 950: dark-mode surfaces, body text on light backgrounds, deepest brand voice. 950 is the dark-mode equivalent of 50.

From Tailwind scale to design tokens

A Tailwind color scale is one layer of a design-token system — specifically, the reference layer (palette of values). The other layer is semantic tokens (role-named: primary, surface, text-muted). For a full token pipeline, export the scale to the design token generator and add semantic mappings that reference the scale stops.

Validating the scale for accessibility

Before shipping a scale, run the most-used text/background pairs through the contrast checker. The common gotchas:

Body text uses 700 or 800 on a 50 background — almost always passes AA, often passes AAA.
Muted text on 50 backgrounds: use 500 or darker. 400 often fails AA at 14pt.
Button text on 500 background: white passes for most brand colors; check yellow / lime / cyan ramps where white may fail.

Tailwind Palette Generator