Tailwind-CSS-Farbsystem: Wie die Schattierungen generiert werden

Tailwind CSS wird mit einem der meistgenutzten Farbsysteme in der Webentwicklung geliefert. Seine Palette aus 22 Farb-Familien – jede in 11 Schattierungen von 50 bis 950 unterteilt – betreibt Millionen von Websites und hat sich zu einem de-facto-Standard dafür entwickelt, wie Entwickler über Farbskalen nachdenken. Aber woher kommen diese Schattierungen, wie werden sie generiert, und wie kann man eigene Skalen erstellen, die nahtlos in das System passen? Dieser Artikel beantwortet all diese Fragen.

Tailwinds Designphilosophie für Farbe

Tailwind verwendet keinen einfachen arithmetischen Ansatz zur Schattierungsgenerierung. Stattdessen hat das Tailwind-Team jede Schattierung in der ursprünglichen Palette manuell kuratiert, mit einer Kombination aus wahrnehmungsbezogener Helligkeit und ästhetischem Urteilsvermögen, mit dem Ziel, Schattierungen zu schaffen, die:

1. Bei jedem Schritt nützlich sind: Jede Schattierung von 50 bis 950 sollte eine Schattierung sein, die jemand plausiblerweise verwenden möchte – kein Lückenfüller, der ungenutzt bleibt.
2. Über Farbtöne hinweg konsistent sind: Eine 500-Schattierung von Blau sollte sich in der wahrgenommenen Helligkeit gleich „mittel" anfühlen wie eine 500-Schattierung von Grün, auch wenn die zugrundeliegenden Hex-Werte völlig unterschiedlich sind.
3. WCAG-bewusst sind: Die dunkleren Schattierungen (700–950) sollten AA-Kontrast gegen Weiß erreichen; die helleren Schattierungen (50–200) sollten AA-Kontrast gegen Schwarz erreichen.

Diese Philosophie erklärt, warum man die Tailwind-Palette nicht mit einer einfachen HSL-Helligkeitsformel generieren kann. Farbtöne unterscheiden sich in ihrer inhärenten wahrnehmungsbezogenen Helligkeit – Gelb ist bei demselben HSL-Helligkeitswert von Natur aus heller als Blau – daher erfordert jede Farb-Familie individuelle Abstimmung.

Die 22 Farb-Familien

Tailwind v3 und v4 werden mit 22 benannten Farb-Familien geliefert:

Beachte die fünf neutralen Familien (slate bis stone): Diese sind nicht nur unterschiedliche Sättigungsstufen desselben Graus. Jede hat einen eigenen Farbstich – slate neigt zu Blau-Grau, stone neigt zu warmem Braun-Grau, neutral ist am reinsten achromatisch. Dies gibt Designern Wahlmöglichkeiten für Umgebungen, die kühle, warme oder neutrale Töne in ihrem Grau-Gerüst erfordern.

Die 11 Schattierungsschritte

Jede Farb-Familie enthält elf Schattierungen:

Der 950-Schritt wurde später hinzugefügt, weil Designer feststellten, dass 900 manchmal nicht dunkel genug für tiefe Schatteneffekte war, besonders im Dunkelmodus, wo die Oberflächenfarben sehr dunkel sind und eine noch tiefere Schattierung für Schichtung benötigen.

Der 500-Schritt ist absichtlich die „kanonische" Schattierung jeder Farbe – die, die am meisten dem entspricht, was man erwarten würde, wenn jemand sagt „Ich möchte Blau" oder „Ich möchte Grün". Alle anderen Schritte werden relativ zu diesem Anker verstanden.

Wie der Schattierungsalgorithmus funktioniert

Obwohl Tailwinds Farben manuell kuratiert wurden, verwendete das Team einen Prozess, der im OKLCH-Farbraum verankert ist, um wahrnehmungsbezogene Konsistenz zu gewährleisten. OKLCH (Oklab Lightness Chroma Hue) ist so konzipiert, dass gleiche numerische Helligkeitsänderungen gleiche wahrgenommene Helligkeitsänderungen erzeugen, anders als HSL oder RGB, wo Farbtonverschiebungen die wahrgenommene Helligkeit dramatisch verändern.

Der allgemeine Prozess für eine Farb-Familie sieht so aus:

