Tailwind CSS Color Generator

Pick any base color and generate a complete 11-stop Tailwind color scale from 50 to 950. Get ready-to-paste code for Tailwind v3 (JavaScript config) and Tailwind v4 (CSS @theme block), plus a live UI preview so you can evaluate legibility and contrast before dropping the palette into your project.

How to Use This Tool

The generator needs just a few seconds to configure:

1. Pick a base color — use the color picker or type any hex code. This is your anchor; the entire scale radiates outward from it.
2. Name your palette — enter the name you will use in code, such as brand, primary, or accent. The name is embedded directly in the generated output.
3. Choose which stop to pin your color to — the default is 500, which matches Tailwind's own palette midpoint. If your color is a lighter pastel, pin it to 300 or 400; for a deep, rich hue, try 600 or 700.
4. Copy the code — switch between the Tailwind v3, Tailwind v4, and plain CSS Variable tabs to get the exact format your project needs.
5. Check the UI preview — toggle between light and dark mode to see headings, body text, buttons, badges, and form inputs rendered in your palette before you commit to it.

Understanding the Tailwind Color Scale

Tailwind CSS uses a fixed numeric scale for color shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. This gives you 11 distinct values for any hue, spanning near-white to near-black. Every built-in Tailwind color — blue, rose, emerald, and so on — follows this exact scale.

What Each Stop Is Typically Used For

How the Scale Is Calculated

The generator pins your chosen base color to the selected stop, then interpolates the remaining stops using the same relative lightness distribution that Tailwind uses internally. Stops lighter than the pin spread upward toward near-white (approximately 97% lightness in HSL); stops darker spread downward toward near-black (approximately 7% lightness). Saturation is gently reduced at the extremes — very light and very dark stops carry lower chroma. This mirrors how natural color systems behave and is what Tailwind's own palette generation does.

Tailwind v3 vs Tailwind v4: Color Configuration

Tailwind v3 and v4 use fundamentally different approaches to defining custom colors. The generated utility classes (bg-brand-500, text-brand-200, etc.) work identically in both versions — only where you put the configuration differs.

Tailwind v3 — JavaScript Config

In Tailwind v3, custom colors live inside tailwind.config.js under theme.extend.colors. Using extend (rather than replacing theme.colors outright) adds your scale alongside Tailwind's built-in colors without removing them:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f5f3ff',
          500: '#8b5cf6',
          950: '#2e1065',
          // ... all 11 stops
        },
      },
    },
  },
};

After adding this, every Tailwind color utility automatically works with your new scale: bg-brand-500, text-brand-700, border-brand-200, ring-brand-400, and so on. Hover/focus/dark-mode variants (hover:bg-brand-600, dark:text-brand-300) are generated automatically.

Tailwind v4 — CSS @theme Block

Tailwind v4 moves color configuration out of JavaScript and into CSS. Custom colors are declared as CSS custom properties inside an @theme block using the naming convention --color-{name}-{stop}. Tailwind v4 reads this block and automatically generates all utility classes from it:

/* globals.css or app.css */
@import "tailwindcss";

@theme {
  --color-brand-50:  #f5f3ff;
  --color-brand-500: #8b5cf6;
  --color-brand-950: #2e1065;
  /* ... all 11 stops */
}

Because v4 exposes all theme tokens as CSS custom properties at runtime, you can also use them directly in component CSS: color: var(--color-brand-700). There is no separate tailwind.config.js needed for color customization in most v4 projects.

Quick Comparison

Choosing the Right Stop to Pin Your Base Color

The Pin to stop setting determines which stop in the generated scale exactly matches your input color. The right choice depends on how light or dark your brand color is:

• Stop 500 (default) — best for fully-saturated mid-tone hues: vibrant blues, purples, teals, greens, and reds that read clearly as primary buttons on a white background.
• Stop 400 — for colors a touch lighter than a standard mid-tone; retains a full range of usable dark stops below for text.
• Stop 600 or 700 — for deep, rich brand colors such as forest green, navy, burgundy, or dark teal.
• Stop 300 or 200 — for very light pastel brand colors where you need many darker stops below for text, borders, and interactive elements.
• Stop 900 or 950 — for near-black brand hues; the lighter stops become lightly tinted grays useful for backgrounds.

