Tailwind Color Palette Generator

Generate custom Tailwind CSS color palettes. Create color scales from a base color with proper naming. Export as Tailwind config.

Color (hex or rgb)

Color Name

Picker

Generated Palette

Tailwind Config

colors: {
  'custom': {
    50: '#f1f1fe',
    100: '#e3e3fc',
    200: '#bdbff9',
    300: '#8f91f5',
    400: '#575af0',
    500: '#151aea',
    600: '#1215c5',
    700: '#0e119f',
    800: '#0b0d7a',
    900: '#080a5e',
    950: '#050638',
  }
}

What is Tailwind Color Palette Generator?

Tailwind Color Palette Generator is a free online tool that creates a complete 11-shade color palette from any single base color, following the Tailwind CSS numeric shade convention. Tailwind CSS uses a scale from 50 (lightest) to 950 (darkest) for its built-in color palettes. When building a custom design system or brand theme, you need a consistent range of shades for backgrounds, text, borders, and interactive states. This tool generates that full range automatically, calculates WCAG contrast ratios for each shade against both white and black, and exports the palette as a ready-to-use Tailwind config object.

How to Use This Tool

Enter a hex color code or RGB value in the input field, or use the color picker to select your base color visually. Optionally set a custom color name for the Tailwind config output. The tool instantly generates all 11 shades from 50 to 950. Click any shade to copy its hex value. Each shade displays WCAG contrast ratios against white and black backgrounds with AA and AAA compliance badges. Copy the generated Tailwind config object and paste it directly into your tailwind.config.js or tailwind.config.ts file.

Common Use Cases

Creating custom brand color palettes that follow the Tailwind shade convention
Ensuring color accessibility by checking WCAG contrast ratios for every shade
Generating consistent color scales for design systems and component libraries
Quickly producing a full palette from a single brand color for prototyping

Why Use a Client-Side Tool?

All color calculations and palette generation happen entirely in your browser. No data is sent to any server, which means your brand colors and design decisions remain private. The tool requires no account, works offline after the page loads, and provides instant results. The generated config output is standard JavaScript that works with any version of Tailwind CSS.

Frequently Asked Questions

What do the AA and AAA contrast labels mean?

AA and AAA refer to WCAG (Web Content Accessibility Guidelines) contrast levels. AA requires a minimum contrast ratio of 4.5:1 for normal text and is the baseline standard for accessibility. AAA requires 7:1 and provides enhanced readability. Shades marked "Fail" do not meet the minimum 4.5:1 ratio and should not be used for text on that background color.

How are the shade lightness values determined?

The tool uses calibrated lightness targets that match the Tailwind CSS default palette distribution. Shade 50 is set to 97% lightness, shade 500 to 50%, and shade 950 to 12%. The hue and saturation from your base color are preserved across all shades while the lightness is adjusted to match each step in the scale.

Can I use the generated palette with Tailwind CSS v4?

Yes. The generated config object uses the standard colors format compatible with both Tailwind CSS v3 and v4. In v4, you can add custom colors using the CSS-based configuration approach or the JavaScript config file. The hex values work with any configuration method.

Understanding the Tailwind CSS Color System: Shades, Custom Palettes and Accessibility

Learn how Tailwind CSS organizes colors into shade scales, how to add custom palettes, generate balanced color ramps and ensure WCAG accessibility in dark and light modes.