Tailwind-Farben: die Palette nutzen und erweitern

Tailwind-Farben sind benannte Familien, von red bis rose plus einer Reihe Grautöne wie slate, gray, zinc, neutral und stone, jede mit elf Abstufungen: 50, 100 bis 900 in Hunderterschritten und 950. Du setzt sie mit Utilities wie bg-blue-600, text-slate-900 und border-rose-300 ein. In Tailwind v4 ist die ganze Palette in OKLCH als CSS-Variablen definiert, die du in einem @theme-Block erweiterst oder ersetzt statt in einer JavaScript-Konfigurationsdatei.

Wie die Standardpalette aufgebaut ist

Jede Familie folgt derselben Leiter. 50 bis 200 sind Aufhellungen für Hintergründe und Hover-Flächen, 300 und 400 sanfte Akzente, 500 und 600 die gesättigte Mitte, und 700 bis 950 sind für Text, Rahmen und dunkle Flächen. Weil jede Familie dieselben Stufen nutzt, funktioniert es meist einfach, in einer Komponente blue gegen violet zu tauschen.

Wähle ein Grau und bleib dabei. Text in gray-500 mit Rahmen in slate-200 zu mischen, ergibt einen leicht schmutzigen Look, der schwer zu benennen und leicht zu vermeiden ist.

Tailwind-Farben im Markup nutzen

Farb-Utilities gibt es für fast jede Eigenschaft, die eine Farbe annimmt: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* und die Verlaufsstopps from-*, via-* und to-*. Hänge einen Schrägstrich und eine Zahl an, um die Deckkraft festzulegen.

<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>

In v4 ist jede Abstufung auch eine Variable, die du in normalem CSS nutzen kannst: color: var(--color-slate-400). So stylst du Widgets von Drittanbietern, SVG oder ein Canvas leicht in denselben Farben wie deine Utilities.

Eigene Farben in Tailwind v4 hinzufügen

In v4 konfigurierst du das Theme in CSS. Jede Variable, die in @theme mit --color- beginnt, wird zu einer Farbe, und alle Utilities werden dafür erzeugt. Benenne Farben nach Rolle oder Marke und gib ihnen eine volle Leiter, wenn du Aufhellungen brauchst.

@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}

Dass die Leiter in OKLCH gebaut ist, ist der Grund, warum das funktioniert. Die Helligkeit in OKLCH entspricht dem, wie hell eine Farbe wirkt, gleiche Schritte sehen also gleich aus, was HSL nicht versprechen kann. OKLCH erklärt geht tiefer, und oklch.com ist ein guter Ort, um Werte auszuprobieren.

Die Palette komplett ersetzen

Um die Standardfarben zu entfernen und nur deine eigenen zu behalten, setz den Namensraum zuerst mit --color-*: initial; am Anfang von @theme zurück. Utilities wie bg-blue-500 gibt es dann nicht mehr, ein nützlicher Schutz in einem Projekt mit strenger Marke.

Eigene Farben in Tailwind v3

Ältere Projekte konfigurieren Farben noch in JavaScript. Nutze extend, um Farben neben den Standardfarben hinzuzufügen, oder setz colors direkt, um sie zu ersetzen.

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}

Kontrast: welche Abstufungen für Text sicher sind

Stufennummern sind keine Kontrastskala. Weißer Text auf blue-600 erreicht die 4,5:1, die WCAG für Fließtext verlangt, weißer Text auf blue-500 nicht. Prüfe das tatsächliche Paar mit den Werten unten oder einem Tool von WebAIM, und lies Farbkontrast und Barrierefreiheit für die Regeln.

Mach die Palette zu deiner

Die Standardpalette läuft auf unzähligen Websites, deshalb teilen so viele Produkte denselben indigo-600-Button und denselben slate-50-Hintergrund. Diese Gleichförmigkeit ist die Web-Version davon, warum jeder Feed gleich aussieht.

1. 1

   Wähle einen Farbton

   Geh von deiner Markenfarbe aus und lies ihren Farbton in OKLCH ab. Farbschemata für Websites hilft, wenn du noch keine hast.

2. 2

   Bau die Leiter

   Halte den Farbton, stufe die Helligkeit von etwa 97 % bis 22 % ab und senke die Chroma an beiden Enden.

3. 3

   Benenne auch Rollen

   Füge --color-ink, --color-paper und Ähnliches hinzu, damit Komponenten sagen, wofür eine Farbe da ist.

4. 4

   Behalte eine Quelle

   Behandle den @theme-Block als deine Design Tokens und nutze dieselben Werte in deinen Grafiken.

Beim letzten Schritt driften Marken meist auseinander: Die Website bekommt die neue Leiter, während Social Posts und Folien die Farben vom letzten Jahr behalten. Ein Gradiently Markenkit speichert deine Paletten neben Schriften und Logos, sodass der Designer Posts in denselben Farben gestaltet, die dein Tailwind-Theme nutzt, und ein Mark gibt der Marke einen Verlaufs-Look, den keine andere Website teilt.