Tailwind-CSS-Farben: Vollständiger Leitfaden zum Schattierungssystem

Tailwind CSS wird mit einem der am häufigsten referenzierten Farbsysteme in der Webentwicklung geliefert. Seine Schattierungsbenennungskonvention – Zahlen von 50 bis 950 – ist zu einem Branchenstandard geworden, der Design-Tools, andere CSS-Frameworks und benutzerdefinierte Design-Systeme beeinflusst, weit über Projekte hinaus, die Tailwind tatsächlich verwenden. Das Verständnis, wie dieses System strukturiert ist, wie man es erweitert und wie es sich in Tailwind v4 weiterentwickelt hat, vermittelt sowohl eine praktische Fähigkeit als auch ein mentales Modell für das Design von Farbskalen.

Überblick über die Standardpalette

Die Tailwind-Standardpalette enthält 22 Farb-Familien, jede mit 11 Schattierungen (50 bis 950). Einige ausgewählte Farben – black, white, transparent und inherit – sind auch als Einzel-Wert-Utilities verfügbar.

Die Kernfamilien in der Standardpalette sind:

Die Grau-Familien (slate, gray, zinc, neutral, stone) unterscheiden sich primär in ihrem Unterton. slate hat einen blau-grauen Stich, stone neigt zu Warm, und neutral ist das reinste Achromat. Die richtige Grau-Familie für ein Projekt zu wählen ist wichtiger, als viele Entwickler erkennen – slate-Grautöne fühlen sich in einer vollständigen UI anders an als stone-Grautöne.

Schattierungsbenennungskonvention: 50–950

Das Nummerierungssystem folgt einer konsistenten Regel: Höhere Zahlen sind dunkler. Die Skala ist nicht perfekt linear – das Tailwind-Team hat die Schritte manuell für wahrnehmungsmäßige Gleichmäßigkeit statt mathematischer Gleichmäßigkeit abgestimmt – aber die Beziehung ist zuverlässig:

Tailwinds Standard-blue-500 ist #3B82F6 – ein mittleres, vollgesättigtes Blau, das das „kanonische" Tailwind-Blau ist. blue-600 (#2563EB) ist der Standardhover-Zustand für eine blaue Schaltfläche. blue-100 (#DBEAFE) ist der Hintergrund für ein blaues Badge. Diese Beziehungen sind über jede Farb-Familie in der Palette konsistent.

Die 950-Ergänzung

Tailwind v3.3 fügte jeder Farb-Familie die 950-Schattierung hinzu. Vor dieser Ergänzung war 900 die dunkelste Option, die bei einigen Farb-Familien für Dunkelmodus-Hintergründe zu hell war. Die 950-Schattierungen füllen diese Lücke – sie sind sehr dunkel, behalten aber einen sichtbaren Farbton des übergeordneten Farbtons bei. Zum Beispiel liest sich blue-950 (#172554) als dunkles Navy, nicht als reines Schwarz, was es für Dunkelmodus-Oberflächen nützlich macht, die Markencharakter behalten.

Benutzerdefinierte Farben hinzufügen

Für Projekte mit Markenfarben, die von der Standardpalette nicht abgedeckt werden, erlaubt die Tailwind-Konfiguration das Hinzufügen eigener Farb-Familien. Der Ansatz unterscheidet sich zwischen Tailwind v3 und v4.

Tailwind v3: tailwind.config.js

In v3 werden benutzerdefinierte Farben im extend.colors-Objekt hinzugefügt, um sie neben den Standardwerten einzufügen, oder im colors-Objekt, um sie zu ersetzen:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // Eine benutzerdefinierte Marken-Farb-Familie hinzufügen
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // Primäre Markenfarbe
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // Oder eine bestehende Familie mit neuem Namen referenzieren
        primary: colors.indigo,
        danger: colors.red,
      },
    },
  },
};

Nach dieser Konfiguration kannst du Klassen wie bg-brand-500, text-brand-700, border-brand-200 usw. verwenden.

Eine benutzerdefinierte Skala generieren

Der anspruchsvolle Teil beim Hinzufügen einer benutzerdefinierten Farbe ist das Generieren einer vollständigen 11-Schattierungs-Skala aus einem einzigen Marken-Hex-Wert. Dies manuell zu tun – die Helligkeit für jeden Schritt manuell anpassen – erzeugt inkonsistente Ergebnisse.

