Tailwind color generator

From one HEX code to eleven shades

Tailwind CSS names each color's shades from 50 (lightest) to 950 (darkest): 50, 100, 200 and so on up to 900, then 950. Utility classes like bg-brand-50, text-brand-900 and hover:bg-brand-700 all depend on having that full set. Most brands start with one color, so this generator builds the other ten.

How the scale is built

1. Your color is converted to OKLCH.
2. Each step has a target lightness, based on the lightness curve of Tailwind's own default palette: about 97% for 50, 64% for 500 and 26% for 950.
3. Your color is pinned to the step whose target lightness is nearest its own. It isn't forced to 500. A pale brand color might land on 300, and a dark one on 800.
4. Neighboring steps are nudged by the same offset, fading out with distance, so the scale flows smoothly through your exact color.
5. Chroma is reduced at the very light and very dark ends, where saturated colors would fall outside sRGB or look neon.

The pinned step is marked with a star, and your original HEX code is kept exactly as entered at that step.

Example: #D9481C

Step	HEX		Step	HEX
50	#FFF6F4		600 ★	#D9481C
100	#FFE8E2		700	#B63B15
200	#FFD2C5		800	#9C2B04
300	#FFAE98		900	#862200
400	#FF7651		950	#4A0E00
500	#EE5B32

The vermilion lands on 600 because its OKLCH lightness (60.1%) is closest to that step's target. That's useful information in itself. If you'd planned to use bg-brand-500 for buttons, the generated 500 is a little lighter than your brand color, so bg-brand-600 is the one that matches.

Contrast at every step

Each swatch shows W (contrast with white) and D (contrast with near-black #1C1B18). In most generated scales:

• 50 to 300 carry dark text comfortably;
• 600 and darker carry white text at AA (4.5:1);
• 400 and 500 are the in-between zone. Check them before using them behind text.

The preview card uses common pairings: a 50 background, 200 border, 900 text, a 100 badge with 800 text, and a 600 button. If the button text can't reach 4.5:1 in white, the preview switches it to the 950 shade, so you can see the problem right away.

Output formats

• v4 @theme: paste into your main CSS file. Tailwind 4 creates the brand-* utilities from --color-brand-* variables.
• v4 in OKLCH: the same, with oklch() values. Tailwind 4's default palette is defined in OKLCH, so this matches its style and keeps more precision.
• v3 config: a module.exports block for tailwind.config.js, placed under theme.extend.colors so the default colors stay available.
• CSS variables: plain custom properties for use without Tailwind.

Change Color name to rename the scale, for example primary, accent or your brand name. Use lowercase letters, numbers and hyphens.

Tips

• Generate a gray too. Most interfaces need a neutral scale. Enter a gray with a hint of your brand hue, such as an OKLCH chroma around 0.01, to get warm or cool grays that match.
• Check your 500. Designers often expect 500 to be "the" brand color. If yours pins elsewhere, decide which step your components should reference.
• Don't fight the scale. If one generated step looks off, adjust the base color slightly rather than hand-editing a single shade. Hand edits tend to break the evenness of the ramp.

Related tools

The monochromatic color scheme generator builds an evenly spaced ladder with a live interface preview. The color shades generator gives classic tints, shades and tones. To assign brand roles and check them together, use the website color scheme builder.

FAQ

Is this the official Tailwind algorithm?

No. Tailwind's palette was hand-tuned by its designers, and there is no official generator. This tool follows the same lightness curve so generated scales sit comfortably next to the built-in colors.

Will it work with Tailwind v3?

Yes. Use the v3 config output. The v4 outputs need Tailwind 4.0 or later.

Why does the 950 step look so dark?

In Tailwind's own palette, 950 is very dark, about 26% OKLCH lightness. It's meant for text on light backgrounds and for dark-mode surfaces.