1. Den 500-Wert wählen: Den primären Marken-Farbton für diese Familie in OKLCH oder einem gleichwertigen Wahrnehmungsraum definieren.
2. Helligkeitsziele für jeden Schritt setzen: Die 11 Schritte auf spezifische OKLCH-Helligkeitswerte abbilden – zum Beispiel könnte Schritt 50 eine OKLCH-Helligkeit von 0,97 anpeilen, während Schritt 950 0,13 anpeilt.
3. Chroma und Farbton beibehalten: Wo möglich, werden Chroma (Sättigung) und Farbtonwinkel über Schritte hinweg konstant gehalten, nur die Helligkeit wird angepasst.
4. Manuell für Farbtonverschiebung anpassen: Viele Farbtöne zeigen unerwünschte Farbtonverschiebungen, wenn sie in OKLCH heller oder dunkler werden. Gelb neigt beispielsweise dazu, sich beim Abdunkeln in Richtung Grün zu verschieben. Menschliche Anpassung ist bei jedem Schritt erforderlich, um diese Verschiebungen zu korrigieren.
5. In sRGB-Hex konvertieren: Die finalen OKLCH-Werte werden in Hex-Codes für die Verwendung in CSS konvertiert.

Man kann das Ergebnis dieses Prozesses sehen, indem man vergleicht, wie die Tailwind-Palette Gelb und Blau behandelt. Blaue Schritte verschieben sich leicht in der Temperatur (die dunkelsten Blautöne haben mehr Indigo-Charakter), während gelbe Schritte sich in Richtung Olive verschieben, wenn sie abgedunkelt werden, um Schmutz zu vermeiden. Dies sind bewusste wahrnehmungsbezogene Korrekturen, die kein reiner Algorithmus automatisch erzeugen würde.

Verwende den Farbkonverter, um jeden Tailwind-Hex-Wert im OKLCH-Raum zu untersuchen und zu beobachten, wie sich Helligkeit, Chroma und Farbton über die Skala verändern.

Die Tailwind-Farbpalette anpassen

Tailwind v3 (tailwind.config.js)

In Tailwind v3 erweiterst oder ersetzt du die Palette in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

Die Verwendung von extend bewahrt alle eingebauten Farben; der direkte Ersatz von theme.colors entfernt sie.

Tailwind v4 (CSS-First-Konfiguration)

Tailwind v4 eliminiert die JavaScript-Konfigurationsdatei. Farben werden jetzt als CSS-Custom-Properties in deiner CSS-Hauptdatei definiert:

@import "tailwindcss";

