Tailwind color scale generator
One color becomes a 50 to 950 scale with even perceptual steps, built in OKLCH.
How to generate a Tailwind color scale
- Enter a base color with the color picker or a six-digit hex code.
- Name the token, for example brand. The class preview updates to match, such as bg-brand-500 and text-brand-700.
- Review the shade spectrum from 50 to 950. Your color sits at the step closest to its lightness, and clicking a step copies its oklch() value.
- Choose Tailwind v4 or v3, then copy or download the code, or install the scale with the shadcn command.
What you can do
Even perceptual steps
Lightness follows a curve close to the Tailwind v4 default palette, so the steps look evenly spaced.
Your color stays exact
The color you enter is not altered. It lands at its own step, and the other steps are built around it.
Inside sRGB
Hue is held constant and chroma is reduced only where a step would fall outside the sRGB gamut.
Tailwind v4 and v3 export
Copy an @theme block in oklch() for Tailwind v4, or a theme.extend.colors entry in hex for Tailwind v3.
Light and dark examples
See the scale used on a light and on a dark surface before you copy it.
Install with shadcn
Add the scale to a Tailwind v4 project as --color-name-50 to --color-name-950 with one command.
Frequently asked questions
How do I generate Tailwind color shades from one color?
Enter your base color, choose a token name and copy the result. The generator builds a 50 to 950 scale around your color, ready to paste into a Tailwind v4 @theme block or a Tailwind v3 config.
What do the numbers 50 to 950 mean in Tailwind?
They are shade steps from the lightest, 50, to the darkest, 950. Lower numbers are lighter tints and higher numbers are darker shades. 500 is the middle of the scale and is usually the main brand shade.
Why use OKLCH for a Tailwind color scale?
Tailwind v4 defines its default palette in OKLCH. In OKLCH, equal changes in lightness look like equal changes, so the steps of a scale look even, while in HSL the apparent brightness jumps around from hue to hue.
How do I add custom colors to Tailwind v4?
Paste the generated @theme block into your CSS after @import "tailwindcss". Each step becomes a variable such as --color-brand-500, and utilities like bg-brand-500 work straight away.
Does this work with Tailwind v3?
Yes. Choose Tailwind v3 (hex) to get a theme.extend.colors entry for tailwind.config.js.
Where can I see Tailwind's own default colors?
The Tailwind default colors page lists all 22 families from 50 to 950 with their v4 OKLCH values, sRGB hex and the older v3 hex.