Studio
Book a call
All Tools
Tailwind CSS · Free Tool

Tailwind Color Palette Generator

Pick a brand color, get the full 50-950 shade scale, and copy it straight into your Tailwind config or @theme block. Live preview, multiple export formats, runs in your browser. Need every shade to pass WCAG AA? Try the accessible color palette generator.

Used as the key in tailwind.config.js and as a prefix for v4 variables.

The hue from this color is preserved across the entire scale.

Live preview

11 shades from your base color. Click any swatch to copy its hex.

Light surface
Body text on shade 50 background. The 900 text on 50 background passes WCAG AA contrast comfortably for both small and large text in most palettes.
Dark surface
Body text on shade 900 background. The 100 text on 900 background gives a high-contrast dark mode pairing without losing the brand hue.

Tailwind v3 config

Paste into theme.extend.colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
        '50': '#f6f2fd',
        '100': '#eae1fa',
        '200': '#d5c2f4',
        '300': '#b99bee',
        '400': '#8c52ef',
        '500': '#6316e9',
        '600': '#4f11bb',
        '700': '#420e9a',
        '800': '#361471',
        '900': '#290f57',
        '950': '#190934',
        },
      },
    },
  },
};

Tailwind v4 @theme

Paste into globals.css

/* globals.css — Tailwind v4 */
@theme {
  --color-primary-50: #f6f2fd;
  --color-primary-100: #eae1fa;
  --color-primary-200: #d5c2f4;
  --color-primary-300: #b99bee;
  --color-primary-400: #8c52ef;
  --color-primary-500: #6316e9;
  --color-primary-600: #4f11bb;
  --color-primary-700: #420e9a;
  --color-primary-800: #361471;
  --color-primary-900: #290f57;
  --color-primary-950: #190934;
}

Design tokens (DTCG JSON)

Style Dictionary, Tokens Studio

{
  "primary.50": {
    "$value": "#f6f2fd",
    "$type": "color"
  },
  "primary.100": {
    "$value": "#eae1fa",
    "$type": "color"
  },
  "primary.200": {
    "$value": "#d5c2f4",
    "$type": "color"
  },
  "primary.300": {
    "$value": "#b99bee",
    "$type": "color"
  },
  "primary.400": {
    "$value": "#8c52ef",
    "$type": "color"
  },
  "primary.500": {
    "$value": "#6316e9",
    "$type": "color"
  },
  "primary.600": {
    "$value": "#4f11bb",
    "$type": "color"
  },
  "primary.700": {
    "$value": "#420e9a",
    "$type": "color"
  },
  "primary.800": {
    "$value": "#361471",
    "$type": "color"
  },
  "primary.900": {
    "$value": "#290f57",
    "$type": "color"
  },
  "primary.950": {
    "$value": "#190934",
    "$type": "color"
  }
}

Want a production-ready Tailwind project that already uses these tokens?

Frontkit kits ship with a full design token system already wired into Tailwind + shadcn/ui. Generate your palette, paste the @theme block, and every screen rebrands instantly. SaaS, CRM, HR, e-commerce, kanban, and more.

See All UI KitsGenerate shadcn theme

Tailwind Palette Generator FAQ

Common questions about generating, exporting, and applying Tailwind color scales.