Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
Free tool

Tailwind color generator

Pick a base color and generate a full Tailwind CSS shade scale from 50 to 950. Click any swatch to copy its hex value. Export as a ready-to-paste Tailwind config.

js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
    50: '#f3f6fc',
    100: '#e0eafa',
    200: '#bed4f8',
    300: '#8db5f7',
    400: '#4f8ff7',
    500: '#3b82f6',
    600: '#044ec8',
    700: '#033fa0',
    800: '#053075',
    900: '#062251',
    950: '#05152e',
        },
      },
    },
  },
}

What is Tailwind Color Generator?

A Tailwind color generator takes a single base color and computes the full 11-shade scale that Tailwind CSS expects: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Tailwind ships with carefully crafted default palettes, but custom brand colors need the same shade distribution to work correctly with utility classes like bg-primary-100, text-primary-700, and ring-primary-500. Manually picking 11 harmonious shades is tedious and error-prone. This tool uses HSL-based interpolation to generate lighter tints for the low shades and darker tones for the high shades, keeping hue consistent and adjusting saturation naturally so the entire scale looks cohesive. The base color becomes shade 500 (the midpoint), lighter shades are generated by increasing lightness and slightly reducing saturation, and darker shades decrease lightness while maintaining richness. You get a visual grid of all 11 swatches with hex values, click any swatch to copy it, and export the complete colors configuration ready to paste into tailwind.config.js. All computation runs in your browser with no server calls.

How to Use Tailwind Color Generator

  1. 1

    Pick your base color

    Use the color picker or type a hex code directly. The base color becomes shade 500 in the generated scale. You can also click one of the 8 starter colors to begin from a popular palette.

  2. 2

    Review the shade scale

    All 11 shades from 50 (lightest) to 950 (darkest) are displayed in a visual grid. Each swatch shows its shade number and hex value. Click any swatch to copy its hex code to your clipboard.

  3. 3

    Export the Tailwind config

    Set the variable name (default: primary) and click Copy Config to get a complete tailwind.config.js snippet. Paste it into your theme.extend.colors section and all Tailwind utilities will use your custom palette.

Features

  • Generates all 11 Tailwind shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  • HSL-based algorithm that preserves hue and adjusts saturation naturally
  • Visual color picker with hex text input for precise control
  • 8 popular starter colors to begin from established palettes
  • Click any swatch to instantly copy its hex value
  • Exports ready-to-paste tailwind.config.js colors object

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool
See all CSS & Design tools

Frequently Asked Questions

Why 11 shades instead of 10?+
Tailwind v3+ includes shade 950 in addition to the traditional 50-900 range. The 950 shade provides an extra-dark option useful for dark mode backgrounds and high-contrast text, giving designers more flexibility at the dark end of the spectrum.
How does the algorithm generate lighter and darker shades?+
The tool converts your base hex color to HSL (hue, saturation, lightness), keeps the hue constant, and interpolates lightness values across the 11 stops. Lighter shades get higher lightness with slightly reduced saturation to avoid looking washed out. Darker shades get lower lightness with maintained saturation for richness.
Can I use this with Tailwind v4?+
Yes. The generated shade scale object works with both Tailwind v3 and v4. In v4 with CSS-first configuration, you can also use the hex values directly in your CSS theme definition. The shade numbers (50-950) are the same across versions.
What if my base color is very light or very dark?+
The generator always places your exact color at shade 500. If the base is very light, the darker shades will have more contrast. If very dark, the lighter shades will span a wider lightness range. For best results, choose a base color with medium lightness (40-60%).
How do I add multiple custom colors?+
Run the generator once per color, changing the variable name each time. Combine the exported objects in your tailwind.config.js — for example, one run with "primary" and another with "accent" gives you bg-primary-500 and bg-accent-500 utilities.
Do the generated colors meet accessibility contrast ratios?+
The shade spread is designed to create sufficient contrast between distant shades (e.g., 50 background with 900 text). However, always verify specific combinations with a contrast checker, especially for adjacent shades like 400 text on 500 background.