How the scale is built
Tailwind's default palettes are not a straight line from white to black. Each step sits at a carefully chosen lightness, the light end is almost colorless, the middle carries full saturation, and the darkest steps pull back again so they do not look neon. This generator copies that shape, but does the math in OKLCH, the same color space Tailwind 4 uses for its own palette.
OKLCH splits a color into three numbers: L for perceived lightness (0 to 1), C for chroma (how colorful it is) and H for hue angle. Because L is perceptual, a blue-300 and a yellow-300 built this way look equally light, which HSL cannot promise.
The steps, in order
- Your color is converted from sRGB to linear light, then to OKLab, then to OKLCH.
- It is placed at the step whose target lightness is closest to its own (or the step you pick). That step keeps your exact HEX.
- Lighter steps are spread between your color and a near-white of L 0.975. Darker steps are spread down to about L 0.27, following Tailwind's spacing.
- Chroma follows a curve that tapers at both ends. The Chroma at the ends slider controls how much color the 50 and 950 steps keep.
- Any shade that falls outside the sRGB gamut has its chroma reduced by binary search until it fits, so hue and lightness are preserved instead of being clipped.
Using it in Tailwind 3
Paste the config output into tailwind.config.js. Because it lives under extend, the default palette is kept. The DEFAULT key means plain bg-brand also works.
<button class="bg-brand-600 hover:bg-brand-700 text-white
ring-brand-300 focus-visible:ring-4">
Book a call
</button>
Using it in Tailwind 4
Tailwind 4 drops the JavaScript config in favor of CSS. Paste the @theme block into your main stylesheet below @import "tailwindcss";. Every --color-brand-* variable automatically generates utilities, and because they are real CSS variables you can also use them in plain CSS with var(--color-brand-500).
Picking text and surface shades
The W and B badges show contrast against white and black. A rule of thumb that holds for most hues: 50 and 100 are surfaces, 200 and 300 are borders and subtle fills, 500 and 600 are buttons and accents, and 700 to 950 are text. Yellows and limes are the exception. They stay light for longer, so their readable text shades start around 800.
If your brand color is very light or very dark, try forcing it to 500 with the placement menu. You will get a scale that matches Tailwind's naming expectations, at the cost of your exact color landing on a different step than its lightness suggests.
Frequently asked questions
Will my exact brand color appear in the scale?
Yes. The generator places your color at the step whose lightness it is closest to (or the step you choose) and builds the lighter and darker shades around it, so that step is your exact HEX.
Why OKLCH instead of HSL?
HSL lightness is not perceptual. A yellow and a blue at 50% HSL lightness look wildly different. OKLCH lightness tracks what the eye sees, so the same step number looks equally light across every hue.
Should I use the v3 config or the v4 @theme output?
Use tailwind.config.js for Tailwind 3. Tailwind 4 is configured in CSS, so paste the @theme block into your main stylesheet after the tailwindcss import.
Which shade should I use for text on white?
Look at the contrast column. Any step marked AA against white passes 4.5:1 for body text. For most hues that starts around 600 or 700.