Tailwind Color Generator
A 50–950 Tailwind shade palette from one colour, in OKLCH, for v3 or v4.
About this tool
Pick or paste your brand colour and name it. You get eleven shades from 50 to 950, each with its hex code and a label saying whether white or black text passes WCAG AA on it. Your exact colour sits at the step that matches its lightness. Click a swatch to copy it, or copy the whole palette in the format your project uses.
How the shades are generated
A Tailwind palette needs light tints for backgrounds (50–200), mid tones for borders and icons (300–500), strong shades for buttons and links (500–700) and deep shades for text and dark mode (800–950). Mixing your colour with white and black in RGB gives muddy, uneven steps, so this generator works in OKLCH, the perceptual colour space Tailwind v4 uses for its own palette. Lightness for each step follows Tailwind's default scale, from about 97% at 50 to 28% at 950. Chroma (colourfulness) peaks around 500–600 and tapers towards both ends, so tints stay soft and dark shades don't glow. The hue stays fixed. Your input colour is placed exactly where its lightness fits best: Tailwind's own blue-500, #3b82f6, lands on 500, while a bright yellow such as #facc15 lands on 200. Shades too vivid for an sRGB screen are pulled back into gamut by lowering chroma. In v4, paste the @theme block into your CSS to get utilities like bg-brand-500. In v3, add the object under theme.extend.colors. Honest limits: Tailwind's designers adjust every palette by hand, so the results are close in spirit, not identical, and the AA labels only test pure white and black text. The colour palette generator, the colour converter and the colour scheme generator are related, and Hex colour codes, explained explains hex codes.
Frequently asked questions
How do I add a custom colour to Tailwind?
In v4, add --color-name-500 and the other steps inside @theme in your CSS. In v3, add a colours object under theme.extend.colors in tailwind.config.js.
Why OKLCH instead of HSL?
OKLCH is perceptually uniform, so equal lightness steps look evenly spaced. HSL lightness varies a lot between hues.
Which shade will my colour be?
Whichever step its lightness is closest to. A mid blue becomes 500, a pale yellow 200 and a near-black navy 950.
Is anything saved?
No. The palette is generated in your browser and nothing is stored or sent.