Der Shade-Generator automatisiert dies: Gib den primären Hex-Wert deiner Marke ein, und er berechnet die vollständige 50–950-Skala mit wahrnehmungsmäßig gleichmäßigen Schritten und gibt Werte aus, die du direkt in deine Tailwind-Konfiguration einfügen kannst. Wenn beispielsweise dein Marken-Primärwert #0EA5E9 (ein Himmelblau) ist, erzeugt der Generator eine vollständige 11-Schattierungsskala, die auf die Helligkeitskurve von Tailwinds nativen Paletten kalibriert ist.

withOpacityValue für dynamisches Alpha verwenden

In Tailwind v3 unterstützen Farb-Utilities beliebige Deckkraft über die Schrägstrichsyntax (bg-blue-500/50 für 50% Deckkraft). Bei der Definition benutzerdefinierter Farben in v3 kann man dies zum Laufen bringen, indem man CSS-Custom-Properties mit dem withOpacityValue-Muster verwendet:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
        },
      },
    },
  },
};

Definiere dann die rohen Kanalwerte in CSS:

:root {
  --color-brand-500: 14 165 233; /* R-G-B-Werte von #0EA5E9 */
}

Dies ermöglicht, dass bg-brand-500/30 (30% Deckkraft) im generierten CSS korrekt funktioniert.

Die Palette in der Konfiguration erweitern

Über benutzerdefinierte Farb-Familien hinaus erlaubt die Tailwind-Konfiguration das Erweitern der Palette mit semantischen Aliasen und beliebigen Werten.

Semantische Aliase

Ein Ansatz: Definiere deine Markenfarben als semantische Aliase, die auf die Palette verweisen:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.violet,
        success: colors.green,
        warning: colors.amber,
        danger: colors.red,
        neutral: colors.slate,
      },
    },
  },
};

Jetzt generiert bg-primary-500 dasselbe CSS wie bg-blue-500, aber deine Klassennamen kommunizieren Zweck statt Farbe. Dieses Muster spiegelt den semantischen Benennungsansatz in Design-Tokens wider – dieselbe Klasse funktioniert auch dann noch, wenn du später entscheidest, dass die Primärfarbe Indigo statt Blau sein soll.

Einzel-Wert-semantische Farben

Für Design-Systeme, in denen du benannte Farben ohne die vollständige Skala willst:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary':    '#0EA5E9',
        'brand-secondary':  '#7C3AED',
        'text-on-primary':  '#FFFFFF',
        'surface-dark':     '#0F172A',
      },
    },
  },
};

Verwende diese als bg-brand-primary, text-text-on-primary usw.

Tailwind v4: Der CSS-Variablen-Ansatz

Tailwind v4 führt ein grundlegend anderes Konfigurationsmodell ein. Anstatt einer JavaScript-Konfigurationsdatei wird das gesamte Design-System in CSS mit Custom-Properties und CSS-basierter Konfiguration definiert.

Die @theme-Direktive

Farben in Tailwind v4 werden mit der @theme-Direktive in deiner CSS-Datei definiert:

@import "tailwindcss";

@theme {
  /* Standardpalette neu definieren oder erweitern */
  --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;
}

Tailwind v4 liest die --color-*-Custom-Properties und generiert automatisch die entsprechenden Utility-Klassen: bg-brand-500, text-brand-700, border-brand-200 usw.

Semantische Farben in v4

Der v4-Ansatz macht die semantische Farbalias-Vergabe extrem sauber, weil er CSS-Standard-Custom-Properties verwendet:

@import "tailwindcss";

@theme {
  --color-primary:           var(--color-blue-600);
  --color-primary-hover:     var(--color-blue-700);
  --color-primary-subtle:    var(--color-blue-50);

  --color-success:           var(--color-green-600);
  --color-danger:            var(--color-red-600);
  --color-warning:           var(--color-amber-500);
}

Jetzt ist bg-primary eine gültige Tailwind-Klasse – und weil sie auf eine CSS-Custom-Property verweist, kannst du sie in einem Dunkelmodus-Block oder Theme-Selektor überschreiben, ohne die Tailwind-Konfiguration anzufassen:

[data-theme="dark"] {
  --color-primary: var(--color-blue-400);
}

Dies ist die bedeutendste Verbesserung im Farbsystem von v4: Theming ist reines CSS, ohne Build-Schritt zum Themenwechsel erforderlich.

P3- und OKLCH-Farben in v4