The UI preview updates in real time as you change the pin stop — check the legibility of buttons and body text in both light and dark modes before finalizing.

Using a Custom Tailwind Color in Your Project

Tailwind v3 Usage Examples

<!-- Primary button -->
<button class="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white px-4 py-2 rounded-lg">
  Save Changes
</button>

<!-- Body text -->
<p class="text-brand-700">This uses the 700 shade for readable body copy.</p>

<!-- Subtle tinted card -->
<div class="bg-brand-50 border border-brand-200 rounded-xl p-4">
  A card with a brand-tinted background and border.
</div>

<!-- Dark mode -->
<p class="text-brand-900 dark:text-brand-100">Adapts between light and dark mode.</p>

Tailwind v4 Usage Examples

The utility classes are identical in v4. Additionally, you can reference the generated CSS variables in arbitrary CSS:

/* Using generated CSS variables directly in custom styles */
.my-component {
  background-color: var(--color-brand-50);
  color: var(--color-brand-800);
  border: 1px solid var(--color-brand-200);
}

.my-component:focus {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

Frequently Asked Questions

Will adding a custom color break my existing Tailwind colors?

No — as long as you use a unique name that doesn't match a built-in Tailwind color (like blue or red), adding your scale under theme.extend.colors (v3) or as new --color-* variables (v4) is purely additive. All built-in Tailwind colors remain available.

Does the generated palette pass WCAG contrast requirements?

That depends on how you pair stops. A few reliable combinations: stop 700 on white typically exceeds WCAG AA (4.5:1) for body text; stop 900 on white exceeds WCAG AAA (7:1). Stop 500 on white usually meets AA for large text or UI components. The UI Preview above lets you visually spot legibility issues before committing to a scale — toggle between light and dark and check that text reads clearly. For accessibility-critical production UIs, always verify final color pairs with a contrast checker.

What is the difference between the Tailwind v4 output and the CSS Variables output?

The Tailwind v4 tab wraps the variables in @theme { }, which signals Tailwind v4 to generate utility classes (bg-brand-*, text-brand-*, etc.) from them. The CSS Variables tab uses a plain :root { } block, which works in any project — including Tailwind v3 with var(--color-brand-500) inside arbitrary-value utilities, or entirely non-Tailwind projects that just need consistent CSS custom properties.

My brand color is very light (a pastel). Which stop should I pin it to?

Pin it to stop 200 or 300. This preserves a useful range of darker stops (500–950) for text, borders, and interactive elements, while the lighter stops (50–100) become near-white variants of your pastel. Pinning a pastel to 500 will cause the 600–950 range to become muddy near-grays with very little hue character.

Why does the tool reduce saturation at very light and very dark stops?

Perceptually uniform color models — including CIELAB, OKLCH, and the algorithm behind Tailwind's own color tables — naturally reduce chroma at extremes. At 97% HSL lightness, a fully-saturated color is almost indistinguishable from white; at 7% lightness it looks almost black. Tapering saturation at the extremes keeps the hue visible and makes the scale look natural rather than washed out or muddy.

Can I define more than one custom color in the same project?

Yes. In Tailwind v3, add additional keys under theme.extend.colors. In Tailwind v4, add additional --color-* variable groups to your @theme block. A typical design system might define brand, neutral, success, warning, and danger scales this way.

Does this work with Tailwind v2?

Yes — the Tailwind v3 JavaScript config output is fully backward compatible with Tailwind v2. The theme.extend.colors syntax has been the same since Tailwind v2.

Can I use the downloaded JSON file directly with Tailwind?

The downloaded JSON is a convenience export for saving and sharing your palette. To use it with Tailwind v3, import it into your config: const brand = require('./tailwind-color-brand.json'); /* use brand.brand */. For v4, paste the hex values into your @theme block — the CSS Variables tab output is ready to paste directly.