AK
appkiro.comStandard Tailwind-style generation with uniform hue
Tailwind Shades takes a single base colour and produces an eleven-step ramp (50, 100, 200, ..., 950) using OKLCH. The output is ready to drop into a Tailwind theme, paste as CSS variables, or copy as OKLCH variables for native CSS use.
The horizontal strip shows all eleven shades stacked side by side. The grid below shows each shade with its level number and value in the active notation. Click any swatch to copy that shade.
The base colour is converted to OKLCH. Each shade between 50 and 950 maps to a target lightness derived from the original Tailwind palette, then re-encoded back to sRGB. Chroma is reduced near the extremes so very light tints stay clean and very dark tones do not look muddy.
Classic uses uniform hue with mild chroma damping at the extremes. Hue Shift warms lighter shades and cools darker ones for added depth. Luminance Anchored pulls the lightest and darkest shades closer to true white and black. Vivid pushes saturation; Muted pulls it back.
Yes. The output panel offers HEX-based CSS variables, OKLCH variables, and a Tailwind theme.colors entry. Each block has a single-click copy button.
Yes. Append ?color=#1d4ed8 (URL-encoded) to the page URL and the base colour loads automatically.