Tailwind Colors
The complete Tailwind CSS v4 color palette. Click any shade to copy. Generate custom shade scales from any color.
Custom Shade Generator
Enter any color to generate a Tailwind-style shade scale.
Tailwind CSS Color Reference
Tailwind CSS ships with a carefully crafted default color palette consisting of 22 color families, each with 11 shades from 50 (lightest) to 950 (darkest). These colors are designed to work together harmoniously and cover every common design need.
Use this reference to browse the full palette, click any shade to copy its hex code, RGB value, HSL value, or Tailwind class name. Switch between formats using the toggle above.
Need a custom shade scale for your brand color? Use the Custom Shade Generator above to create a Tailwind-compatible 11-shade scale from any hex color. Copy the entire config object to paste directly into your tailwind.config.js theme extension.