Tailwind v4 Shade Generator

Turn any color into a full 50–950 scale built in OKLCH, the way Tailwind v4 defines its own palette. Copy it as @theme CSS, a v3 config or plain CSS variables.

Base color

Quick start

Palette name

Base color becomes shade

Saturation 100%

Hue shift, light to dark 0°

Your scale — click a shade to copy it

Badge shows the best text color on that shade: W for white, B for black, with AA when it reaches 4.5:1. The outlined shade is your base color.

Live preview

✓ Copied!