Tailwind Color Shades

Expand a base color into Tailwind-like shade steps (50–950 style scales).

Color

Output

Suggested Tools

Color Picker
Pick a color visually and copy HEX, RGB, or HSL values for CSS and design tools.
HEX ↔ RGB
Convert colors between HEX and RGB for CSS, canvas, and design handoff.
HEX ↔ HSL
Convert colors between HEX and HSL for tweaking lightness and saturation in CSS.

Tailwind Color Shades generates a ramp of lighter and darker tones for utility-class themes.

Enter a HEX base, run, and copy the shade scale into tailwind.config or CSS variables.

Please enable JavaScript.