Click any shade to copy. Full Tailwind v3 color palette.
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.
This tool in other languages:
Français:
Palette de couleurs Tailwind CSS
Español:
Paleta de colores Tailwind CSS
Deutsch:
Tailwind CSS Farbpalette
Português:
Paleta de cores Tailwind CSS
日本語:
Tailwind CSS カラーパレット
中文:
Tailwind CSS 颜色面板
한국어:
Tailwind CSS 색상 팔레트
العربية:
لوحة ألوان Tailwind CSS
Browse the full v3 palette on the page. Click any shade to copy either the class name (like bg-sky-500), the HEX value (#0ea5e9), or the RGB value. Use the toggle at the top to set your default copy format.
Every color in Tailwind has 11 shades from 50 (lightest) to 950 (darkest), with 500 as the "base" shade. This gives you a predictable, consistent way to lighten and darken without manually calculating hex values. 50/100 for backgrounds, 500 for accents, 900/950 for dark text or backgrounds.
Copy the HEX or RGB values and use them in any CSS project. Tailwind's palette is just well-chosen colors — nothing Tailwind-specific about the hex codes themselves. Many designers use the Tailwind palette as a starting point even in non-Tailwind projects because the progressions are carefully tuned.
Tailwind v4 uses a new OKLCH color space for more uniform perceptual lightness across shades. The default palette hexes are similar but subtly different. This tool shows v3 values, which are still widely used — any v3 hex works in v4 if you paste it directly.
For light backgrounds: slate-900, zinc-900, or neutral-900 — near-black with a hint of color for warmth. For dark backgrounds: slate-100, zinc-100 — off-white, easier on the eyes than pure white. Always verify with the Contrast Checker.