What is Tailwind Color Palette Generator?

This tool generates an 11-step palette (50 to 950) from a single base color, using the same look as the official Tailwind palette. Use it when you want to bring a brand color into a Tailwind project or define a full set of design tokens at once.

The 11 swatches in the preview are clickable for individual copy, and the palette can be exported as a @theme block (Tailwind v4) or a tailwind.config.js snippet (v3).

How to Use

1. Enter a base color in HEX / OKLCH / rgb() / hsl(), or pick one from the color picker.
2. Optionally change the palette name (the base name for CSS variables). The default is brand.
3. Pick an output format: HEX or OKLCH. Switch to the v3 config tab if you need Tailwind v3 output.
4. Review the 11 steps in the preview, then copy the @theme block as a whole, or click an individual swatch to copy a single value.

Main Settings

Base color

The color that seeds the whole palette. The tool picks the Tailwind family whose hue is closest to the input and applies that family's 11-step table. Click a swatch in the preview to copy that step's value.

CSS variable prefix

With primary, you get --color-primary-50 through --color-primary-950 as 11 CSS variables. The name is slugified (lowercased, non-alphanumerics stripped) into a safe identifier.

Color format

• OKLCH (recommended): matches Tailwind v4's official notation and keeps lightness / chroma information across the scale
• HEX: easy to drop into most CSS pipelines and consistent with traditional design tools
• v3 config tab: produces a module.exports snippet for tailwind.config.js's theme.extend.colors

Why the Official Tailwind Table?

The tool uses Tailwind's own 22-family × 11-step OKLCH table as-is.

• Same look as Tailwind: a generated blue-500 matches the official blue-500
• Hand-tuned curves: each family's lightness and chroma curve is tuned by the Tailwind team for the right feel at each step (gentle at 50, vivid at 500, deep at 950)
• Hue-based auto mapping: a cyan-leaning input uses the sky or cyan table rather than something arbitrary

Input and Output Example

With the base color #3b82f6 (Tailwind's blue-500) and the palette name primary, the tool selects the blue family and outputs the following @theme block in HEX:

@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

Switch the output format to OKLCH to get the same scale in OKLCH notation with lightness and chroma preserved. Switch to the v3 config tab to get a module.exports snippet that drops straight into tailwind.config.js.

Use Cases

• Bringing brand colors into a Tailwind project with a consistent 50–950 scale
• Defining semantic tokens (primary / accent / surface) across 11 steps at once
• Reverse-engineering a full 50–950 scale from a single color in a design system
• Exploring color proposals while switching between HEX / OKLCH and Tailwind v4 / v3

Things to Keep in Mind

• The family is selected by hue alone; subtle brightness or chroma differences do not switch families
• The chroma is clamped to 0.4, so very high input saturation is bounded and the full input chroma may not appear in the output
• The palette name is slugified, so spaces, uppercase letters, and symbols are removed