Tailwind CSS · Free Tool

Tailwind 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.

Color name

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

Base color

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.

#f6f2fd

#eae1fa

#d5c2f4

#b99bee

#8c52ef

#6316e9

#4f11bb

#420e9a

#361471

#290f57

#190934

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?

thefrontkit 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 Access Generate shadcn theme

Frequently Asked Questions

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