Tailwind CSS Colors
22 color families, 242 shades. Click any color to copy.
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
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
Wie viele Farben hat Tailwind CSS?▾
Tailwind CSS umfasst 22 Farbfamilien (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose) mit je 11 Abstufungen (50–950), insgesamt 242 Farben.
Wie ist die Namenskonvention der Tailwind-CSS-Farben?▾
Tailwind nutzt ein Familie-Abstufung-Schema wie bg-blue-500 oder text-red-600. Abstufung 50 ist die hellste, 950 die dunkelste. Abstufung 500 ist in der Regel die „Standard“-Primärabstufung.
Kann ich Tailwind-Farben als Hex-Codes kopieren?▾
Ja. Klicke oben auf eine Farbfläche, um ihren Hex-Wert zu kopieren. Beim Überfahren siehst du Hex-, RGB- und HSL-Optionen. Über „Exportieren“ lädst du alle Farben als CSS-Variablen, Tailwind-Config, SCSS oder JSON herunter.
Wie passe ich Tailwind-CSS-Farben an?▾
Erweitere das Objekt theme.colors in tailwind.config.js. Du kannst neue Farbfamilien hinzufügen, Standardwerte überschreiben oder die Farben dieser Seite als Referenz für deine eigene Palette nutzen.