@theme {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

Dies generiert die Utility-Klassen bg-brand-50 bis bg-brand-950, text-brand-*, border-brand-* usw. – genau wie die eingebauten Farben funktionieren, aber mit deinem benutzerdefinierten Farbton.

Was sich in Tailwind v4 geändert hat

Tailwind v4 hat mehrere bedeutende Änderungen am Farbsystem eingeführt:

CSS-Variablen als Single Source of Truth

In v4 ist jede eingebaute Farbe als CSS-Custom-Property verfügbar. Das bedeutet, du kannst auf jede Tailwind-Farbe in einfachem CSS zugreifen, ohne Tailwind-Utility-Klassen:

.custom-element {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

Dies war in v3 ohne zusätzliches Tooling oder manuelles Duplizieren von Hex-Werten nicht einfach möglich.

OKLCH-Farbwerte

Tailwind v4 drückt seine Farben in OKLCH statt in sRGB-Hex aus. Dies hat mehrere Vorteile:

• Breitgamut-Unterstützung: Auf Displays, die P3- oder Rec.-2020-Gamuts unterstützen, können Farben lebhafter sein als das, was Hex-Codes ausdrücken können.
• Bessere Interpolation: Gradienten zwischen zwei Tailwind-Farben erzeugen wahrnehmungsmäßig gleichmäßigere Ergebnisse.
• Vorhersehbare Manipulation: Das Anpassen der Helligkeit in OKLCH ist zuverlässiger als in HSL.

Die Änderung ist für Entwickler, die Utility-Klassen verwenden, weitgehend unsichtbar – bg-blue-500 sieht immer noch wie ein blauer Hintergrund aus – aber es ist wichtig, wenn du benutzerdefinierte Gradienten oder Animationen erstellst, die zwischen Farben interpolieren.

Semantische Farb-Tokens

v4 hat auch bessere Unterstützung für semantische Farb-Tokens eingeführt – Variablen, die beschreiben, was eine Farbe tut, statt wie sie aussieht:

@theme {
  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-700);
  --color-surface: var(--color-slate-50);
  --color-on-surface: var(--color-slate-900);
}

Dieses Muster ordnet die semantische Schicht deines Design-Systems auf die Skalenschicht von Tailwind ab, was dir die Möglichkeit gibt, Themes zu wechseln, ohne Komponenten-Markup zu ändern.

Eine benutzerdefinierte Skala erstellen, die zu Tailwind passt

Wenn du eine benutzerdefinierte Farbe benötigst, die nicht in der Standardpalette enthalten ist – das spezifische Orange deiner Marke oder ein maßgeschneidertes Grün – hast du zwei Optionen: Finde die nächstgelegene eingebaute Familie und passe sie an, oder generiere eine völlig neue Skala.

Den Shade-Generator verwenden

Der Shade-Generator erzeugt eine vollständige 50–950-Skala aus einem einzigen Eingabe-Hex-Code. Gib die Primärfarbe deiner Marke ein und das Tool:

1. Konvertiert den Hex-Wert in OKLCH
2. Berechnet Helligkeitsziele für jeden der 11 Schritte
3. Passt die Chroma angemessen an, sodass hellere Schattierungen weniger gesättigt und dunklere Schattierungen tiefer sind
4. Gibt sRGB-Hex-Werte aus, die direkt in deine Tailwind-Konfiguration eingefügt werden können

Wenn deine Markenfarbe beispielsweise #0F766E (ein Blaugrün) ist, könnte der Generator folgendes erzeugen:

Dies entspricht Tailwinds eingebauter Teal-Skala und zeigt, dass die Ausgabe des Generators mit dem visuellen Charakter der offiziellen Palette übereinstimmt.

Tailwind-Farben für den Dunkelmodus verwenden

Tailwinds Schattierungssystem ist gut für den Dunkelmodus geeignet, weil die Skala Spiegelbildwerte bietet. Eine typische Konvention:

Die wichtigste Erkenntnis ist, dass du die Schattierungsnummer invertierst, nicht die Farbe. Wo du slate-100 im Hellmodus verwendest, verwendest du slate-900 im Dunkelmodus. Bei interaktiven Farben wie Links und Schaltflächen wechselst du von einer dunkleren Schattierung (600) im Hellmodus zu einer helleren Schattierung (400) im Dunkelmodus, um den Kontrast gegen den unterschiedlichen Hintergrund zu erhalten.

Tailwinds dark:-Variante macht dies systematisch:

<div class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
  <button class="bg-blue-600 dark:bg-blue-400 text-white dark:text-slate-900">
    Aktion
  </button>
</div>

Häufige Fehler beim Farbsystem

Dieselbe Schattierung für beide Modi verwenden

Das Anwenden von bg-blue-600 ohne dark:-Überschreibung ist ein häufiger Fehler. Im Dunkelmodus sehen dunkle Hintergründe mit einem hellen blauen Element gut aus, aber eine weiße Karte auf einem dunklen Hintergrund wirkt störend. Definiere immer Hell- und Dunkel-Varianten für Hintergrundfarben.

Nicht benachbarte Schattierungen für Kontrast wählen

Die Verwendung von gray-400-Text auf einem gray-300-Hintergrund erzeugt unzureichenden Kontrast. Eine allgemeine Regel: Halte mindestens einen 4-Schritt-Abstand zwischen Vordergrund- und Hintergrundschattierungen (z. B. sollte Text auf slate-100 mindestens slate-700 sein). Verwende den Kontrastprüfer, um zu überprüfen, ob spezifische Kombinationen WCAG AA (4,5:1) oder AAA (7:1) erfüllen.

Zu viele Farb-Familien verwenden

Die Tailwind-Palette hat 22 Familien, aber die meisten Interfaces benötigen höchstens drei: eine für Neutrale (gray/slate), eine für die primäre Markenfarbe und eine für semantische Zustände (Rot für Fehler, Grün für Erfolg, Gelb für Warnungen). Das Auswählen von vier oder mehr verschiedenen farbigen Familien erzeugt visuelle Komplexität ohne Zweck.

Wichtigste Erkenntnisse

• Tailwind CSS wird mit 22 Farb-Familien geliefert, jede mit 11 Schattierungen von 50 bis 950, erzeugt durch wahrnehmungsbezogene Helligkeitsanalyse und menschliche Kuration statt einer einfachen arithmetischen Formel.
• Die fünf neutralen Familien (slate, gray, zinc, neutral, stone) haben jeweils eigene Farbstiche und geben Designern warme, kühle oder neutrale Grau-Optionen.
• Der 500-Schritt ist die kanonische „reine" Schattierung für jede Farb-Familie; alle anderen Schritte werden relativ dazu verstanden, und der 950-Schritt wurde in v3.3 für tiefere Schatten und Dunkelmodus-Oberflächenschichtung hinzugefügt.
• Tailwind v4 wechselt zur CSS-First-Konfiguration mit @theme, stellt alle Farben als CSS-Custom-Properties bereit und verwendet intern OKLCH für bessere wahrnehmungsbezogene Gleichmäßigkeit und Breitgamut-Unterstützung.
• Der Shade-Generator erzeugt eine vollständige Tailwind-kompatible 50–950-Skala aus jedem Eingabe-Hex-Code mithilfe von OKLCH-basierten Helligkeitszielen.
• Invertiere für den Dunkelmodus die Schattierungsnummer (50 ↔ 900) statt des Farbtons, und verschiebe interaktive Farben von dunkleren Schattierungen (600) zu helleren Schattierungen (400), um den Kontrast gegen dunkle Hintergründe beizubehalten.