Tailwind Palette Generator

What is the Tailwind CSS Color System?

Unlike traditional CSS frameworks that use a handful of named colors, Tailwind CSS employs a numeric shade system ranging from 50 (lightest) to 950 (darkest). Each number represents a specific brightness level, and the entire scale is designed to be perceptually uniform — meaning the visual difference between 100 and 200 should feel similar to the difference between 700 and 800.

This approach gives developers fine-grained control over color usage. Need a subtle background? Use bg-blue-50. Need a bold heading? Use text-blue-800. The 500 shade serves as the base identity of the color, and all other shades are derived from it. If you are migrating from another framework, check out our Bootstrap color generator for a semantic color approach.

How to Add Custom Colors to Tailwind CSS

To add a custom color palette to your Tailwind project, you extend the theme object inside tailwind.config.js. Under theme.extend.colors, you define a key (like brand or primary) and provide an object with shade values from 50 to 950. Here is an example:

            module.exports = {
                theme: {
                  extend: {
                    colors: {
                      brand: {
                        50: '#eff6ff',
                        100: '#dbeafe',
                        500: '#3b82f6',
                        900: '#1e3a5f',
                        // ... all shades
                      }
                    }
                  }
                }
              }
         

Once configured, you can use utility classes like bg-brand-500, text-brand-900, or border-brand-200 anywhere in your HTML. Our generator produces exactly this format, so you can copy-paste it directly into your config file. Need to find the right base color first? Try our color converter tool to switch between HEX, RGB, and HSL formats.

What Do the Shade Numbers (50–950) Mean?

Each shade number in Tailwind's color scale corresponds to a specific role in UI design:

• 50–100: Very light tints — ideal for subtle backgrounds, hover states on light surfaces, and disabled element backgrounds.
• 200–300: Light variants — suitable for borders, dividers, and secondary backgrounds in cards and panels.
• 400: A lighter accent — works well for placeholder text, icons, and secondary interactive elements.
• 500: The base color — your primary brand identity. Used for primary buttons, links, active states, and key UI elements.
• 600–700: Darker accents — great for button hover states, selected items, and text that needs emphasis without being too heavy.
• 800–900: Dark shades — perfect for headings, dark backgrounds, and high-contrast text on light surfaces.
• 950: The darkest shade — introduced in Tailwind v3.3, used for very dark backgrounds, deep shadows, and near-black surfaces with a color tint.

Why Use a Tailwind Palette Generator?

Creating a perceptually uniform color scale by hand is tedious and error-prone. Simply lightening or darkening a hex value in equal steps does not produce visually consistent results — human color perception is non-linear. A dedicated generator solves this by:

• Accuracy: Using weighted mix ratios that approximate Tailwind's own perceptual curve for each shade level.
• Speed: Generating all 11 shades (50–950) in under a second from a single color pick.
• Consistency: Ensuring your custom palette feels as cohesive as Tailwind's built-in colors like blue, slate, or emerald.
• Zero Setup: No design tools, no color theory knowledge, no manual calculations — just pick and export.

How to Use This Tool

Generating a custom Tailwind color palette takes three simple steps:

1. Pick a Base Color: Use the color picker at the top to select your brand color. This automatically becomes the 500 shade in your palette.
2. Generate: Click the "Generate" button. The tool calculates all 11 shades (50 through 950) and displays them as clickable swatches.
3. Copy & Paste: Click "Copy" on the config output to copy the tailwind.config.js snippet. Paste it directly into your project's config file under theme.extend.colors.

You can also click any individual swatch to copy its hex value to your clipboard — handy for quick prototyping outside of Tailwind.

Tailwind v3 vs v4 Color Configuration

In Tailwind CSS v3, colors are configured via tailwind.config.js using JavaScript objects, which is exactly what this generator outputs. Tailwind v4 introduces a CSS-first configuration approach where you define custom themes using CSS custom properties and the @theme directive:

            @theme {
              --color-brand-50: #eff6ff;
              --color-brand-100: #dbeafe;
              --color-brand-500: #3b82f6;
              --color-brand-900: #1e3a5f;
            }
         

The hex values generated by this tool work in both versions — you just need to format them according to your preferred configuration style. For more on color theory behind these scales, read our guide to color palettes.