Tailwind CSS Palette Generator

How to use the Tailwind Palette Generator

1. Enter your brand color and a name such as brand.
2. The scale is generated in OKLCH so lightness steps look even. Your color is placed at the closest step.
3. Choose an export format and copy the code.

Tailwind Palette Generator features

• Full 11-step scale from 50 to 950, generated from one color
• Built in OKLCH so every step has even perceived lightness
• Your exact color kept at the closest step
• WCAG AA text color shown on every swatch
• Export for Tailwind v3 config, Tailwind v4 @theme, CSS variables, SCSS, JSON, JS array, SVG or PNG
• Custom color name, remembered in your browser with your color

Generate a Tailwind color scale from one color

Tailwind CSS ships with color scales like blue-50 to blue-950, but your brand color is probably not one of them. This Tailwind palette generator turns any single color into a complete, balanced 11-step scale (50, 100, 200 … 900, 950) that works just like the built-in colors. Enter your color and a name such as brand or primary, and copy the result into your project.

The scale works in plain CSS too, so it is just as useful for design systems, Bootstrap themes, Figma libraries or any project that needs light-to-dark variations of a color.

How the scale is built

Each step of the scale is generated in OKLCH, a perceptual color space, rather than by mixing with white and black. That matters because a simple mix makes some hues wash out or turn muddy, and makes yellow look far brighter than blue at the same step. In OKLCH every step has a consistent perceived lightness, so brand-500 and accent-500 feel equally strong even when one is yellow and the other is blue, just like Tailwind's own palette.

Your exact color is kept unchanged at the step closest to its lightness (marked with ● in the scale), and the other steps are built around it. If your brand color is fairly light, it might land on 300 or 400; if it is dark, on 700 or 800.

What each step is for

Each swatch also shows whether black or white text passes WCAG AA (4.5:1) on it, so you can choose text colors with confidence. For other combinations, use the Contrast Checker.

Export for Tailwind v3, Tailwind v4 or plain CSS

Tailwind v4 configures colors in CSS with the @theme directive:

@theme {
  --color-brand-50: #EEF2FF;
  /* … */
  --color-brand-950: #1E1B4B;
}

Tailwind v3 uses the theme.extend.colors section of tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 50: '#EEF2FF', /* … */ 950: '#1E1B4B' },
      },
    },
  },
};

After adding either one, classes like bg-brand-600, text-brand-50 and border-brand-200 work throughout your project. You can also export the scale as CSS custom properties, SCSS variables, JSON design tokens, a JavaScript array, an SVG or a PNG image.

Tips for a great custom palette

• Generate a scale for each role. Most projects need a primary color, a neutral gray (try a slightly tinted gray rather than pure gray) and status colors for success, warning and danger.
• Use a clean name. Names must start with a letter and can contain letters, numbers and hyphens, such as brand, primary or sea-blue.
• Pick colors first. Find your main colors in the Color Palette Generator or take them from a photo with the Image Color Extractor, then turn each into a scale here.
• Need a different number of steps? The Shades & Tints Generator creates scales with 3 to 20 steps.

Tailwind Palette Generator: frequently asked questions