Tailwind color generator

How Tailwind builds its scales

Each Tailwind color (red, blue, emerald, etc.) has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. They aren't linear interpolations of a base color: each shade is hand-tuned in lightness and saturation to feel perceptually uniform. That's why a blue-500 and a red-500 feel the same weight, even though mathematically they're very different.

Which shade for what

• 50-100: subtle backgrounds, very light hover states.
• 200-300: borders, dividers, tag and badge backgrounds.
• 400-500: secondary icons, placeholders, illustrations.
• 600-700: primary buttons, links, CTAs (passes AA against white).
• 800-900: text on light background, headings.
• 950: extreme text, deep dark mode, dark-mode backgrounds.

Why duplicating Tailwind's palette isn't always smart

If your brand uses a specific green, generating a scale from scratch is tempting. But Tailwind's official scales are tested for accessibility: 600 almost always passes AA against white, and 100 against 800. A poorly balanced scale can break that guarantee. When in doubt, keep the official scales for grays and states, and only add your brand color.

How to integrate it

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 50: '#...', 100: '#...', /* ... */ 950: '#...' },
      },
    },
  },
}

Now you have bg-brand-500, text-brand-700, border-brand-200 across your project. With Tailwind 4 and the CSS-first syntax, the block goes inside @theme.

OKLCH: the future of palettes

Tailwind 4 migrated colors from RGB to OKLCH, a perceptually uniform color space. The difference: in HSL, two colors with the same L can read very differently (green and blue at 50% L feel different in brightness). In OKLCH they don't. That enables more natural scales, especially for magentas and violets which always struggled in HSL.

Common mistakes when generating your own scale

1. Same saturation across all shades. The extremes (50 and 950) should be less saturated; otherwise they look artificial.
2. Not checking contrast. Your new color-600 might fail AA. Always verify before shipping.
3. Treating the base as 500. Sometimes the brand color is dark and fits better as 600 or 700, with 500 derived toward white.
4. Forgetting 950. If you support dark mode, you'll need it for deep backgrounds.

When you don't need a custom palette

If your product is in MVP and final branding isn't decided, just use the official scales (slate, blue, emerald). Migrating later is trivial; shipping with a half-baked palette is what costs you.