Skip to main content
Back to all tools

Tailwind Color Generator

Generate a Tailwind CSS-compatible color palette from any base color.

Color Scale
Scale Details
50
100
200
300
400
500
600
700
800
900
950
Tailwind Config
js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f1f1fe',
          '100': '#dedffc',
          '200': '#b9baf9',
          '300': '#8587f4',
          '400': '#4346ef',
          '500': '#1317dd',
          '600': '#0b0eb7',
          '700': '#080b91',
          '800': '#06086f',
          '900': '#04064d',
          '950': '#030430'
        },
      },
    },
  },
};
CSS Variables
css
:root {
  --brand-50: #f1f1fe;
  --brand-100: #dedffc;
  --brand-200: #b9baf9;
  --brand-300: #8587f4;
  --brand-400: #4346ef;
  --brand-500: #1317dd;
  --brand-600: #0b0eb7;
  --brand-700: #080b91;
  --brand-800: #06086f;
  --brand-900: #04064d;
  --brand-950: #030430;
}

Frequently Asked Questions

How does Tailwind CSS generate color shades?

Tailwind defines 11 shades per color (50, 100–900, 950), going from very light to very dark. The shades are hand-tuned for perceptual uniformity — equal visual steps between each level. Tip: shade 500 is typically the 'base' color, with lighter shades for backgrounds and darker shades for text and emphasis.

How do I create a custom color palette for Tailwind?

Add your colors to the theme.extend.colors section of tailwind.config. You can define a full shade scale (50-950) or single values. This generator creates the full shade map from any base color. Tip: always include shades 50 (lightest background), 500 (primary), and 900/950 (text) at minimum.

What color format should I use in Tailwind config?

Tailwind v4 works best with oklch() or hsl() for perceptual uniformity. Hex codes work too but don't support opacity modifiers natively (Tailwind handles this). Tip: use CSS variables with oklch values for the most flexible setup — this enables automatic opacity utilities like bg-primary/50.

How many shades do I need for a design system?

The standard Tailwind scale uses 11 shades (50-950). For most projects, shades 100, 300, 500, 700, 900 cover backgrounds, borders, buttons, hover states, and text. A minimal palette of 5 shades works for simple apps. Tip: always test your lightest shade (50) and darkest shade (950) in both light and dark mode.

How do I keep colors accessible across shades?

Pair light shades (50-200) with dark shades (700-950) for text to meet WCAG contrast ratios. As a rule of thumb, 500-shade text on a 50-shade background typically passes AA. Tip: use the Color Contrast Checker tool alongside this generator to verify your shade combinations meet accessibility standards.