HH Color Lab
Tailwind Shade Generator

One color in, eleven shades out.

Turn one color into a Tailwind shade scale from 50 to 950.

Tailwind shade generator

Turn one color into a Tailwind shade scale from 50 to 950. Pick a color, or type any code.

Your shade scale

Code


  



                    






How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
  1. Choose your main color
    • Press the color square or type a code.
    • Give it a name, for example brand or primary.
    • Choose which shade your color should be (500 is the usual middle).
    Why we do this: Tailwind uses one color in 11 shades, so we start from the color that matters most to you.
  2. Check the shades
    • Look at the row of swatches from 50 (lightest) to 950 (darkest).
    • Hover or tap a swatch to copy its code.
    • The small note on each swatch tells you whether white or black text is easier to read.
    Why we do this: A good scale has even steps and keeps the same hue, so the color family feels consistent.
  3. Copy the code
    • Choose a format: Tailwind config, Tailwind v4, CSS variables or JSON.
    • Press Copy code.
    • Paste it into your project.
    Why we do this: The code gives you classes like bg-brand-500 or text-brand-900 immediately.
Questions people ask
Quick answers.
How are the shades calculated?
Using the OKLCH color space, which keeps hue steady and lightness even. Very light and very dark shades have less color strength, as in Tailwind's own palette. If a shade is too vivid for sRGB, it is reduced to fit.
Will they be identical to the official Tailwind colors?
No. They are generated for your color, in the same spirit, so they will be close in structure but not equal to the official named colors.
Why can I choose which shade my color is?
If your color is dark, it fits better as 700 than as 500. Choosing the right anchor keeps your exact color in the scale.