Die Standardpalette von Tailwind v4 verwendet intern OKLCH-Werte für wahrnehmungsmäßige Gleichmäßigkeit. Die Palette in v4 erzeugt visuell konsistentere Schritte über Farbtöne hinweg – besonders auffällig bei Warmfarben wie Orange und Gelb, wo frühere Paletten ungleichmäßige Helligkeitsschritte hatten.

Wenn du den Farbkonverter verwendest, um OKLCH-Werte für deine Markenfarben zu generieren, kannst du diese direkt in den @theme-Block einfügen:

@theme {
  /* Markenfarbe in OKLCH für Breitgamut-P3-Display-Unterstützung definiert */
  --color-brand-500: oklch(60% 0.18 220);
}

Moderne Browser auf Breitgamut-Displays (die meisten MacBooks, iPhones) rendern dies im P3-Farbraum – was ein spürbar lebendigeres Blau erzeugt als das sRGB-begrenzte Äquivalent.

Praktische Tipps zur Farbauswahl

Familien effektiv kombinieren

Tailwinds Grau-Familien wurden so gestaltet, dass sie spezifische Akzentfarben ergänzen. Einige häufige Paarungen:

• slate + blue/indigo — kühl, korporativ, leicht technisch
• stone + amber/orange — warm, handwerklich, menschlich
• zinc + violet/purple — neutral, modern, leicht dunkel
• neutral + beliebig — das vielseitigste Grau, funktioniert mit allem

Das Mischen von Grautönen aus verschiedenen Familien in derselben UI (z. B. slate-100 für einen Hintergrund und zinc-200 für einen anderen) erzeugt subtile visuelle Inkonsistenz. Entscheide dich für eine Grau-Familie pro Projekt.

Die 100/700-Regel für Text auf Hintergrund

Eine zuverlässige kontrastsichere Kombination in Tailwind: Verwende Schattierungs-700-Text auf einem Schattierungs-100-Hintergrund innerhalb derselben Familie. Zum Beispiel erzeugt text-blue-700 auf bg-blue-100 ein lesbares blaues Badge, das WCAG AA erfüllt. Verwende den Kontrastprüfer, um nicht-standardmäßige Kombinationen zu überprüfen.

Dunkelmodus-Schattierungszuordnung

Ein gängiges Muster für den Dunkelmodus in Tailwind ist das Invertieren der Schattierungsskala – was im Hellmodus 700 war, wird im Dunkelmodus zu 300:

<p class="text-gray-700 dark:text-gray-300">
  Textkörper – dunkelgrau im Hellmodus, hellgrau im Dunkelmodus
</p>

<div class="bg-gray-100 dark:bg-gray-800">
  Dezenter Hintergrund – kaum grau im Hellen, dunkle Oberfläche im Dunkeln
</div>

Diese Symmetrie funktioniert, weil die Tailwind-Skala so gestaltet ist, dass 100+900=1000 und 200+800=1000 – die Schattierungspaare sind Spiegelbilder in Bezug auf die wahrgenommene Helligkeit.

Wichtigste Erkenntnisse

• Tailwinds 22 Farb-Familien umfassen jeweils 11 Schattierungen von 50 (beinahe weiß) bis 950 (beinahe schwarz), wobei 500 die kanonische „Identitäts"-Schattierung und 600 der Standard-Interaktionszustand ist.
• Wähle eine Grau-Familie (slate, gray, zinc, neutral oder stone) pro Projekt und verwende sie konsistent – das Mischen von Grau-Familien erzeugt subtile visuelle Inkonsistenz.
• Benutzerdefinierte Farb-Familien werden über extend.colors in Tailwind v3 oder @theme in v4 hinzugefügt. Der Shade-Generator generiert eine vollständige 50–950-Skala aus einem einzelnen Marken-Hex-Wert.
• In Tailwind v4 sind Farben CSS-Custom-Properties unter @theme, was reines CSS-Theming ohne Neubuild ermöglicht – überschreibe semantische Farbvariablen in einem [data-theme="dark"]-Block.
• Semantische Aliase (primary: colors.blue) lassen Klassennamen Zweck statt Aussehen kommunizieren und überstehen zukünftige Markenfarbenänderungen ohne Klassennamen-Refaktorierung.
• Der Farbkonverter liefert OKLCH-Äquivalente für jeden Hex-Farbwert – nützlich für v4-Breitgamut-Farbdefinitionen, die P3-Displays nutzen.