Tailwind Color Shade Generator — 50 to 950 from Any Hex
Generate a Tailwind-style 50 to 950 color ramp from any hex code. Uses OKLCH for perceptually even shades. Copy ready-to-paste config.
'50': '#8fffff','100': '#89ffff','200': '#79f3ff','300': '#62deff','400': '#35b9fe','500': '#0097da','600': '#007bbc','700': '#0062a2','800': '#004a88','900': '#002663','950': '#00124f',Paste a hex color or pick one visually and instantly get the full Tailwind-style palette from 50 to 950. Shades are generated in OKLCH space along a calibrated lightness ramp, so each step is perceptually even — no muddy mid-tones or over-saturated lights. One click copies a ready-to-paste Tailwind config block.
Tailwind's default palette is a masterclass in perceptually even color ramps: each step from 50 through 950 changes by a consistent amount of visual lightness, so the palette feels balanced across light and dark themes. When you introduce a custom brand color, naively darkening and lightening in RGB space produces muddy midtones and washed-out extremes that don't match Tailwind's visual rhythm.
This generator fixes that by working in OKLCH, a perceptually uniform color space. It converts your hex input through sRGB to linear RGB to OKLab to OKLCH, then generates eleven shades by fixing your original chroma and hue and stepping lightness along a ramp calibrated to match Tailwind's built-in palettes: 0.985, 0.967, 0.922, 0.859, 0.747, 0.640, 0.550, 0.470, 0.388, 0.267, 0.200. The result is a 50 to 950 ramp that visually mirrors Tailwind's own families.
Each shade is shown with its hex code, full oklch() declaration, and a ready-to-paste line for your Tailwind config. The Copy Tailwind config button produces a complete brand: {} block that drops directly into the theme.extend.colors section of your tailwind.config.js or your @theme block in globals.css. Preset buttons (sky, emerald, rose, violet, amber) let you see how your target compares to Tailwind's own families.
- 1
Enter a base color
Type a hex code or use the color picker to choose a base color visually. Presets for sky, emerald, rose, violet, and amber are one click away.
- 2
Scan the ramp
Eleven swatches from 50 to 950 generate instantly, each with its hex code and full oklch() declaration. Lightness steps match Tailwind's calibrated ramp.
- 3
Copy the Tailwind config
Click Copy Tailwind config to put a ready-to-paste brand: {} block on your clipboard. Drop it into theme.extend.colors or your @theme block.
Brand palette for a new project
Turn your brand hex into a full 50 to 950 ramp that matches the rest of a Tailwind design system.
Add an accent color
Generate matching light and dark variants of a secondary color so badges, alerts, and callouts feel cohesive.
Dark mode surfaces
Use the 900 and 950 shades as dark-theme surface colors alongside your light-mode 50 to 200 steps.
Design-to-dev handoff
Convert a designer's single accent swatch into a shipping-ready Tailwind palette without manual eyedropping.
Why OKLCH instead of HSL?
HSL's lightness isn't perceptually uniform: a 50% lightness yellow looks much brighter than a 50% blue. OKLCH normalizes this so equal lightness steps look equally spaced to the eye, which is what produces Tailwind's balanced ramps.
Does the generator match Tailwind's default palettes exactly?
It approximates them closely using the same lightness ramp Tailwind's own palettes follow. Your custom color's chroma and hue are preserved, so saturated hues at the 500 step will look like a saturated version of your input.
What does the copy button produce?
A Tailwind-ready 'brand': { ... } block with every shade as a hex string. Paste it into theme.extend.colors in tailwind.config.js, or adapt the values to @theme tokens for Tailwind v4.
Why do some shades at the extremes look off?
Very saturated colors at 0.985 or 0.200 lightness can fall outside the sRGB gamut, so values are clamped into displayable RGB. Minor hue shifts at the extremes are normal and match how Tailwind's own palettes handle the same issue.
Is any data uploaded?
No. Hex conversion, OKLCH math, and clipboard copying all happen in your browser. Nothing is transmitted or logged.