Tailwind color palette generator
Turn one brand color into a full 50–950 Tailwind scale. Shades are built in OKLCH like Tailwind v4’s own palette, with contrast shown for every step.
Copy the config
@theme {
--color-brand-50: oklch(97.2% 0.014 355);
--color-brand-100: oklch(93.7% 0.032 355.5);
--color-brand-200: oklch(88.4% 0.064 356.2);
--color-brand-300: oklch(80.9% 0.114 357.3);
--color-brand-400: oklch(70.4% 0.186 357.6);
--color-brand-500: oklch(63.7% 0.227 357.8);
--color-brand-600: oklch(60% 0.244 358.6);
--color-brand-700: oklch(50.5% 0.205 359.5);
--color-brand-800: oklch(44.5% 0.18 359.8);
--color-brand-900: oklch(39.6% 0.152 0.2);
--color-brand-950: oklch(25.9% 0.103 0.7);
}In use
bg-brand-50, text-brand-900
Body copy stays readable because 900 on 50 is 9.31:1.
bg-brand-600brand-200 / 800 badgeHow the shades are built
Tailwind CSS v4 defines every default color in OKLCH, and its scales share a lightness curve: 50 sits near 97% lightness, 500 around 64%, 950 around 26%. Chroma (colourfulness) peaks in the middle of the scale and tapers at both ends, because very light and very dark colors cannot hold much saturation in sRGB. This generator follows that curve, keeps your hue with a slight shift toward the dark end (like Tailwind’s blues drifting toward indigo), and gamut-maps anything the screen cannot show by reducing chroma rather than clipping.
Mixing a color with white and black in RGB — the old “tint and shade” method — produces muddy, greyish darks and chalky lights. Stepping lightness in a perceptual space gives shades that look evenly spaced. Read more in OKLCH explained.
Frequently asked questions
How do I generate Tailwind color shades from one color?
Enter your brand color. The tool places it on the 50–950 scale at the step with the closest lightness, then builds the other ten shades by holding its hue and moving lightness in OKLCH, with chroma tapered toward the light and dark ends — the same shape as Tailwind’s own v4 palette.
Does it work with Tailwind CSS v4?
Yes. Choose “Tailwind v4” to get an @theme block with --color-name-50 … --color-name-950 variables in oklch(), which is how Tailwind v4 defines its default colors. “Tailwind v3” gives a colors object for tailwind.config.js with hex values.
Why is my exact color not the 500 shade?
Tailwind’s scale is anchored by lightness: 500 is a mid-tone around 64% OKLCH lightness. A dark navy belongs at 800 or 900. Keeping your color at its natural step keeps the rest of the scale balanced. Turn off “keep my exact color” to get a perfectly smooth ramp instead.
Which shades should I use for text?
Check the contrast column: on a white background, shades that show AA (4.5:1) are safe for body text, usually 600 or darker. For dark mode, use 300 or lighter on 900–950 backgrounds.