KolorPal

Tailwind CSS Colors

22 color families, 242 shades. Click any color to copy.

Copy as:

Slate

50
100
200
300
400
500
600
700
800
900
950

Gray

50
100
200
300
400
500
600
700
800
900
950

Zinc

50
100
200
300
400
500
600
700
800
900
950

Neutral

50
100
200
300
400
500
600
700
800
900
950

Stone

50
100
200
300
400
500
600
700
800
900
950

Red

50
100
200
300
400
500
600
700
800
900
950

Orange

50
100
200
300
400
500
600
700
800
900
950

Amber

50
100
200
300
400
500
600
700
800
900
950

Yellow

50
100
200
300
400
500
600
700
800
900
950

Lime

50
100
200
300
400
500
600
700
800
900
950

Green

50
100
200
300
400
500
600
700
800
900
950

Emerald

50
100
200
300
400
500
600
700
800
900
950

Teal

50
100
200
300
400
500
600
700
800
900
950

Cyan

50
100
200
300
400
500
600
700
800
900
950

Sky

50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Indigo

50
100
200
300
400
500
600
700
800
900
950

Violet

50
100
200
300
400
500
600
700
800
900
950

Purple

50
100
200
300
400
500
600
700
800
900
950

Fuchsia

50
100
200
300
400
500
600
700
800
900
950

Pink

50
100
200
300
400
500
600
700
800
900
950

Rose

50
100
200
300
400
500
600
700
800
900
950

About Tailwind CSS Colors

Tailwind CSS ships with a carefully curated color palette designed for building modern user interfaces. The palette includes 22 color families — from neutral grays (Slate, Gray, Zinc, Neutral, Stone) to vibrant hues (Red through Rose) — each with 11 shades from 50 (lightest) to 950 (darkest).

Shade 500 serves as the base swatch for each family, while lighter shades (50–200) are ideal for backgrounds and hover states, and darker shades (700–950) work well for text and emphasis. This consistent scale makes it easy to build accessible, well-contrasted interfaces without guesswork.

Click any swatch above to copy its hex, RGB, HSL, or Tailwind utility class. Use the Export button to download the entire palette — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON.

Frequently Asked Questions

¿Cuántos colores tiene Tailwind CSS?▾

Tailwind CSS incluye 22 familias de color (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose) con 11 tonos cada una (50–950), lo que suma 242 colores.

¿Cuál es la convención de nombres de colores de Tailwind CSS?▾

Tailwind usa un patrón familia-tono como bg-blue-500 o text-red-600. El tono 50 es el más claro y el 950 el más oscuro. El tono 500 suele ser el tono primario 'por defecto'.

¿Puedo copiar los colores de Tailwind como códigos hex?▾

Sí. Haz clic en cualquier muestra de arriba para copiar su valor hex. Pasa el cursor para ver las opciones hex, RGB y HSL. Usa el botón Exportar para descargar todos los colores como variables CSS, configuración de Tailwind, SCSS o JSON.

¿Cómo personalizo los colores de Tailwind CSS?▾

Extiende el objeto theme.colors en tailwind.config.js. Puedes añadir nuevas familias de color, sobrescribir las predeterminadas o usar los colores de esta página como referencia para crear tu paleta personalizada.