Tailwind Shade Generator

The steps should feel evenly spaced in lightness, hold a consistent hue, and stay usable at both ends — 50 light enough for a subtle background, 950 dark enough for text. Ramps built by naively mixing with white and black tend to go chalky at the top and muddy at the bottom.

In practice the 500 step anchors the scale, the 50 to 200 range covers backgrounds and hover states, and the 700 to 950 range handles text and borders that need to pass contrast checks.

Tailwind's built-in colours each come as eleven shades, 50 through 950. A custom brand colour needs the same structure, so it can use every utility, from bg-brand-50 for subtle backgrounds to text-brand-900 for strong headings. Building that ramp by hand usually produces uneven steps and muddy dark shades.

Pick a base colour and choose a generation mode. Classic follows the familiar Tailwind feel, Luminance Anchored spaces the steps evenly in perceived brightness, Vivid keeps saturation strong across the scale, and Muted produces softer, greyer shades. Hue shift nudges the hue as shades get lighter and darker, which mimics how real pigments behave and stops the dark end looking dull. Name the colour and copy the result as a Tailwind config block, as CSS variables, or as CSS variables in OKLCH.

Tailwind CSS v4 moved configuration into CSS and defines its default palette in OKLCH, a colour space where equal numeric steps look like equal steps to the eye. That makes OKLCH variables the natural choice for a v4 project: declare them inside the @theme block, such as --color-brand-500, and the matching utilities appear automatically.

Tailwind v3 projects still use the JavaScript config, so copy the config output into theme.extend.colors there. Either way, keep your brand colour near the 500 or 600 step, since that is where most buttons and links will pull from.