Building an OKLCH color palette tailwind v4 actually wants means two changes from the old way: your shades live in the OKLCH color space (not hex), and your brand colors get defined in CSS inside an @theme block instead of a JavaScript config. Do both and you get a 50-900 scale where every step looks evenly spaced, your darks stay rich instead of muddy, and your lightest tints do not blow out to washed neon. This guide walks the whole pipeline, from picking a brand hue to pasting variables into @theme.
Most palette generators still hand you hex codes and stop there. That worked for Tailwind v3. In v4 the default color system was rebuilt on OKLCH, so pasting hex back in throws away the exact thing that makes the new palette feel balanced. Below you will see why OKLCH avoids the classic "muddy 700, neon 100" problem, how lightness, chroma, and hue map onto a scale, and the exact @theme syntax to ship it.
Warum Tailwind v4 auf OKLCH umgestellt hat#
Tailwind v4 liefert seine gesamte Standardpalette in OKLCH aus und erwartet, dass auch Ihre benutzerdefinierten Farben diesem Format folgen. OKLCH steht für Helligkeit (Lightness), Chroma (Chroma) und Farbton (Hue) mit optionalem Alphawert. Es handelt sich um einen wahrnehmungsuniformen Farbraum, das heißt, eine Änderung des Helligkeitswerts führt unabhängig vom Farbton zum gleichen visuellen Eindruck.
Das klingt akademisch, bis man es mit den zuvor verwendeten Farbräumen vergleicht. Hex und HSL sind nicht wahrnehmungsuniform. Bei HSL wirkt „50% Helligkeit“ bei Gelb viel heller als bei Blau, sodass eine durch gleichmäßige HSL-Helligkeitsschritte erstellte Palette unausgewogen ist. Manche Abstufungen wirken zu dunkel, andere zu blass, und nichts passt farbübergreifend zusammen.
Kernidee: OKLCH entkoppelt die wahrgenommene Helligkeit einer Farbe von ihrem Farbton. Wenn Sie die Helligkeit gleichmäßig abstufen, wirken die Abstufungen gleichmäßig, egal ob die Farbe Zitrone oder Marineblau ist.
Was OKLCH in der Praxis verbessert#
Zwei Problemfälle verschwinden, wenn Sie in OKLCH arbeiten:
- Matschige Dunkeltöne: Bei HSL führt das Abdunkeln einer gesättigten Farbe oft zu Grau- oder Brauntönen. OKLCH ermöglicht es, die Helligkeit zu senken, während das Chroma erhalten bleibt, sodass ein 700er oder 800er Farbton eine satte, erkennbare Version der Markenfarbe bleibt, statt zu einer schlammigen Masse zu werden.
- Neon-Effekte: HSL-Aufhellungen nahe Weiß können in der scheinbaren Sättigung stark ansteigen und radioaktiv wirken. OKLCH-Aufhellungen bleiben weich und kontrolliert, da das Chroma unabhängig von der Helligkeit verwaltet wird.
Der Bonus des größeren Farbraums#
OKLCH kann auch Farben außerhalb des alten sRGB-Bereichs beschreiben. Auf modernen Displays, die den P3-Farbraum unterstützen (die meisten aktuellen Smartphones und Laptops), rendern Tailwind v4-Farben lebendiger als die sRGB-Äquivalente und fallen auf älteren Bildschirmen elegant zurück. Sie erhalten auf leistungsfähiger Hardware kostenlos kräftigere Farben, ohne auf anderen Geräten etwas zu beeinträchtigen. Deshalb sind P3-Farbraumfarben für die Markenarbeit im Jahr 2026 wichtig: Dasselbe CSS wirkt dort kräftiger, wo es möglich ist, und ist überall sonst sicher.
Wie Helligkeit, Chroma und Farbton auf eine 50-900 Skala abgebildet werden#
Eine Tailwind-Farbskala reicht von 50 (hellster Farbton) bis 950 (dunkelster Farbton), wobei die Markenfarbe normalerweise bei 500 liegt. Der Trick für eine saubere OKLCH-Skala besteht darin, zu verstehen, welchen der drei Kanäle Sie bei jedem Schritt bewegen und welchen Sie größtenteils unverändert lassen.
Hier ist das mentale Modell:
| Kanal | Was er steuert | Wie er sich von 50 bis 950 bewegt |
|---|---|---|
| Helligkeit (L) | Wie hell die Farbe aussieht, 0 bis 1 | Am höchsten bei 50 (ca. 0,97), am niedrigsten bei 950 (ca. 0,25). Dies leistet den größten Beitrag. |
| Chroma (C) | Farbintensität / Sättigung | Am niedrigsten an den Extremen (Farbtöne und Dunkeltöne), erreicht seinen Höhepunkt im mittleren Bereich (400-600). |
| Farbton (H) | Der tatsächliche Farbwinkel, 0 bis 360 | Bleibt nahezu konstant. Kleine Verschiebungen verleihen Realismus, sind aber optional. |
Die wichtigste Regel: Die Helligkeit sollte in etwa gleichmäßigen Schritten zunehmen. Wenn Ihre 500 bei etwa L 0,65 liegt, könnte Ihre Skala von 50 bis 900 etwa so aussehen: 0,97, 0,94, 0,89, 0,82, 0,74, 0,65, 0,55, 0,45, 0,37, 0,30. Gleichmäßige Abstände in L sorgen dafür, dass die Farbfelder wie ein echter Verlauf wirken und nicht wie zufällige Stichproben.
Chroma ist eine Kurve, keine Linie#
Der Fehler, den viele machen, ist, das Chroma über die gesamte Skala konstant zu halten. Das führt zu ausgewaschenen hellen Farbtönen und übersättigten dunklen Farbtönen. Echte, angenehme Paletten verwenden einen Chroma-Bogen:
- Helle Farbtöne (50-200): niedriges Chroma. Ein fast weißer Farbton mit hohem Chroma wirkt künstlich, also reduzieren Sie es.
- Kern (400-600): maximales Chroma. Hier ist die Markenfarbe am lebendigsten.
- Dunkle Farbtöne (700-950): Das Chroma nimmt wieder ab, teilweise weil tiefe Farben kein hohes Chroma halten können, ohne aus dem Farbraum zu fallen.
Stellen Sie sich vor, das Chroma steigt vom hellsten Farbton zu einem Höhepunkt um 400-500 an und fällt dann wieder zum dunkelsten Farbton hin ab. Dieser Bogen ist der Unterschied zwischen einer Skala, die gestaltet aussieht, und einer, die generiert wirkt.
Farbton: größtenteils in Ruhe lassen#
Für eine saubere, moderne Skala halten Sie den Farbton über alle elf Stufen konstant. Wenn Sie zusätzliche Raffinesse wünschen, können Sie den Farbton um ein paar Grad verschieben, eine Technik namens Farbtonverschiebung, um zu imitieren, wie sich echte Pigmente verhalten (Schatten werden kühler, Lichter wärmer). Dies ist optional und leicht zu übertreiben. Beginnen Sie daher mit einem konstanten Farbton und fügen Sie nur dann subtile Verschiebungen hinzu, wenn die flache Version leblos wirkt.
So erstellst du eine OKLCH-Palette für Tailwind v4#
Du kannst das von Hand berechnen, aber es ist fummelig und die Chroma-Kurve schnell falsch. Der schnellste zuverlässige Weg ist, die Skala aus einer einzigen Markenfarbe zu generieren und dann die OKLCH-Werte in dein Stylesheet einzufügen. Hier die vollständige Anleitung.
Schritt 1: Wähle deine Markenfarbe als 500-Anker#
Beginne mit einer Farbe, die deine Marke repräsentiert, und behandle sie als 500er Stufe. Starte nicht am hellsten oder dunkelsten Ende; der Mittelton ist der Anker, von dem alles abgeleitet wird. Wenn du nur einen Hex-Code aus einem Logo hast, ist das in Ordnung, du wirst ihn umwandeln. Öffne den kostenlosen Farbpaletten-Generator, füge deinen Marken-Hex ein oder wähle einen Farbton und lass ihn zu deiner 500 werden.
Schritt 2: Generiere die vollständige Skala von 50 bis 900 in OKLCH#
Vom 500er Anker aus generierst du die umliegenden Stufen. Ein guter Generator erledigt die Helligkeitsabstufung und den Chroma-Bogen für dich, sodass du Tönungen erhältst, die weich bleiben, und Schattierungen, die satt bleiben. Bestätige, dass die Ausgabe in OKLCH und nicht in Hex erfolgt. Du möchtest Werte wie oklch(0.65 0.18 250), drei Zahlen für Helligkeit, Chroma und Farbton. Wenn ein Tool dir nur Hex ausgibt, produziert es Tailwind v3 Ausgabe und du verlierst den Vorteil.
Schritt 3: Überprüfe die Skala visuell#
Betrachte die Farbfelder der Reihe nach. Zwei schnelle Tests:
- Fühlen sich die Stufen gleichmäßig verteilt an, ohne einen plötzlichen Sprung, bei dem ein Farbton seinem Nachbarn viel näher kommt als die anderen?
- Sind die dunklen Töne noch klar deine Markenfarbe und sind die hellen Töne weich statt neonartig?
Wenn eine Stufe falsch aussieht, liegt es fast immer an einem Helligkeitsabstandsproblem oder einem Chroma-Wert, der nicht abnimmt. Passe diese eine Stufe an, anstatt die gesamte Skala neu aufzubauen.
Schritt 4: Wandle jede Stufe in eine CSS-Variable um#
Tailwind v4 liest Farben aus CSS-Custom-Properties. Benenne sie nach dem Schema --color-brand-50 bis --color-brand-950. Das Präfix --color- teilt Tailwind mit, passende Hilfsklassen zu generieren. Jede Variable enthält einen OKLCH-Wert:
:root {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Beachte die Chroma-Spalte: Sie steigt auf 0.18 bei 500 und nimmt dann in beide Richtungen ab. Das ist der Bogen in Aktion.
Schritt 5: Binde die Skala in den @theme-Block ein#
Dies ist der Teil, der in v4 wirklich neu ist. Anstatt tailwind.config.js zu bearbeiten, deklarierst du Designfarben in CSS innerhalb eines @theme-Blocks, direkt in deinem Haupt-Stylesheet:
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Da die Namen mit --color- beginnen, generiert Tailwind automatisch die Hilfsklassen: bg-brand-500, text-brand-700, border-brand-200 und so weiter, plus den passenden brand-Wert in beliebiger Syntax. Keine JS-Konfiguration, kein Plugin, kein Neustart erforderlich, außer dem normalen Dev-Rebuild.
Warnung: Variablen, die deine Design-Tokens definieren, müssen innerhalb von
@themeleben, nicht in einem einfachen:root-Block, wenn Tailwind daraus Hilfsklassen generieren soll. Eine:root-Variable ist nur eine normale CSS-Variable, die Tailwind ignoriert. Verwende@themefür Tokens,:rootnur für einmalige Laufzeitwerte.
Schritt 6: Verwende die Hilfsklassen und überprüfe auf einem echten Bildschirm#
Wende die Klassen an und überprüfe das Ergebnis auf einem echten Gerät, idealerweise einem mit P3-Display und einem ohne. Die Farben sollten auf dem breiten Farbspektrum lebendig und auf dem sRGB-Bildschirm korrekt (nicht kaputt) aussehen. Wenn du den Dunkelmodus unterstützt, kannst du dieselben Variablen innerhalb eines auf deinen Dunkel-Selektor beschränkten @theme-Blocks neu definieren und dabei tauschen, welches Ende der Skala auf deine Oberflächen abgebildet wird.
OKLCH vs Hex: Was sich in Ihrem Workflow wirklich ändert#
Für Entwickler, die von v3 kommen, kann die Umstellung nach überflüssigem Aufwand aussehen. Ist sie aber nicht, sobald Sie den Nutzen sehen. Hier der ehrliche Vorher-Nachher-Vergleich.
| Aspekt | Tailwind v3 (hex/HSL) | Tailwind v4 (OKLCH) |
|---|---|---|
| Wo Farben leben | tailwind.config.js (JavaScript) | @theme-Block in CSS |
| Farbformat | Hex oder HSL | OKLCH (L, C, H) |
| Gleichmäßigkeit der Skala | Manuelle Anpassung, oft ungleichmäßig | Gleichmäßige Helligkeitsstufen wirken ausgewogen |
| Dunkle Farbtöne | Neigen zu Matschigkeit | Bleiben bei niedriger Helligkeit satt |
| Großer Farbraum | Nur sRGB | P3-Farbraum auf geeigneten Displays |
| Bearbeiten eines Farbtons | Hex manuell neu berechnen | Eine Zahl anpassen (L, C oder H) |
Der tägliche Gewinn ist die letzte Zeile. Möchten Sie ein etwas kräftigeres 600? Erhöhen Sie die Chroma um 0,02. Möchten Sie die gesamte Skala etwas heller? Fügen Sie jedem Helligkeitswert 0,02 hinzu. Da die Kanäle unabhängig und wahrnehmungsbezogen sind, führen kleine numerische Änderungen zu vorhersagbaren visuellen Veränderungen, statt dem Raten und Prüfen bei Hex.
Wann Sie trotzdem Hex brauchen#
Manche Ziele verstehen OKLCH noch nicht: bestimmte E-Mail-Clients, ältere Design-Tools, einige native Plattformen. Exportieren Sie für diese einen Hex-Fallback neben Ihrem OKLCH-Theme. Tailwind v4 selbst kümmert sich automatisch um den Browser-Fallback für moderne Browser, aber wenn Sie Farben an eine Nicht-CSS-Oberfläche weitergeben, behalten Sie ein konvertiertes Hex-Blatt. Ein guter Generator liefert beide Darstellungen aus derselben Quellfarbe, sodass sie nie auseinanderdriften.
Zusammenspiel mit anderen Theme-Tokens#
Eine Palette kommt selten allein. Sobald Ihre Markenskala in @theme definiert ist, lässt sich dasselbe Muster auf die übrigen Theme-Farbvariablen übertragen: Neutraltöne, semantische Farben (Erfolg, Warnung, Gefahr) und Oberflächen. Bauen Sie jede als eigene OKLCH-Skala mit demselben Helligkeitsrhythmus auf, und Ihr gesamtes System bleibt visuell kohärent, da jede Farbe denselben wahrnehmbaren Abstand teilt.
Wenn Ihr Design auch auf Verläufe oder Schichteffekte setzt, definieren Sie diese aus denselben OKLCH-Tokens, damit die Verlaufsendpunkte exakt mit Ihrer Palette übereinstimmen. Eine schnelle Möglichkeit, Verlaufsstopps zu prototypisieren, die zu Ihrer Markenskala passen, bietet der CSS-Gradienten-Generator, mit dem Sie Mischungen in der Vorschau testen können, bevor Sie sie in einem Token festlegen. Und wenn Sie das resultierende Markenzeichen oder Farbmusterblatt als Asset ausliefern müssen, wandelt der SVG-zu-PNG-Konverter einen Vektor-Export in eine Rasterdatei für Folien oder soziale Medien um.
Für die konzeptionelle Seite der Auswahl der richtigen Grundfarbtöne, bevor Sie überhaupt einen Generator öffnen, behandelt der Leitfaden zum Farbpaletten-Generator für Markendesign Harmonielehren und Barrierefreiheitskontraste, die hier auf natürliche Weise mit den OKLCH-Mechaniken zusammenspielen.
Fazit#
Eine OKLCH-Farbpalette, wie sie Tailwind v4 erwartet, ist nicht nur ein Formatwechsel, sondern eine bessere Art, über Farbe nachzudenken. Verankern Sie Ihre Markenfarbe bei 500, staffeln Sie die Helligkeit gleichmäßig von 50 bis 950, wölben Sie die Chroma zur Mitte hin auf und wieder ab, halten Sie den Farbton weitgehend konstant, und deklarieren Sie dann die gesamte Skala als --color-brand-*-Variablen innerhalb eines @theme-Blocks. So erhalten Sie ausgewogene, lebendige, nicht matschige Abstufungen plus kostenlosen P3-Reichtum auf modernen Bildschirmen. Generieren Sie die Skala, fügen Sie sie in @theme ein und veröffentlichen Sie sie.
Häufig gestellte Fragen#
Was ist OKLCH und warum verwendet Tailwind v4 es? OKLCH ist ein wahrnehmungsuniformer Farbraum, der durch Helligkeit, Chroma und Farbton definiert wird. Tailwind v4 hat ihn übernommen, weil gleichmäßige Helligkeitsschritte Schattierungen erzeugen, die für das menschliche Auge gleichmäßig wirken, was mit Hex und HSL nicht möglich ist. Das Ergebnis sind ausgewogene 50-950-Skalen mit satten Dunkeltönen und sanften Tönungen statt matschiger oder greller Extreme.
Wo definiere ich benutzerdefinierte Farben in Tailwind v4?
Innerhalb eines @theme-Blocks in Ihrem CSS, nicht in einer JavaScript-Konfigurationsdatei. Deklarieren Sie jede Schattierung als benutzerdefinierte Eigenschaft wie --color-brand-500: oklch(0.65 0.18 250);. Da die Namen mit --color- beginnen, generiert Tailwind automatisch Hilfsklassen wie bg-brand-500 und text-brand-700. Normale :root-Variablen generieren keine Hilfsklassen, verwenden Sie daher @theme für Design-Tokens.
Wie werden Helligkeit, Chroma und Farbton auf eine 50-900-Skala abgebildet? Die Helligkeit übernimmt den Großteil der Arbeit: am höchsten bei 50, am niedrigsten bei 950, in gleichmäßigen Schritten. Das Chroma folgt einem Bogen, niedrig an den Tönungs- und Schattenextremen und mit einem Höhepunkt um 400-600, wo die Farbe am lebendigsten ist. Der Farbton bleibt über die gesamte Skala nahezu konstant, mit nur optionalen kleinen Verschiebungen für mehr Realismus.
Warum wirken meine hexbasierten Dunkeltöne matschig, aber OKLCH-Töne nicht? In HSL- und Hex-Workflows zieht das Abdunkeln einer gesättigten Farbe diese oft ins Graue oder Braune, da Helligkeit und Sättigung miteinander verflochten sind. OKLCH trennt sie, sodass Sie die Helligkeit für einen 700er- oder 800er-Ton senken können, während das Chroma erhalten bleibt, und die Farbe bleibt eine satte, erkennbare Version Ihrer Marke statt Schlamm.
Brauche ich mit Tailwind v4 noch Hex-Farbwerte? Für das Web nicht: Moderne Browser lesen OKLCH und Tailwind kümmert sich um Fallbacks. Sie möchten möglicherweise Hex für Ziele, die OKLCH nicht unterstützen, wie einige E-Mail-Clients, ältere Designtools oder native Plattformen. Generieren Sie beide aus derselben Quellfarbe, damit die Darstellungen nie auseinanderdriften.
Kann ich eine OKLCH-Tailwind-Skala automatisch generieren?
Ja. Ein Palettengenerator, der OKLCH ausgibt, übernimmt die gleichmäßigen Helligkeitsschritte und den Chroma-Bogen für Sie aus einer einzigen Markenfarbe und liefert dann die --color-brand-*-Zeilen zum Einfügen in @theme. Das ist schneller und zuverlässiger als manuelles Berechnen jedes Schrittes, bei dem die Chroma-Kurve leicht falsch eingeschätzt werden kann.
