Tailwind Shade Scale
Generate a Tailwind-style 50-950 scale from one base color.
Overview
The Tailwind Shade Scale generator takes a single seed colour and builds a Tailwind-style 50-through-950 ramp around it — eleven evenly-spaced shades from the lightest tint to the darkest near-black. Each entry is reported as a hex, oklch() value and ready-to-paste Tailwind config snippet.
It is the standard way to extend a Tailwind palette with a custom brand colour while preserving the visual rhythm of the rest of the system. Designers iterating on tokens, engineers building component libraries, and design-system maintainers all use it to keep the perceptual lightness curve consistent across colour families.
How it works
The seed is converted to OKLCH. Lightness targets for each Tailwind shade are taken from the same fixed ramp the v4 default palette uses (roughly L 0.98 at shade 50 down to L 0.20 at shade 950). The seed's chroma is preserved where possible and slightly tapered at the extremes — because chroma at very high or very low lightness clips out of sRGB.
The hue is held constant across the entire ramp, ensuring every shade reads as the same family. Out-of-gamut combinations are gamut-mapped to the nearest displayable colour, which mostly affects vivid greens and blues at the 600–950 range.
Examples
seed #3b82f6
50 → #eff6ff 500 → #3b82f6 950 → #172554
seed #10b981
50 → #ecfdf5 500 → #10b981 950 → #022c22
seed #f59e0b
50 → #fffbeb 500 → #f59e0b 950 → #451a03
FAQ
Where does the seed land on the ramp?
Usually at shade 500, which is the conventional Tailwind anchor for a brand colour. The tool offers a setting to anchor it at 600 or 700 instead if your seed is unusually dark or vivid.
Why is the chroma not constant across shades?
sRGB is widest at mid-lightness and narrows toward the extremes. Holding chroma constant would force out-of-gamut values at shade 50 and 950, so the generator tapers chroma at the ends to stay displayable.
Can I match the exact Tailwind v4 OKLCH values?
The generator uses the same lightness ramp Tailwind v4 ships. Hue and chroma come from your seed, so the result is a custom family that visually fits alongside the stock ones.
Should the 950 shade be pure black?
No — shade 950 is a very dark colour with a hint of the family hue. Pure black would lose the colour family signature, so the ramp tops out around L 0.15–0.20.
Can I generate a six-step ramp instead?
The tool defaults to the eleven-stop Tailwind ramp. For shorter ramps, use the tints-and-shades generator with a custom step count.