How to generate Tailwind color shades
- Pick your brand color or paste its hex code, and give the color a name such as
brandorprimary. - An 11-step scale from 50 (lightest) to 950 (darkest) appears, with your exact color placed at the step that matches its lightness and outlined.
- Copy the code for Tailwind CSS v4 (
@themevariables), Tailwind v3 (tailwind.config.js), plain CSS variables or JSON. - Use the classes as usual:
bg-brand-500,text-brand-900,border-brand-200.
How the scale is built
The shades are calculated in the OKLCH color space, which is perceptually uniform: equal steps in lightness look like equal steps to the eye, whatever the hue. That avoids the classic problems of HSL-based generators, such as yellows that never get dark and blues that jump in brightness. Each step targets the lightness of Tailwind's own default palette, keeps your hue, and tapers the chroma (colorfulness) towards the very light and very dark ends, as Tailwind's palettes do. Colors that fall outside the sRGB gamut have their chroma reduced until they can be displayed exactly.
Because your input is kept untouched, the 500 step is not always your color: a light brand color might land on 300 and a dark one on 700. That keeps the whole scale consistent with Tailwind's built-in colors, so brand-600 has about the same contrast as blue-600. Check text pairs with the contrast checker; 600 and darker on white usually pass WCAG AA.
Does this work with Tailwind v4?
Yes. Paste the @theme block into your main CSS file after @import "tailwindcss". The v3 config format is also available.
Why is my color not at 500?
Shades are placed by lightness so the scale matches Tailwind's defaults. Your exact color is preserved at the closest step.
Can I use the scale outside Tailwind?
Yes. Choose CSS variables or JSON for any framework or design tool.