Tailwind Color Generator

Generate a full Tailwind CSS color scale (50–950) from any base color, with live swatches and copy-ready Tailwind v4 @theme or v3 config output.


  

  
  

    
  



    

    

      
Generate a complete Tailwind CSS color palette from a single color with this free Tailwind color generator. Pick or paste any hex value, name your color, and instantly get all eleven Tailwind shades — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — as live swatches plus copy-ready config. Choose Tailwind v4 @theme CSS variables or a classic v3 JavaScript config object, all computed privately in your browser.

      

        
What is a Tailwind color generator?

        
A Tailwind color generator turns one base color into the full set of shades Tailwind CSS expects for a custom color. Tailwind's built-in palettes (like blue or rose) each ship eleven tints and shades keyed 50 through 950, from very light to very dark. When you add your own brand color you need the same spread so utilities like bg-brand-100 or text-brand-700 work. This tool builds that spread for you by keeping the hue of your base color and stepping the lightness across the standard Tailwind stops, then anchoring your exact color to its closest shade so it stays recognizable.

        
      

      

        
How to generate a Tailwind color scale

        
Start from any color and get a paste-ready palette in seconds. Everything updates live as you type.

        
  1. Pick a color with the swatch or paste a hex value such as #4f46e5.
  2. Type a name for the color, for example brand or primary.
  3. Review the 50–950 swatches to check the light and dark ends.
  4. Choose Tailwind v4 @theme or v3 config as the output format.
  5. Click Copy config and paste it into your Tailwind setup.

      

      

        
Tailwind v4 vs v3 output

        
Tailwind v4 configures colors with CSS variables inside an @theme block, so the tool outputs lines like --color-brand-500. Tailwind v3 uses a JavaScript config, so it outputs a colors object under theme.extend that you drop into tailwind.config.js. Pick whichever matches your project and the generated keys will line up with Tailwind's utility class names.

        
      

      

        
Why use this Tailwind color generator?

        
  • Generates all eleven Tailwind shades (50–950) from a single base color.
  • Outputs both Tailwind v4 @theme variables and v3 config objects.
  • Live swatches show every shade with its hex value.
  • Names your color so the keys match Tailwind utility classes.
  • Anchors your exact color to its nearest shade so it stays true.
  • 100% free and private — everything runs in your browser.

      

      

        
Frequently asked questions

        

          
What shades does Tailwind use?

          
Tailwind color scales use eleven stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The 50 stop is the lightest tint and 950 is the darkest shade, with 500 usually treated as the base. This generator produces every one of those stops so your custom color behaves like Tailwind's built-in palettes.

        

        

          
How is the palette calculated?

          
The tool converts your base color to HSL, keeps its hue, and steps the lightness across Tailwind's standard stops to create lighter tints and darker shades. It nudges saturation slightly so the light and dark ends stay vivid, and it pins your exact input color to whichever stop is closest in lightness so the palette still represents the color you chose.

        

        

          
How do I add the generated colors to Tailwind?

          
For Tailwind v4, paste the @theme block into your CSS so the --color-name-* variables are registered. For Tailwind v3, paste the colors object into theme.extend in tailwind.config.js. Either way you can then use classes like bg-brand-500 or text-brand-200 right away.

        

        

          
Can I name the color anything I want?

          
Yes. Type any name like brand, primary, or accent. The tool lowercases it and replaces spaces and special characters with hyphens so the result is a valid Tailwind color key, which becomes the prefix in classes such as bg-accent-300.

        

        

          
Is my color data sent anywhere?

          
No. The entire palette is generated in your browser with JavaScript. Nothing about your colors or config is uploaded, so it is safe to use for unreleased brand work.