# Tailwind-Farben: die Palette nutzen und erweitern
[Canonical HTML page](https://gradiently.design/de/guide/tailwind-colors)
Die Standardpalette ist ein guter Anfang und ein schwaches Ende, weil Tausende Websites sie teilen. So funktionieren Tailwind-Farben in v4, und so fügst du eigene hinzu, ohne etwas kaputt zu machen.
## The short version
- Tailwind-Farben sind benannte Familien wie blue, violet und slate, jede mit Abstufungen von 50 für die hellste bis 950 für die dunkelste.
- In Tailwind v4 ist jede Farbe eine CSS-Variable wie `--color-blue-500`, in OKLCH definiert, und du fügst Farben in einem `@theme`-Block in deinem CSS hinzu oder ersetzt sie.
- Jede Variable, die du in `@theme` als `--color-irgendwas` benennst, wird zu einem vollständigen Satz Utilities, darunter `bg-irgendwas`, `text-irgendwas` und `border-irgendwas`.
- Der Deckkraft-Modifier wie in `bg-sky-500/50` funktioniert auch mit eigenen Farben, weil v4 die Transparenz mit `color-mix()` einmischt.
- Kontrast hängt vom Paar ab, nicht von der Stufennummer, prüfe also Kombinationen aus Text und Hintergrund, statt anzunehmen, dass 500 auf Weiß lesbar ist.
**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.
- blue-100: #dbeafe
- blue-200: #bfdbfe
- blue-300: #93c5fd
- blue-400: #60a5fa
- blue-500: #3b82f6
- blue-600: #2563eb
- blue-700: #1d4ed8
- blue-800: #1e40af
- blue-900: #1e3a8a
- blue-950: #172554
Die Familie blue als sRGB-Hex aus der v3-Palette. Die v4-Werte sind in OKLCH geschrieben und auf Wide-Gamut-Bildschirmen etwas lebendiger, aber die Leiter ist dieselbe.
| Gruppe | Familien | Typischer Einsatz |
| --- | --- | --- |
| Grautöne | slate, gray, zinc, neutral, stone | Text, Rahmen, Flächen |
| Warm | red, orange, amber, yellow | Hinweise, Warnungen, Energie |
| Grüntöne | lime, green, emerald, teal | Erfolg, Natur, Ruhe |
| Blautöne | cyan, sky, blue, indigo | Links, primäre Aktionen |
| Lila und Pink | violet, purple, fuchsia, pink, rose | Akzente, kreative Marken |
Die Standardfamilien nach Temperatur gruppiert. Slate und zinc tendieren kühl, stone warm, neutral hat gar keine Tönung.
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.
```html
Status
All systems normal
Live
```
Eine dunkle Karte aus einer Graufamilie plus einem Akzent mit 15 % Deckkraft. Beliebige Werte in eckigen Klammern decken die seltene Ausnahme ab.
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.
```css
@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);
}
```
Jetzt gibt es `bg-ember-500`, `text-ink`, `border-ember-200/60` und `from-ember-400`.
- ember-50: #fff1ea
- ember-200: #ffcab2
- ember-300: #f9a782
- ember-400: #ec7f4b
- ember-500: #d95f19
- ember-600: #b94a00
- ember-700: #973900
- ember-900: #502007
- ember-950: #2d1205
Die ember-Leiter von oben, in Hex umgerechnet. Wenn der Farbton bei 45 bleibt und nur die Helligkeit wechselt, bleibt jede Abstufung erkennbar dieselbe Farbe.
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](https://gradiently.design/de/guide/oklch-explained) geht tiefer, und [oklch.com](https://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.
```js
// tailwind.config.js (v3)
module.exports = {
theme: {
extend: {
colors: {
ember: {
50: '#fff1ea',
500: '#d95f19',
900: '#502007',
},
ink: '#14121f',
},
},
},
}
```
Der Weg in v3. Beim Upgrade wandern diese als `--color-ember-500` und so weiter in `@theme`.
## 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](https://webaim.org/resources/contrastchecker/), und lies [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) für die Regeln.
| Text auf Hintergrund | Kontrast | Fließtext |
| --- | --- | --- |
| slate-900 auf Weiß | 17,85:1 | Besteht |
| gray-500 auf Weiß | 4,83:1 | Besteht knapp |
| gray-400 auf Weiß | 2,54:1 | Fällt durch |
| Weiß auf blue-600 | 5,17:1 | Besteht |
| Weiß auf blue-500 | 3,68:1 | Nur großer Text |
| slate-400 auf slate-900 | 6,96:1 | Besteht |
Werte aus den v3-Hex-Farben berechnet. Rechne sie für deine genauen v4-Farben neu, die leicht abweichen.
## 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](https://gradiently.design/de/guide/why-every-feed-looks-the-same).
### Sieht aus wie jede andere Website
- Standard-Indigo oder -Blau als Markenfarbe
- Mehrere Graufamilien gemischt
- Akzentfarbe auf allem
- Farben des hellen Themes im Dark Mode wiederverwendet
### Sieht aus wie du
- Eine eigene Leiter auf deinem eigenen Farbton
- Ein Grau, zum Markenfarbton hin getönt
- Akzent nur für Aktionen und ein Highlight
- Ein eigens gewähltes dunkles Set, siehe [Farbverläufe im Dark Mode](https://gradiently.design/de/guide/dark-mode-gradients)
1. **Wähle einen Farbton** Geh von deiner Markenfarbe aus und lies ihren Farbton in OKLCH ab. [Farbschemata für Websites](https://gradiently.design/de/guide/website-color-scheme) hilft, wenn du noch keine hast.
2. **Bau die Leiter** Halte den Farbton, stufe die Helligkeit von etwa 97 % bis 22 % ab und senke die Chroma an beiden Enden.
3. **Benenne auch Rollen** Füge `--color-ink`, `--color-paper` und Ähnliches hinzu, damit Komponenten sagen, wofür eine Farbe da ist.
4. **Behalte eine Quelle** Behandle den `@theme`-Block als deine [Design Tokens](https://gradiently.design/de/guide/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.
## FAQ
### Welche Farben hat Tailwind standardmäßig?
Familien von red, orange, amber und yellow über Grün-, Blau-, Lila- und Pinktöne bis rose, plus Grautöne wie slate, gray, zinc, neutral und stone. Jede hat die Stufen 50, 100 bis 900 und 950, dazu Schwarz und Weiß.
### Wie füge ich in Tailwind v4 eigene Farben hinzu?
Definiere Variablen wie `--color-brand-500` in einem `@theme`-Block in deinem CSS. Tailwind erzeugt daraus `bg-brand-500`, `text-brand-500` und jede andere Farb-Utility.
### Nutzt Tailwind OKLCH?
Ja. Seit v4 ist die Standardpalette in OKLCH definiert, und du kannst eigene Farben in OKLCH, Hex, RGB oder jedem anderen CSS-Farbformat schreiben.
### Wie nutze ich eine Tailwind-Farbe in normalem CSS?
In v4 nutzt du die Variable direkt, zum Beispiel `var(--color-slate-400)`. In v3 nutzt du die Funktion `theme()`, etwa `theme(colors.slate.400)`.
### Welche Tailwind-Abstufungen sind für Text barrierefrei?
Das hängt vom Paar ab. Auf Weiß bestehen gray-500 und dunkler für Fließtext, und weißer Text besteht auf blue-600, aber nicht auf blue-500, prüfe also immer die konkrete Kombination.