Die Farbtools im Web haben sich lange nicht weiterentwickelt. Über viele Jahre war man auf RGB und HSL angewiesen. Das sind Modelle, die nicht an menschliche Wahrnehmung gekoppelt sind und in Grenzbereichen schnell brechen. Mit CSS Color Level 5 stehen uns endlich moderne Farbräume wie LCH und OKLCH zur Verfügung, die Farben natürlicher, konsistenter und zugänglicher machen.
Dazu kommen neue Funktionen wie color-mix() und color-contrast(), die Farbverarbeitung in CSS deutlich flexibler machen.
Dieses Türchen zeigt, wie diese neuen Farbräume funktionieren und warum sie ein Meilenstein für modernes UI-Design sind.
Warum RGB und HSL nicht mehr ausreichen
RGB und HSL haben das Web jahrelang begleitet, aber beide Modelle haben fundamentale Schwächen, die in modernen UIs zunehmend problematisch werden. RGB ist ein technisches Modell, das sich an der Funktionsweise von Bildschirmen orientiert, nicht an menschlicher Wahrnehmung. Die drei Kanäle Rot, Grün und Blau beschreiben, wie Licht gemischt wird, sagen aber nichts darüber aus, wie wir diese Farben tatsächlich wahrnehmen. HSL (Hue, Saturation, Lightness) ist zwar visuell nachvollziehbarer, aber auch hier stimmt die Mathematik nicht mit der Wahrnehmung überein.
Das größte Problem ist die inkonsistente Helligkeit. Eine HSL-Farbe mit 50% Lightness kann je nach Farbton völlig unterschiedlich hell wirken. Ein kräftiges Gelb bei hsl(60, 100%, 50%) erscheint viel heller als ein sattes Blau bei hsl(240, 100%, 50%), obwohl beide theoretisch die gleiche Helligkeit haben. Das macht es schwierig, Farbpaletten zu erstellen, bei denen alle Farben visuell ausgewogen wirken.
Ein weiteres Problem sind Farbunterschiede, die je nach Bereich des Farbraums unterschiedlich stark wahrgenommen werden. Ein Unterschied von 10 Einheiten im Blaubereich wirkt anders als der gleiche Unterschied im Gelbbereich. Das erschwert die Erstellung konsistenter Farbskalen, etwa für Buttons in verschiedenen Zuständen oder für Datenvisualisierungen.
Für Dark/Light-Themes sind RGB und HSL besonders problematisch. Man kann nicht einfach die Lightness invertieren, um von Light Mode auf Dark Mode zu wechseln. Stattdessen müssen separate Farbpaletten erstellt und manuell angepasst werden, was zeitaufwendig ist und oft zu inkonsistenten Ergebnissen führt.
Auch Kontraste sind schwer einzuschätzen. WCAG-konforme Kontrastverhältnisse lassen sich aus RGB- oder HSL-Werten nicht direkt ableiten. Man muss die Farben erst in Luminanz umrechnen, was komplex ist und oft zu Überraschungen führt. Eine Farbe, die visuell ausreichend Kontrast zu haben scheint, kann die Accessibility-Standards verfehlen.
Schließlich wirken Farbmischungen mit RGB oder HSL oft „schmutzig” oder unnatürlich. Mischt man beispielsweise Rot und Grün in RGB, erhält man ein schmutziges Braun oder Grau, statt eines harmonischen Übergangs. Das liegt daran, dass RGB nicht an der menschlichen Farbwahrnehmung ausgerichtet ist.
Genau hier kommen moderne Farbräume ins Spiel. Sie lösen diese Probleme, indem sie sich an der tatsächlichen menschlichen Wahrnehmung orientieren.
OKLCH – der neue Standard
OKLCH ist ein wahrnehmungslinearer Farbraum und repräsentiert damit einen fundamentalen Fortschritt gegenüber RGB und HSL. Wahrnehmungslinear bedeutet, dass ein numerischer Unterschied im Farbraum einer gleich großen wahrgenommenen Veränderung entspricht. Wenn man also den Lightness-Wert von 0.5 auf 0.6 erhöht, wird die Farbe für das menschliche Auge um denselben Betrag heller, wie wenn man von 0.7 auf 0.8 geht. Diese Eigenschaft macht OKLCH extrem vorhersehbar und intuitiv.
Die Syntax ist elegant und folgt einem logischen Aufbau:
color: oklch(0.65 0.15 230);
Die drei Parameter haben jeweils eine klare Bedeutung.
- L steht für Lightness (Helligkeit) und reicht von 0 (vollständig schwarz) bis 1 (vollständig weiß). Dieser Wert beschreibt die wahrgenommene Helligkeit der Farbe, nicht die technische Luminanz.
- C steht für Chroma (Farbsättigung) und beschreibt, wie intensiv oder gesättigt eine Farbe ist. Ein Wert von 0 ergibt ein neutrales Grau, höhere Werte machen die Farbe lebendiger. Der maximale Wert variiert je nach Farbton und Helligkeit. Für typische UI-Farben im sRGB-Farbraum liegen sinnvolle Werte meist zwischen 0.1 und 0.25, sehr satte Farben können bis 0.37 gehen.
- H steht für Hue (Farbton) und wird als Winkel von 0 bis 360 Grad angegeben, genau wie in HSL. 0 Grad ist Rot, 120 Grad ist Grün, 240 Grad ist Blau.
Die Vorteile von OKLCH sind in der Praxis sofort spürbar. Die konsistente Helligkeit über alle Farbtöne hinweg ist der wichtigste Vorteil. Ein Lightness-Wert von 0.7 ergibt immer die gleiche wahrgenommene Helligkeit, egal ob die Farbe Rot, Grün, Blau oder Gelb ist. Das macht es trivial, Farbpaletten zu erstellen, bei denen alle Farben visuell ausgewogen sind.
Die lineare Wahrnehmung bedeutet, dass Farbabstände vorhersehbar sind. Wenn man eine Skala von 5 Farben erstellen möchte, kann man einfach den Lightness-Wert in gleichmäßigen Schritten ändern (z.B. 0.3, 0.4, 0.5, 0.6, 0.7), und die Farben werden visuell gleichmäßig verteilt sein. Mit HSL wäre das Ergebnis ungleichmäßig.
Für Dark/Light Themes ist OKLCH ideal. Man kann dieselbe Farbe einfach durch Anpassen des Lightness-Werts an beide Modi anpassen, ohne dass sich Sättigung oder Farbton ändern. Das sorgt für eine konsistente Markenidentität über beide Themes hinweg.
OKLCH ist auch barrierefreundlicher, weil die Lightness-Werte direkt mit der Wahrnehmung korrelieren. WCAG-konforme Kontrastverhältnisse lassen sich leichter erreichen und überprüfen. Man kann sicher sein, dass zwei Farben mit ausreichend unterschiedlichen Lightness-Werten auch tatsächlich genug Kontrast haben.
Schließlich wirken Farben sauberer und natürlicher. Farbmischungen ergeben harmonische Übergänge, nicht die schlammigen Zwischentöne, die man oft mit RGB oder HSL erhält. Das liegt daran, dass OKLCH auf dem menschlichen Farbwahrnehmungssystem basiert, nicht auf technischen Display-Eigenschaften.
OKLCH ist heute das beste Werkzeug für professionelles UI-Design. Alle modernen Browser unterstützen es, und für ältere Browser gibt es saubere Fallbacks.
Die gleiche Helligkeit über alle Farbtöne hinweg
Ein konkretes Beispiel macht den Unterschied zwischen HSL und OKLCH sofort deutlich. Nehmen wir an, wir möchten eine Farbpalette erstellen, bei der alle Farben exakt gleich hell erscheinen, wie etwa für eine UI, bei der verschiedene Kategorien farbcodiert sind, aber keine Kategorie durch höhere oder niedrigere Helligkeit hervorstechen soll.
Mit HSL scheint das einfach. Alle Farben auf 50% Lightness setzen und nur den Hue-Wert ändern:
background: hsl(0, 80%, 50%); /* Rot */
background: hsl(200, 80%, 50%); /* Blau */
Das Ergebnis ist jedoch enttäuschend. Diese Farben wirken völlig unterschiedlich hell. Das Rot erscheint deutlich heller und dominanter als das Blau, obwohl beide theoretisch 50% Lightness haben. Das liegt daran, dass HSL die Helligkeit nicht korrekt modelliert. Der Wert 50% ist ein mathematischer Mittelwert, kein wahrnehmungsbasierter.
Mit OKLCH erhält man tatsächlich gleich helle Farben:
background: oklch(0.7 0.16 30);
background: oklch(0.7 0.16 240);
Beide Farben haben denselben Lightness-Wert (0.7), und sie sehen auch tatsächlich gleich hell aus. Das ist kein Zufall, sondern das Ergebnis einer mathematischen Modellierung, die auf menschlicher Wahrnehmung basiert. Der Wert 0.7 entspricht einer bestimmten wahrgenommenen Helligkeit, unabhängig vom Farbton.
Dieser Unterschied mag auf den ersten Blick klein erscheinen, ist aber in der Praxis entscheidend. Für Datenvisualisierungen, farbcodierte UI-Elemente oder Brand-Paletten mit mehreren Farben ist es essenziell, dass alle Farben visuell gleichwertig sind. Mit HSL ist das nahezu unmöglich zu erreichen, mit OKLCH ist es trivial.
Farbtöne für Light & Dark Mode konsistent generieren
Die Implementierung von Dark Mode ist traditionell eine der aufwendigsten Aufgaben beim Aufbau eines Designsystems. Mit klassischen Farbmodellen musste man oft komplett separate Farbpaletten erstellen. Eine Brand-Color, die im Light Mode funktioniert, hat im Dark Mode oft zu wenig oder zu viel Kontrast. Also definiert man unterschiedliche Farben für beide Modi, was zu Inkonsistenzen führt. Die Markenfarbe wirkt plötzlich anders, nur weil der Nutzer Dark Mode aktiviert hat.
Zusätzlich erfordern die meisten Ansätze manuelle Anpassungen. Man kann nicht einfach Farben invertieren oder die Lightness-Werte umkehren, weil das in RGB und HSL zu unbrauchbaren Ergebnissen führt. Stattdessen muss jede Farbe individuell für Dark Mode angepasst werden, was zeitaufwendig ist und viel Raum für Fehler lässt.
Das Ergebnis sind oft unterschiedliche Kontraste zwischen Light und Dark Mode. Eine Farbkombination, die im Light Mode perfekt funktioniert, kann im Dark Mode zu schwach oder zu stark kontrastieren. Das liegt daran, dass RGB und HSL keine direkten Rückschlüsse auf Kontrastverhältnisse zulassen.
Mit OKLCH wird das Problem elegant gelöst:
:root {
--color-primary: oklch(0.62 0.15 260);
}
[data-theme="dark"] {
--color-primary: oklch(0.82 0.15 260);
}
Nur die Lightness wird angepasst (von 0.62 auf 0.82), während Chroma (0.15) und Hue (260) identisch bleiben. Das Ergebnis ist eine Farbe, die im Dark Mode heller ist, aber farblich exakt identisch wirkt. Die Markenidentität bleibt konsistent, nur die Helligkeit passt sich an den Kontext an.
Dieser Ansatz funktioniert nicht nur für Brand Colors, sondern für das gesamte Farbsystem. Man kann eine vollständige Light-Mode-Palette nehmen und einfach die Lightness-Werte invertieren, um eine konsistente Dark-Mode-Palette zu erhalten. Die Kontraste bleiben stabil, weil Lightness direkt mit der Wahrnehmung korreliert.
color-mix(): Farben mischen direkt im CSS
Eine der nützlichsten neuen Funktionen in CSS Color Level 5 ist color-mix(). Sie erlaubt es, Farben direkt im CSS zu mischen, ohne auf Präprozessoren oder JavaScript angewiesen zu sein. Das klingt zunächst simpel, ist aber ein Game-Changer für dynamische Farbsysteme.
Die Syntax ist intuitiv:
color: color-mix(in oklch, var(--brand) 70%, white);
Dieser Code mischt die Brand-Color zu 70% mit weißer Farbe zu 30%. Das Ergebnis ist eine hellere Variante der Brand-Color. Entscheidend ist das in oklch – damit wird die Mischung im OKLCH-Farbraum durchgeführt, was zu natürlicheren, harmonischeren Ergebnissen führt als Mischungen in RGB.
Der große Vorteil: Man benötigt keine separaten Token für jede Farbvariante mehr. Statt --brand-light, --brand-lighter und --brand-lightest zu definieren, kann man alle Varianten on-the-fly aus der Basis-Farbe ableiten. Das reduziert die Komplexität im Designsystem erheblich.
Ein typischer Anwendungsfall sind Button-Zustände:
.button {
--button-bg: var(--brand);
}
.button:hover {
--button-bg: color-mix(in oklch, var(--brand) 85%, white);
}
.button:active {
--button-bg: color-mix(in oklch, var(--brand) 60%, black);
}
Dieser Code erzeugt drei harmonische Varianten. Im Hover-Zustand wird die Brand-Color leicht aufgehellt (85% Brand, 15% Weiß), im Active-Zustand deutlich abgedunkelt (60% Brand, 40% Schwarz). Alle drei Varianten sind automatisch harmonisch, weil die Mischung im wahrnehmungslinearen OKLCH-Farbraum erfolgt.
Das funktioniert auch mit Custom Properties, die zur Laufzeit geändert werden können. Wenn sich --brand ändert (etwa durch Theme-Switching oder User-Customization), passen sich automatisch alle davon abgeleiteten Varianten an. Man muss keine zusätzlichen Token pflegen oder manuell Varianten berechnen.
Farbskalen automatisch aus einer Basis-Farbe generieren
Die Kombination von OKLCH mit color-mix() ermöglicht ein Pattern, das bisher nur mit Build-Tools oder Präprozessoren möglich war und das ist das automatische Generieren kompletter Farbskalen aus einer einzigen Basis-Farbe. Moderne Designsysteme wie Material Design oder Tailwind CSS verwenden Skalen mit typischerweise 9-11 Abstufungen (z.B. 50, 100, 200, … 900). Mit OKLCH und color-mix() lässt sich so etwas direkt in CSS umsetzen.
Der Ansatz ist elegant und wartbar:
:root {
--brand-500: oklch(0.62 0.16 240);
--brand-400: color-mix(in oklch, var(--brand-500) 80%, white);
--brand-300: color-mix(in oklch, var(--brand-500) 60%, white);
--brand-600: color-mix(in oklch, var(--brand-500) 80%, black);
--brand-700: color-mix(in oklch, var(--brand-500) 60%, black);
}
Man definiert eine mittlere Farbe (hier --brand-500 mit einer Lightness von 0.62) und leitet alle anderen Stufen daraus ab. Die helleren Varianten (300, 400) entstehen durch Mischung mit Weiß, die dunkleren (600, 700) durch Mischung mit Schwarz. Die Prozentsätze (80%, 60%) bestimmen, wie stark die Mischung ist.
Das Ergebnis ist eine harmonische Skala, bei der alle Abstufungen natürlich und ausgewogen wirken. Im Gegensatz zu manuell definierten Skalen gibt es keine Farbsprünge oder Inkonsistenzen. Jede Stufe ist eine mathematisch exakte Ableitung der Basis-Farbe.
Für Light/Dark Themes funktioniert diese Skala automatisch. Im Light Mode verwendet man typischerweise die helleren Abstufungen (300, 400, 500) für Hintergründe und Akzente, im Dark Mode die dunkleren (600, 700, 800). Da alle Farben aus derselben Basis abgeleitet sind, bleibt die Farbidentität über beide Themes hinweg konsistent.
Es gibt keine willkürlichen Farbsprünge. Jede Stufe ist gleichmäßig von der vorherigen entfernt, sowohl mathematisch als auch visuell. Das ist entscheidend für UI-Elemente, die mehrere Zustände haben (Default, Hover, Active, Disabled). Alle Zustände sind klar unterscheidbar, aber visuell zusammenhängend.
Die Kontraste bleiben konsistent, weil OKLCH wahrnehmungslinear ist. Ein Unterschied von 0.1 in der Lightness sorgt für denselben wahrgenommenen Kontrast, egal auf welcher Stufe der Skala man sich befindet. Das erleichtert die Erstellung WCAG-konformer Farbkombinationen erheblich.
color-contrast(): Automatische Farbwahl basierend auf Lesbarkeit
Eine weitere spannende Funktion aus CSS Color Level 5 ist color-contrast(). Sie ist noch experimentell und nicht in allen Browsern verfügbar, löst aber ein Problem, das in der Praxis immer wieder auftritt und das ist die automatische Wahl einer lesbaren Textfarbe basierend auf der Hintergrundfarbe.
Die Funktion analysiert den Kontrast zwischen einer Hintergrundfarbe und mehreren möglichen Vordergrundfarben und wählt automatisch die lesbarste Option:
color: color-contrast(var(--bg) vs white, black);
Diese Zeile bedeutet: Vergleiche Weiß und Schwarz als Textfarben auf dem Hintergrund var(--bg) und wähle diejenige, die den besseren Kontrast bietet. Der Browser berechnet die Kontrastverhältnisse automatisch und wählt die lesbarste Variante.
Ein typisches Szenario sind dynamische Buttons:
.button {
background: var(--brand);
color: color-contrast(var(--brand) vs white, black);
}
Hier wird die Brand-Color als Hintergrund verwendet, und der Browser entscheidet automatisch, ob weißer oder schwarzer Text besser lesbar ist. Das ist besonders wertvoll, wenn --brand dynamisch geändert werden kann, etwa durch User-Customization oder Theme-Switching. Man muss nicht manuell prüfen, welche Textfarbe funktioniert, der Browser erledigt das automatisch.
Die Funktion kann auch mehr als zwei Optionen vergleichen:
color: color-contrast(var(--bg) vs white, black, oklch(0.85 0.05 260));
Hier werden drei Textfarben verglichen, und der Browser wählt die mit dem höchsten Kontrastverhältnis. Das ist nützlich, wenn man Brand-Colors auch für Text verwenden möchte, aber sicherstellen will, dass immer die lesbarste Option gewählt wird.
Hinweis: color-contrast() ist noch experimentell und wird derzeit nur in Safari Technology Preview unterstützt. Für Produktionsumgebungen sollte man derzeit noch auf JavaScript-basierte Lösungen oder statische Definitionen setzen. Die Funktion ist aber ein Ausblick auf die Zukunft automatisierter Accessibility im CSS.
Moderne Theme-Systeme mit CSS Color Level 5
Die Implementierung eines vollständigen Theme-Systems wird mit OKLCH erheblich vereinfacht. Das klassische Problem bei Dark Mode ist, dass man nicht einfach Farben invertieren kann. Man muss das gesamte Farbsystem neu durchdenken. Mit OKLCH ist der Ansatz viel direkter und vorhersehbarer.
Ein minimales, aber funktionales Theme-System könnte so aussehen:
:root {
--surface: oklch(0.98 0.01 0);
--text: oklch(0.18 0.02 260);
}
[data-theme="dark"] {
--surface: oklch(0.18 0.01 0);
--text: oklch(0.95 0.02 260);
}
Die Logik ist klar. Im Light Mode ist die Oberfläche sehr hell (0.98) und der Text sehr dunkel (0.18). Im Dark Mode invertieren sich diese Werte. Die Oberfläche wird dunkel (0.18) und der Text hell (0.95). Die Chroma-Werte (0.01 bzw. 0.02) bleiben niedrig, weil Oberflächen und Text typischerweise nahezu neutral sind. Ein leichter Farbton (Hue 260, ein leichtes Blau) gibt beiden eine subtile Kühle.
Der entscheidende Vorteil daberi ist, dass Kontraste konsistent bleiben. Der Unterschied zwischen Surface und Text beträgt in beiden Modi etwa 0.8 Lightness-Einheiten (0.98 - 0.18 = 0.8 bzw. 0.95 - 0.18 = 0.77). Da OKLCH wahrnehmungslinear ist, bedeutet das nahezu identische Kontrastverhältnisse in beiden Modi. Man muss nicht für jeden Mode separate WCAG-Tests durchführen, wenn es in einem Mode funktioniert, funktioniert es auch im anderen.
Dieses Pattern lässt sich auf komplexere Systeme erweitern:
:root {
--surface-1: oklch(0.98 0.01 0);
--surface-2: oklch(0.95 0.01 0);
--surface-3: oklch(0.92 0.01 0);
--text-primary: oklch(0.18 0.02 260);
--text-secondary: oklch(0.45 0.02 260);
}
[data-theme="dark"] {
--surface-1: oklch(0.15 0.01 0);
--surface-2: oklch(0.18 0.01 0);
--surface-3: oklch(0.22 0.01 0);
--text-primary: oklch(0.95 0.02 260);
--text-secondary: oklch(0.65 0.02 260);
}
Hier gibt es mehrere Surface-Ebenen (z.B. für Cards oder Elevation) und verschiedene Text-Hierarchien. Die Lightness-Werte sind systematisch gestaffelt und invertieren sich im Dark Mode, während alle anderen Eigenschaften konsistent bleiben.
Komplette Farbpaletten on-the-fly generieren
Die Kombination aller besprochenen Techniken ermöglicht ein Pattern, das die Wartbarkeit von Farbsystemen revolutioniert. Das Generieren kompletter Farbpaletten direkt im CSS, ohne Build-Tools oder Präprozessoren. Man definiert nur die Kernfarbe, alle Varianten werden daraus abgeleitet.
Das Grundprinzip:
:root {
--brand: oklch(0.62 0.14 230);
--brand-light: color-mix(in oklch, var(--brand) 80%, white);
--brand-dark: color-mix(in oklch, var(--brand) 65%, black);
}
Diese drei Zeilen erzeugen eine Farbpalette mit drei Abstufungen. Die mittlere Farbe (--brand) ist die Ausgangsfarbe. Die helle Variante (--brand-light) entsteht durch 20% Mischung mit Weiß, die dunkle (--brand-dark) durch 35% Mischung mit Schwarz. Alle drei Farben sind harmonisch aufeinander abgestimmt, weil die Mischung im OKLCH-Farbraum erfolgt.
Das Pattern funktioniert für beliebig komplexe Systeme. Will man eine vollständige Palette wie in Material Design oder Tailwind CSS, erweitert man einfach die Anzahl der Abstufungen:
:root {
--brand: oklch(0.62 0.14 230);
--brand-50: color-mix(in oklch, var(--brand) 10%, white);
--brand-100: color-mix(in oklch, var(--brand) 20%, white);
--brand-200: color-mix(in oklch, var(--brand) 40%, white);
--brand-300: color-mix(in oklch, var(--brand) 60%, white);
--brand-400: color-mix(in oklch, var(--brand) 80%, white);
--brand-500: var(--brand);
--brand-600: color-mix(in oklch, var(--brand) 90%, black);
--brand-700: color-mix(in oklch, var(--brand) 70%, black);
--brand-800: color-mix(in oklch, var(--brand) 50%, black);
--brand-900: color-mix(in oklch, var(--brand) 30%, black);
}
Der Vorteil dieses Ansatzes ist enorm. Will man die Brand-Color ändern, ändert man nur eine einzige Zeile (--brand), und alle abgeleiteten Farben passen sich automatisch an. Das ist besonders wertvoll für White-Label-Produkte, bei denen verschiedene Kunden unterschiedliche Markenfarben verwenden, oder für Themes, bei denen Nutzer ihre eigenen Farben definieren können.
Die so entstehenden Farbvarianten sind qualitativ vergleichbar mit denen professioneller Designsysteme wie Material Design, Tailwind CSS oder Token Studio. Der Unterschied: Man benötigt keine Build-Tools, keine Generatoren, keine manuellen Anpassungen. Alles läuft direkt im Browser, zur Laufzeit.
Grenzen und Browser-Support
Trotz aller Vorteile gibt es auch bei CSS Color Level 5 Grenzen und Herausforderungen, die man kennen sollte. Die gute Nachricht ist: Der Browser-Support ist bereits sehr gut, und die Technologie ist produktionsreif.
Sehr guter Support haben die Kernfunktionen.
- OKLCH wird von allen modernen Browsern unterstützt (Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+). Das sind etwa 95% der globalen Nutzer (Stand 2025).
- LCH (die Vorgänger-Spezifikation von OKLCH) hat denselben Support. Die
color()-Funktion für andere Farbräume wie Display P3 oder Rec2020 ist ebenfalls weit verbreitet. Undcolor-mix()funktioniert in allen modernen Browsern, die auch OKLCH unterstützen.
Experimentell ist derzeit noch color-contrast(). Diese Funktion ist Teil der CSS Color Level 5 Spezifikation, wird aber aktuell nur in Safari Technology Preview unterstützt. Für Produktionsumgebungen sollte man daher alternative Lösungen verwenden. Das sind entweder statische Farbdefinitionen oder JavaScript-basierte Kontrast-Checks. Die Funktion ist jedoch vielversprechend und wird voraussichtlich in den kommenden Jahren breiter verfügbar.
Ein wichtiger Aspekt ist das Fallback-Verhalten. Ältere Browser, die OKLCH nicht verstehen, ignorieren die entsprechenden CSS-Regeln einfach. Das bedeutet: Man sollte immer einen Fallback definieren:
.element {
background: #3b82f6; /* Fallback für ältere Browser */
background: oklch(0.62 0.18 255);
}
Browser, die OKLCH nicht verstehen, verwenden die erste Zeile mit dem Hex-Wert. Moderne Browser überschreiben sie mit der zweiten Zeile. Dieses Pattern funktioniert gracefully und stellt sicher, dass die Seite auch in älteren Browsern nutzbar bleibt.
Alternativ kann man auch @supports für explizite Feature Detection verwenden:
.element {
background: #3b82f6;
}
@supports (background: oklch(0 0 0)) {
.element {
background: oklch(0.62 0.18 255);
}
}
Dieser Ansatz ist expliziter und ermöglicht es, komplexere Fallback-Strategien zu implementieren, wenn OKLCH-Farben Teil eines größeren Systems sind.
Ein weiterer Punkt sind Farbumfänge. OKLCH kann Farben beschreiben, die außerhalb des sRGB-Farbraums liegen. Das sind etwa besonders satte oder leuchtende Farben, die nur auf modernen Wide-Gamut-Displays darstellbar sind. Auf älteren Displays werden diese Farben automatisch in den darstellbaren Bereich gemappt (Gamut Mapping), was zu leicht abweichenden Ergebnissen führen kann. In der Praxis ist das meist unkritisch, weil die Anpassung intelligent erfolgt.
Schließlich gibt es Performance-Überlegungen. OKLCH-Berechnungen sind minimal aufwendiger als RGB-Berechnungen, weil sie Farbkonvertierungen erfordern. In der Praxis ist der Unterschied jedoch vernachlässigbar und selbst auf Low-End-Geräten sind keine spürbaren Performance-Einbußen zu erwarten.
Fazit
CSS Color Level 5 repräsentiert einen fundamentalen Fortschritt für die Farbgestaltung im Web. Nach Jahrzehnten mit RGB- und HSL–Modellen, die nie wirklich für menschliche Wahrnehmung optimiert waren, haben wir endlich Werkzeuge, die auf modernen Erkenntnissen der Farbwissenschaft basieren.
OKLCH ermöglicht präzisere Farbdefinitionen, bei denen ein numerischer Wert tatsächlich mit der visuellen Wahrnehmung korreliert. Man kann sagen „Diese Farbe soll Helligkeit 0.7 haben” und erhält ein Ergebnis, das unabhängig vom Farbton tatsächlich so hell wirkt. Das war mit HSL unmöglich.
Farbsysteme lassen sich leichter skalieren. Aus einer einzigen Basis-Farbe kann man komplette Paletten mit 9-11 Abstufungen ableiten, die alle harmonisch aufeinander abgestimmt sind. Keine manuellen Anpassungen, keine Trial-and-Error-Prozesse, keine Design-Tools und das alles direkt im CSS, zur Laufzeit.
Farben können harmonischer gemischt werden. color-mix() in Kombination mit OKLCH erzeugt natürliche, saubere Übergänge, nicht die schlammigen Zwischentöne, die man mit RGB-Mischungen erhält. Das macht dynamische Farbsysteme deutlich robuster.
Die Ausrichtung auf Accessibility wird einfacher. WCAG-konforme Kontrastverhältnisse lassen sich leichter erreichen und überprüfen, weil Lightness direkt mit der Wahrnehmung korreliert. color-contrast() (sobald es breiter verfügbar ist) wird diese Prozesse weiter automatisieren.
Und schließlich sind Light/Dark Themes konsistenter. Man kann dieselbe Farbe einfach durch Anpassung der Lightness in beide Modi übertragen, ohne dass sich die Farbidentität ändert. Die Markenfarbe bleibt erkennbar, nur die Helligkeit passt sich an.
CSS Color Level 5 ist heute produktionsreif. Der Browser-Support ist exzellent, die Performance ist unkritisch, und die Vorteile sind sofort spürbar. Es ist eines der modernsten und wirkungsvollsten Tools für hochwertiges UI-Design und ein Werkzeug, das jedes moderne Designsystem nutzen sollte.
Kommentare