Tailwind palette generator
One colour in, eleven shades out — 50 to 950, built in OKLCH like Tailwind v4's own palettes, with contrast checks and the code for v4, v3 and plain CSS. Nothing leaves your browser.
How to use the palette
v4: paste the @theme block into your CSS after @import "tailwindcss"; the classes
bg-brand-500, text-brand-700, border-brand-200 exist immediately.
v3: put the object under theme.extend.colors. Either way, use 500–600 for solid
buttons with white text, 50–100 for tinted backgrounds, 700–900 for text on light backgrounds.
Why OKLCH
HSL lightness lies: a 50 % yellow and a 50 % blue are nowhere near equally bright. OKLCH lightness is perceptual, so every 500 in your palette reads as the same weight, and the steps between shades are even. It's the reason Tailwind v4 rebuilt its palettes in it.
Our templates use exactly one brand colour plus neutrals — the landing page builder takes any hex from this page as its brand colour.
Questions
How are the shades generated?
In OKLCH, the colour space Tailwind v4 uses for its own palettes. Your colour keeps its hue; each step gets the lightness of the matching step in Tailwind's default scale and a chroma scaled from yours, then is pulled back into the sRGB gamut if needed. Your exact colour lands on the step whose lightness is closest.
Tailwind v4 or v3?
Both. v4 takes an @theme block with --color-name-50 … --color-name-950 in your CSS; v3 takes a colors entry in tailwind.config.js. Plain CSS variables are there too for anything else.
What do the AA badges mean?
WCAG contrast of white or black text on that shade: 4.5:1 or better passes AA for normal text. Use it to pick which step your buttons and badges can safely use.
Is anything uploaded?
No. The maths runs in your browser; nothing is sent anywhere.