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

Combien de couleurs possède Tailwind CSS ?▾

Tailwind CSS comprend 22 familles de couleurs (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose) avec 11 nuances chacune (50 à 950), soit 242 couleurs au total.

Quelle est la convention de nommage des couleurs Tailwind CSS ?▾

Tailwind utilise un schéma famille-nuance comme bg-blue-500 ou text-red-600. La nuance 50 est la plus claire et 950 la plus foncée. La nuance 500 est généralement la nuance principale « par défaut ».

Puis-je copier les couleurs Tailwind en codes hex ?▾

Oui. Cliquez sur une pastille ci-dessus pour copier sa valeur hex. Survolez-la pour voir les options hex, RGB et HSL. Utilisez le bouton Exporter pour télécharger toutes les couleurs en variables CSS, config Tailwind, SCSS ou JSON.

Comment personnaliser les couleurs Tailwind CSS ?▾

Étendez l'objet theme.colors dans tailwind.config.js. Vous pouvez ajouter de nouvelles familles, remplacer les valeurs par défaut ou utiliser les couleurs de cette page comme référence pour construire votre propre palette.