The complete Tailwind CSS color reference — 242 swatches across 22 families. Click to copy HEX, RGB, or Tailwind class names (bg-*, text-*, border-*). Includes nearest-color finder.
Discover our collection of free online tools for developers, designers, and power users
Advertisement
Click any swatch to copy as HEX
Advertisement
22 color families · 242 swatches · Click to copy as HEX
Advertisement
Stop memorizing hex codes. Every Tailwind color at your fingertips — with one-click copy in any format you need.
Select whether you want to copy colors as HEX codes, RGB values, or Tailwind class names (bg-*, text-*, border-*).
Browse the palette and click any color swatch to copy it instantly. A toast notification confirms the copy with the value.
Have a custom hex from a design? Paste it into the Nearest Color finder to get the closest Tailwind match across all 242 swatches.
Click any color swatch. Depending on your selected format, the HEX, RGB, or Tailwind class name is copied to your clipboard instantly. A brief "Copied!" message confirms each copy.
All 22 official Tailwind CSS v3 color families: Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, and Rose. Each has 11 shades (50 through 950) for 242 swatches total.
Tailwind blue-500 is #3b82f6 (RGB: 59, 130, 246). Other popular Tailwind blues: blue-400 (#60a5fa), blue-600 (#2563eb), sky-500 (#0ea5e9), indigo-500 (#6366f1).
Use the Nearest Color Finder section. Enter any 6-digit hex code (with or without #) and the tool calculates the closest Tailwind color using RGB Euclidean distance across all 242 shades. The result shows the Tailwind color name, shade, hex value, and matching class name.
Yes. The 950 shades were officially added in Tailwind CSS v3.3 and are included for all 22 color families in this reference tool.
The color palette displayed is the Tailwind CSS v3 default palette. Tailwind v4 uses CSS variables for colors but the underlying hex values remain compatible. The class naming convention (blue-500, etc.) works in both v3 and v4.
Generate harmonious color palettes using color theory — complementary, triadic, analogous, and more.
Convert between HEX, RGB, HSL, CMYK, and HSV. Supports paste, color picker, and copy in all formats.
Check WCAG AA and AAA contrast ratios for foreground/background color combinations.