Tailwind CSS Color Generator

Enter a base color to generate a full Tailwind CSS color palette (50-950). Copy the config snippet for your tailwind.config.js.

Color Palette Preview

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
        50: '#f3f6fc',
        100: '#e3ebf7',
        200: '#c0d5f7',
        300: '#92b6f1',
        400: '#538ce9',
        500: '#0b64f4',
        600: '#0954cd',
        700: '#0846ab',
        800: '#11356e',
        900: '#0c244b',
        950: '#07152c',
        },
      },
    },
  },
}

How to Use the Tailwind Color Generator

  1. 1.Click the color swatch or type a HEX color code in the input field.
  2. 2.Set a color name that matches your design system (e.g., "brand", "primary").
  3. 3.Preview all 11 shade levels (50 through 950) generated from your base color.
  4. 4.Click any shade to copy its HEX value, or copy the full config snippet for your tailwind.config.js.

Frequently Asked Questions

How does the palette generation work?

The tool converts your base color to HSL, then generates 11 shades by varying the lightness value from very light (97%) to very dark (10%), while slightly adjusting saturation for more natural results.

Can I use this with Tailwind CSS v4?

Yes. The generated config snippet works with both Tailwind CSS v3 and v4. For v4 with CSS-based config, you can use the HEX values directly in your CSS custom properties.

Why do some shades look different from the default Tailwind palette?

Default Tailwind colors are hand-tuned by designers. This generator uses an algorithmic approach based on HSL lightness, which produces good results but may differ slightly from hand-crafted palettes.

Can I generate multiple color palettes?

Change the color name and base color to generate different palettes. Copy each config snippet and combine them in your tailwind.config.js under the colors key.