Tailwind CSS Colors

Tailwind CSS ships with a carefully curated color palette of 22 color families, each with 11 shades (50-950). These colors are designed to work harmoniously together, with consistent lightness and saturation curves across all families. They're used via utility classes like bg-blue-500, text-red-700, or border-gray-300.

The shade scale runs from 50 (lightest, near-white) to 950 (darkest, near-black). The 500 shade is the "base" color — the most saturated, recognizable version. Shades below 500 are tints (mixed with white), shades above are tones (mixed with black). This systematic approach makes it easy to build consistent, accessible UIs.

When choosing colors for accessibility, pair light backgrounds (50-200) with dark text (700-950) or vice versa to ensure sufficient contrast. Tailwind's slate and zinc grays are popular for UI chrome, while neutral is a pure gray without blue or warm undertones. This tool lets you browse the complete palette and copy values in any format.