Advertisement
Guide
About the Tailwind Shade Generator
Tailwind expects each colour to come as a scale — 50 through 950 — but a brand guide usually gives you exactly one hex value. This tool fills in the rest, keeping your colour in the scale at whichever step it naturally belongs to.
Pick a colour, name it, and copy the result straight into your theme.
Why not just lighten and darken in HSL?
Because HSL lightness is not perceptual. Setting yellow and blue to the same HSL lightness produces a yellow that looks glaring and a blue that looks almost black — the numbers match but your eyes disagree. That is the reason hand-rolled HSL ramps so often have one or two shades that feel wrong. This generator works in OKLCH, a perceptually uniform space, so an even step in lightness actually looks even.
How the scale is built
Each step has a target lightness modelled on Tailwind's own palette, and chroma follows a curve that peaks around the middle of the scale and fades toward both ends — which is why 50 reads as a tint rather than a pale version of the hue, and 950 stays rich instead of going flat grey. Your original colour is kept exactly as you entered it at its nearest step, marked base.
Keeping colours inside sRGB
Not every OKLCH value can be shown on a normal screen. When a generated shade falls outside the sRGB gamut, this tool reduces its chroma until it fits rather than clamping the red, green and blue channels independently — clamping shifts the hue, so a blue can drift towards purple at the dark end. Reducing chroma keeps the hue intact and simply makes the colour less saturated.
Tailwind v4 vs v3 output
Tailwind v4 moved theme configuration into CSS, so the v4 output is an @theme block of custom properties using oklch() values. The v3 output is the familiar theme.extend.colorsobject with hex values. Either way, the generated names follow Tailwind's convention, so bg-brand-500 and text-brand-900 work as you would expect.
A note on matching Tailwind exactly
This produces a perceptually even ramp — it is not trying to reproduce Tailwind's built-in palettes. Those are hand-tuned per hue, with deliberate hue shifts at the dark end that no single formula reproduces. If you feed in #3b82f6 you will get something very close to Tailwind blue, but not identical, and that is expected.
How to use it
- 1Pick your brand colour with the swatch or paste a hex value.
- 2Give it a name — this becomes the bg-<name>-500 class prefix.
- 3Check the preview to see how the scale behaves on buttons, badges and links.
- 4Choose your output format and copy it into your theme.
Frequently asked questions
Which step will my colour end up at?
Whichever step is closest in perceptual lightness — most mid-tone brand colours land on 500 or 600. That step is marked "base" and keeps your exact hex value.
Why is this different from Tailwind’s own blue?
Tailwind’s palettes are hand-tuned per hue and shift slightly in hue at the dark end. This generator applies one consistent perceptual formula, so results are close but not identical.
What is OKLCH and why does it matter?
OKLCH is a perceptually uniform colour space. Unlike HSL, equal steps in its lightness look equally spaced to the eye, which is what makes a generated ramp feel balanced across different hues.
Does this work with Tailwind v4?
Yes. Choose the Tailwind v4 output and you get an @theme block with oklch() values, which is how v4 defines theme colours in CSS.
Can I use it without Tailwind?
Yes — the CSS variables and JSON outputs are framework-agnostic and work in any project.