Tailwind palette generator
Turn one brand colour into a full 50 to 950 shade scale and copy it as Tailwind v4, v3 or CSS variables.
Contrast and values
| Shade | Hex | OKLCH | On white | On black |
|---|
A full colour scale from one brand colour
Design systems need more than one blue. They need a pale blue for backgrounds, a hover state a little darker than the button, a border colour, a text colour with enough contrast, and a dark mode set. Tailwind CSS popularised the answer: an eleven-step scale from 50 to 950 for every colour. Creating that scale by hand, so that the steps look evenly spaced and keep the same hue, takes a designer an hour per colour.
Enter your brand colour and a name. The generator builds the scale in the OKLCH colour space: your colour is the 500 shade, the lighter steps keep the hue and lose chroma as they approach white, and the darker steps do the same towards black. Colours that fall outside the sRGB gamut are brought back by reducing chroma rather than being clipped, which avoids hue shifts. The result is available as a Tailwind v4 @theme block using oklch() values, a Tailwind v3 tailwind.config.js with hex values, and plain CSS custom properties.
Using the result
- Use 50 to 200 for backgrounds and borders, 500 to 700 for buttons and links, 800 to 950 for text on light backgrounds.
- Check the contrast column: a 500 or 600 shade against white often needs to be 600 or darker to reach 4.5:1.
- Treat the output as a strong starting point; a designer may still hand-tune a shade or two.
- For very light, very dark or grey inputs the scale stays close to neutral, as it should.
The conversion uses the published OKLab matrices and runs in your browser; nothing is uploaded.
Frequently asked questions
What is a 50 to 950 shade scale?
Tailwind describes each colour with eleven shades, from 50 (almost white) to 950 (almost black), with 500 as the mid tone. Using the same scale for every colour makes it easy to pair them, for example 100 for backgrounds, 600 for buttons and 900 for text.
Why OKLCH?
OKLCH describes colour as lightness, chroma and hue in a perceptually uniform space, so equal steps in lightness look equal and the hue stays put while you darken or lighten. Tailwind v4 defines its palette in OKLCH for that reason.
Does your colour become the 500 shade?
Yes. The scale is built around the colour you enter, which is used exactly as the 500 shade; lighter and darker shades are generated from it with the same hue and gradually changing chroma.
How do I check the colours are accessible?
The table shows the contrast ratio of each shade against white and black. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text and UI components.