Tailwind Color Shade Generator

Generate complete 50 to 950 color shade scales in Tailwind CSS format.

Presets:

Base Color

Token Name

Generated 50–950 Shade Scale (Click any swatch to copy hex)

Configuration Code

About shade scales

This tool builds a full 50 to 950 scale from one color. Tailwind CSS uses these steps, so the result drops into a theme with no change.

A scale keeps the character of the color at every step. A hand-picked set of shades often drifts in hue, which makes a interface look inconsistent.

Use a light step for a background, a middle step for a border, and a dark step for text. Check the pair with the Contrast Checker before you ship it.