Tailwind-CSS-Farben: die v4-Palette in OKLCH, eigene Farben und Abstufungen

So ist die Tailwind-Farbpalette aufgebaut

Die Standardpalette in Tailwind v4.3 hat 26 benannte Skalen. Siebzehn davon sind bunt: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink und rose. Neun sind neutral: slate, gray, zinc, neutral und stone aus v3 sowie mauve, olive, mist und taupe, die im Lauf von v4 dazukamen. Dazu kommen black und white.

Jede Skala hat dieselben 11 Stufen: 50, 100, 200 bis 900 und 950. 50 ist fast Weiß, 950 fast Schwarz. Eine Klasse besteht aus Utility, Farbe und Stufe: bg-blue-500, text-rose-700, border-zinc-200.

Die Stufennummer ist eine Position in der Skala, kein Helligkeitswert. Stufe 500 reicht von 55.1 % OKLCH-Helligkeit bei gray bis 79.5 % bei yellow. Deshalb verhalten sich yellow-500 und blue-500 als Textfarben sehr unterschiedlich.

Tailwind Blau: alle Abstufungen mit OKLCH, Hex und Kontrast

Hier die komplette Blau-Skala, wie Tailwind v4 sie definiert. Die Hex-Spalte zeigt die nächstgelegene sRGB-Farbe, gefunden durch Absenken des Chromas bei gleicher Helligkeit und gleichem Farbton. Die Kontrastwerte sind WCAG-2-Werte, gemessen an diesem Hex.

Blue-600 ist die erste Stufe, die auf Weiß 4.5:1 für Fließtext erreicht. Blue-500 besteht auf Schwarz mit 5.58:1, scheitert aber auf Weiß mit 3.76:1. Keine Blau-Stufe schafft 4.5:1 auf beiden, helles und dunkles Theme brauchen also verschiedene Stufen.

Welche Tailwind-Abstufungen WCAG AA auf Weiß bestehen

Die hellste bestehende Stufe hängt vom Farbton ab. Orange, Amber, Gelb, Lime sowie die Grün-, Teal-, Cyan- und Himmelblautöne sind bei 500 noch hell und brauchen für Fließtext 700. Red, blue, violet, purple, fuchsia, pink und rose bestehen ab 600, indigo schon ab 500. Gelb ist der Ausreißer: Selbst yellow-600 scheitert mit 2.93:1 an großem Text.

Die Helligkeit sagt das Ergebnis besser voraus als die Stufennummer. Über alle 286 Farben hinweg besteht jede Abstufung mit einer OKLCH-Helligkeit unter 58 % die 4.5:1 auf Weiß, und jede über 59.2 % scheitert. Lies das L im Klassenwert, und du kennst die Antwort, bevor du testest.

Alle neutralen Skalen außer olive bestehen ab 500. Olive-500 liegt bei 58 % Helligkeit mit gelblichem Farbton und erreicht nur 4.25:1. Text in gray-500 und in olive-500 ist also nicht austauschbar.

Tailwind-Farben: v3 und v4 im Vergleich

v3 definierte Farben als Hex-Werte in tailwind.config.js unter theme.extend.colors. v4 verlagert die Konfiguration in CSS: Farben sind Theme-Variablen in @theme, in OKLCH geschrieben und als CSS-Variablen verfügbar. So funktioniert var(--color-blue-500) auch in normalem CSS und in Inline-Styles.

