Color Palette Generator for Tailwind CSS

The Tailwind palette problem

Tailwind ships a beautiful default palette, but every site built on it ends up looking like every other Tailwind site. The fix is simple: replace the default with your own brand-driven 50–950 scales for one or two accent colors.

What the generator outputs

Pick an accent color. The generator produces a complete 50→950 scale (11 steps) plus your supporting tokens, formatted for either Tailwind v3 or v4:

Tailwind v3 format

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        accent: {
          50: '#faf5ff',
          100: '#f3e8ff',
          200: '#e9d5ff',
          300: '#d8b4fe',
          400: '#c084fc',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
          800: '#6b21a8',
          900: '#581c87',
          950: '#3b0764',
        }
      }
    }
  }
}

Tailwind v4 @theme format

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

@theme {
  --color-accent-50: #faf5ff;
  --color-accent-500: #a855f7;
  --color-accent-950: #3b0764;
  /* full 50-950 scale generated automatically */
}

Use it in your components

<button class="bg-accent-500 hover:bg-accent-600 text-white">
  Sign up
</button>

<div class="border border-accent-200 bg-accent-50 text-accent-900">
  Soft accent surface
</div>

Why this approach

• 50–950 scale matches Tailwind's native idiom. Your accent feels native to the framework instead of bolted on.
• WCAG contrast verified per shade. The generator pre-scores which shade pairs hit 4.5:1 so you don't ship inaccessible buttons.
• Works with shadcn/ui out of the box. shadcn expects CSS variables; replace the default --primary with your accent-500 and the whole component library re-themes.

Pair it with the rest of TinyTools

• Generate a matching favicon using your accent-500.
• Build an OG image using your accent gradient.
• Lock theme-color into your meta tags via the SEO Meta Generator.