Zum Inhalt springen

Tailwind-CSS-Farben: komplette Palette v4 und v3

Alle Farben von Tailwind CSS, von 50 bis 950, mit ihren offiziellen Werten in OKLCH (v4) und HEX (v3). Klicke auf eine Abstufung, um Klasse, CSS-Variable oder Code zu kopieren.

UI-Farben ansehen
Version
Kopieren als

Neu in Tailwind v4: Mauve, Olive, Mist und Taupe, vier getönte Grautöne.

Werte jeder Farbe

Wähle eine Farbe, um ihre elf Abstufungen mit Klasse, OKLCH, HEX, RGB und der am besten kontrastierenden Textfarbe zu sehen.

Blue · Tailwind v4

AbstufungKlasseOKLCHHEXRGBText
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

Tailwind v4 definiert seine Farben in OKLCH, und manche liegen außerhalb des sRGB-Bereichs. Der HEX-Wert ist die nächstgelegene sRGB-Farbe.

Was ist die Farbpalette von Tailwind CSS

Tailwind CSS enthält eine vordefinierte Farbpalette, organisiert in benannte Familien (Slate, Red, Blue …) mit elf Abstufungen pro Familie, von 50 (am hellsten) bis 950 (am dunkelsten). Diese Nummerierung ist zu einem Standard geworden, den viele andere Bibliotheken übernehmen.

Jede Farbe wird mit Klassen wie bg-blue-500 oder text-red-700 genutzt. In der Tabelle oben kannst du den Klassennamen, die CSS-Variable oder den Code in HEX, RGB, HSL oder OKLCH kopieren.

Welche Abstufung wofür

Feste Regeln gibt es nicht, aber die meisten mit Tailwind gebauten Oberflächen folgen innerhalb jeder Familie einem ähnlichen Muster:

50–100
Hintergründe. Sanfte Flächen, Karten und hervorgehobene Bereiche.
200–300
Rahmen. Trennlinien, Feldränder und deaktivierte Zustände.
500–600
Aktion. Buttons, Links und aktive Elemente. 600 kontrastiert meist besser mit weißem Text.
700–900
Text. Überschriften und Text auf hellen Hintergründen derselben Familie.
950
Dark Mode. Dunkle Hintergründe mit einem Farbstich statt reinem Schwarz.

Tailwind v3 und v4: was sich bei den Farben ändert

Nummerierung und Namen sind gleich, die Werte aber nicht: v4 hat die gesamte Palette neu kalibriert. Deshalb zeigt diese Seite die offiziellen Werte jeder Version getrennt.

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • Farben in OKLCH definiert, mit gleichmäßigeren Helligkeitsstufen.
  • Kräftigere Töne, gedacht für Bildschirme mit großem Farbraum (Display P3).
  • Jede Farbe existiert als CSS-Variable: var(--color-blue-500).
  • Vier neue getönte Grautöne: Mauve, Olive, Mist und Taupe.

blue-500 = #3b82f6

Tailwind v3

  • Farben in HEX (sRGB) definiert.
  • 22 Familien: 5 Grautöne und 17 Farben.
  • Nutzung über Klassen oder die Funktion theme('colors.blue.500').
  • Nach wie vor die Version vieler bestehender Projekte.

So nutzt du Tailwind-Farben in deinem CSS

Neben den Klassen kannst du jede Farbe der Palette in deinem eigenen CSS verwenden. In v4 sind es normale CSS-Variablen; in v3 greifst du über die Funktion theme() darauf zu.

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

Um in v4 eine eigene Farbe hinzuzufügen, deklariere sie in @theme mit dem Präfix --color-, und du erhältst automatisch ihre Klassen (bg-brand-500, text-brand-500 …).

Häufige Fragen

Namen und Nummerierung sind gleich, aber v4 hat die Palette in OKLCH neu kalibriert: Die Töne sind etwas kräftiger und die Helligkeitsstufen gleichmäßiger. Deshalb ist der HEX-Wert von blue-500 in beiden Versionen nicht derselbe. v4 bringt außerdem vier neue Grautöne: Mauve, Olive, Mist und Taupe.

Das ist die Standardskala von Tailwind: 50 ist die hellste Abstufung (fast weiß), 950 die dunkelste (fast schwarz), mit Zwischenstufen, die Hintergründe, Texte, Rahmen und Zustände in einer ganzen Oberfläche einheitlich abdecken.

In Tailwind v4 steht jede Farbe als CSS-Variable zur Verfügung, zum Beispiel var(--color-blue-500). In v3 nutzt du die Funktion theme('colors.blue.500') in deinen CSS-Dateien.

Tailwind v4 definiert die Farben in OKLCH, und manche liegen außerhalb des sRGB-Bereichs, den ein HEX-Code darstellen kann. In diesen Fällen zeigen wir den nächstgelegenen HEX-Wert; unterstützt dein Projekt OKLCH, nutze diesen Wert für die exakte Farbe.

Die Spalte „Text“ jeder Farbe zeigt, ob Weiß oder Schwarz besser kontrastiert, samt Verhältnis. Zur Orientierung: Normaler Text braucht mindestens 4,5:1; jede Kombination kannst du im Kontrastprüfer testen.

OKLCH ist ein Farbraum, in dem die Helligkeit wahrnehmungsbasiert berechnet wird: Zwei Farben mit gleichem Helligkeitswert wirken für das menschliche Auge gleich hell. Das ergibt gleichmäßigere Farbskalen als solche auf Basis von klassischem RGB.