Die Palette selbst wurde nachjustiert, nicht neu gezeichnet. In OKLCH umgerechnet hat blue-500 aus v3 (#3b82f6) exakt dieselbe Helligkeit und denselben Farbton wie blue-500 aus v4. Nur das Chroma stieg, von 0.188 auf 0.214. Der Rest der Blau-Skala folgt demselben Muster, außer blue-400, das zusätzlich 0.7 Punkte dunkler wurde. Der Kontrast ändert sich kaum, die Farben wirken aber kräftiger.

Dieses zusätzliche Chroma reicht über sRGB hinaus. 94 der 286 v4-Farben liegen außerhalb von sRGB und innerhalb von Display P3, alle davon bunt. Bei Orange liegen 9 von 11 Stufen außerhalb, bei Blau 4 (200 bis 500). Auf einem P3-Bildschirm siehst du die volle Farbe, auf einem sRGB-Bildschirm zeigt der Browser eine nahe Farbe. v4 setzt Safari 16.4, Chrome 111 und Firefox 128 oder neuer voraus, die alle oklch() verstehen.

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

.card {
    border-color: var(--color-blue-500);
}

So fügst du in Tailwind v4 eigene Farben hinzu

Deklariere in @theme eine Variable im Namensraum --color-. Der Teil nach --color- wird zum Klassennamen: --color-brand liefert bg-brand, text-brand, border-brand, ring-brand und jede andere Farb-Utility, dazu var(--color-brand) in CSS. Hex, rgb(), hsl() und oklch() werden alle akzeptiert.

Um die Standardpalette zu ersetzen statt zu erweitern, setzt du den Namensraum zuerst mit --color-*: initial zurück und definieren dann nur die gewünschten Farben. Utilities entstehen nur für Klassen, die du tatsächlich verwendest, deshalb behalten die meisten Projekte die Standardfarben.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

Ein einzelnes --color-brand reicht für eine Akzentfarbe. Sobald du Hover-Zustände, getönte Hintergründe oder einen Dark Mode brauchst, definierst du eine vollständige Skala mit nummerierten Stufen.

So baust du eine eigene Skala von 50 bis 950

Die Skala unten wurde aus #e4572e erzeugt. Ihre Helligkeit von 63.7 % passt zu Stufe 500, die Markenfarbe bleibt also exakt bei 500. Die übrigen Stufen folgen der Helligkeitskurve von Tailwind und behalten den Farbton, das Chroma erreicht bei 500 und 600 seinen Höchstwert und nimmt zu beiden Enden hin ab. Alle Stufen passen in sRGB, die Hex-Werte sind also exakt.

Wie die warmen Farbtöne von Tailwind selbst braucht diese Skala für Fließtext auf Weiß die Stufe 600. Brand-500 kommt auf 3.68:1 und reicht damit nur für großen Text und Icons.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

Übernimm beim Einfügen die volle Genauigkeit. Wer die Helligkeit auf 0.1 % und das Chroma auf drei Nachkommastellen rundet, schiebt brand-600 knapp aus sRGB heraus. Das schadet nicht, passt aber nicht mehr exakt zum Hex-Wert.

So funktionieren Deckkraft-Modifier wie bg-blue-500/50

Ein Schrägstrich nach der Farbe setzt ihren Alphawert: bg-blue-500/50 ist blue-500 mit 50 %. v3 kompilierte das zu rgb(59 130 246 / 0.5), was nur bei Farben funktionierte, die Tailwind in Kanäle zerlegen konnte. Eigene Farben als CSS-Variablen brauchten ein spezielles Format rgb(var(--brand) / <alpha-value>).

v4 kompiliert den Modifier zu color-mix() in Oklab und mischt die Farbe mit transparent. Das funktioniert mit jeder Farbe: Theme-Variablen, beliebigen Werten wie bg-[#e4572e]/50 und deinen eigenen CSS-Variablen.

Deckkraft verändert den Kontrast. Über Weiß wird blue-500/50 zu #95bfff und blue-500/10 zu #eaf2ff. Text in blue-600 erreicht 5.25:1, text-blue-600/60 fällt dagegen auf 2.62:1 und scheitert selbst bei großem Text.

• blue-500#2b7fff
• blue-500/50 auf Weiß#95bfff
• blue-500/20 auf Weiß#d5e5ff
• blue-500/10 auf Weiß#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

So findest du die nächste Tailwind-Klasse zu jedem Hex-Wert

Vergleiche den Hex-Wert mit allen 286 Abstufungen nach dem wahrgenommenen Abstand in Oklab (ΔEOK). Unter etwa 0.02 ist der Unterschied nebeneinander kaum zu sehen, die Tailwind-Klasse kann deine Farbe also ersetzen. Über etwa 0.04 legst du besser eine eigene Farbe an.

Die Tabelle zeigt echte Treffer. Alte Hex-Werte aus v3 führen zur selben v4-Klasse zurück, während ein typisches Marken-Orange wie #ff5733 zwischen orange-600 und red-400 fällt. Die Tailwind-Seite von PickShade übernimmt diese Suche für jede Farbe und zeigt die drei nächsten Klassen.

Fragen und Antworten