Leitfaden für moderne CSS-Farbfunktionen: OKLCH, color-mix() und mehr
Die Art und Weise, wie wir Farben im Web definieren, durchläuft derzeit einen massiven Wandel. Jahrzehntelang verließen sich Entwickler auf rgb() und hex-Codes, später kam hsl() für eine bessere menschliche Lesbarkeit hinzu. Da sich jedoch die Display-Technologie weiterentwickelt (mit HDR- und Wide-Gamut-Bildschirmen) und Barrierefreiheit zu einer Kernanforderung wird, zeigen diese alten Modelle ihre Grenzen.
Hier kommen die CSS-Farbfunktionen der neuen Generation ins Spiel: OKLCH, color-mix() und die Relative Farbsyntax. Diese Tools sind nicht nur „neue Wege, um alte Dinge zu tun“ – sie lösen grundlegende Probleme in der Farbtheorie und der Barrierefreiheit im Web.
1. Warum OKLCH der neue Standard ist
Wenn Sie jemals versucht haben, eine konsistente Farbpalette mit HSL zu erstellen, haben Sie vielleicht ein Problem bemerkt: Verschiedene Farbtöne mit demselben Helligkeitswert (Lightness) wirken für das menschliche Auge nicht gleich hell. Ein „reines Blau“ und ein „reines Gelb“ bei 50 % Helligkeit erscheinen zum Beispiel völlig unterschiedlich hell.
Die perzeptive Gleichmäßigkeit von OKLCH
OKLCH steht für:
- O: Oklab (der Farbraum, auf dem es basiert)
- L: Lightness (wahrgenommene Helligkeit)
- C: Chroma (Sättigung oder Intensität der Farbe)
- H: Hue (Farbton, der Winkel auf dem Farbkreis)
Das „K“ in OKLCH bezieht sich auf die Perzeptive Gleichmäßigkeit (Perceptual Uniformity). Das bedeutet: Wenn Sie die Helligkeit (L) gleich lassen und nur den Farbton (H) ändern, behält die Farbe für das menschliche Auge die gleiche wahrgenommene Helligkeit bei.
Code-Beispiel:
.button-primary {
/* Ein schönes, perzeptiv ausgewogenes Blau */
background-color: oklch(60% 0.15 250);
}
.button-secondary {
/* Den Farbton ändern, während die exakt gleiche wahrgenommene Helligkeit beibehalten wird */
background-color: oklch(60% 0.15 20);
}
Vorteile von OKLCH:
- P3-Farbraum-Unterstützung: Zugriff auf 50 % mehr Farben als im Standard-sRGB (RGB/HEX).
- Einfachere Design-Systeme: Erstellen Sie barrierefreie Themes, indem Sie einfach den Helligkeitswert anpassen.
- Kein „Vergrauen“: Farben bleiben beim Anpassen lebendig, im Gegensatz zu HSL.
2. Farben dynamisch mischen mit color-mix()
Die Funktion color-mix() ermöglicht es Ihnen, zwei Farben direkt in CSS zu mischen, was früher einen Präprozessor wie Sass oder eine JavaScript-Bibliothek erforderte.
Syntax:
color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)
Praktischer Anwendungsfall: Hover-Zustände
:root {
--brand-color: #3b82f6;
}
.btn:hover {
/* Die Markenfarbe mit 20 % Weiß mischen für eine perfekte Aufhellung */
background-color: color-mix(in oklab, var(--brand-color), white 20%);
}
Das Mischen von Farben im oklab-Farbraum liefert meist die natürlichsten Ergebnisse und vermeidet die „schmutzigen“ Farben, die oft beim Mischen im RGB-Raum entstehen.
3. Relative Farbsyntax: Die Zukunft der Farbbearbeitung
Die Relative Farbsyntax (RCS) ist vielleicht die leistungsfähigste Ergänzung der CSS-Farben. Sie ermöglicht es Ihnen, eine vorhandene Farbe zu nehmen, sie in ihre Bestandteile zu zerlegen, diese zu modifizieren und wieder zusammenzusetzen.
Beispiel:
.alert {
--base-color: blue;
/* 'blue' nehmen, Farbton und Chroma beibehalten, aber die Helligkeit auf 90 % setzen */
background-color: oklch(from var(--base-color) 0.9 c h);
/* Einen Alphakanal relativ zum Original setzen */
color: oklch(from var(--base-color) l c h / 0.8);
}
Dies macht jede CSS-Farbvariable effektiv zu einer „Fabrik“ für ihre eigenen Varianten (Tönungen, Schattierungen, transparente Versionen), ohne dass Dutzende separater Variablen erforderlich sind.
4. Wide-Gamut-Farben (Display-P3)
Die meisten modernen Smartphones und Laptops (wie MacBooks und High-End-Android-Geräte) unterstützen Wide-Gamut-Displays. Traditionelle CSS-Farben sind auf den sRGB-Farbraum beschränkt, was bedeutet, dass sie die lebhaftesten Grüntöne, Rottöne und Orangetöne, zu denen diese Bildschirme fähig sind, nicht anzeigen können.
Mit der Funktion color() und display-p3 können Sie diese „HD-Farben“ freischalten.
.neon-green {
/* Dieses Grün kann in Standard-HEX/RGB nicht dargestellt werden */
color: color(display-p3 0 1 0);
}
5. Besserer Dark Mode mit light-dark()
Die neue Funktion light-dark() vereinfacht die Theme-Implementierung, indem sie automatisch den richtigen Wert basierend auf den Systemeinstellungen des Benutzers auswählt.
body {
/* Keine komplexen @media (prefers-color-scheme) Blöcke mehr für einfache Farben */
background-color: light-dark(#ffffff, #1a1a1a);
color: light-dark(#333333, #efefef);
}
FAQ: Häufig gestellte Fragen
F: Warum sollte ich OKLCH anstelle von HSL verwenden?
A: HSL ist nicht perzeptiv gleichmäßig. Wenn Sie den Farbton in HSL ändern, während Sie die Helligkeit bei 50 % belassen, scheint die Helligkeit stark zu schwanken. OKLCH behebt dies und macht es viel einfacher, barrierefreie Design-Systeme und konsistente UI-Komponenten zu erstellen.
F: Wird OKLCH von allen Browsern unterstützt?
A: Seit 2024 werden OKLCH, color-mix() und die Relative Farbsyntax von allen gängigen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt. Für ältere Browser sollten Sie einen HEX-Fallback bereitstellen.
F: Welcher Farbraum ist am besten zum Mischen geeignet?
A: Für die meisten UI-Aufgaben sind oklab oder oklch die besten Interpolationsräume für color-mix(). Sie vermeiden die „graue Todeszone“ in der Mitte eines Farbverlaufs oder einer Mischung, die bei sRGB oft auftritt.
Bereit zum Experimentieren?
Modernes CSS macht Design-Tools leistungsfähiger und Code wartbarer. Probieren Sie unseren Farbkonverter aus, um zu sehen, wie Ihre Markenfarben in verschiedenen Formaten aussehen.
Hinweis: Wir arbeiten derzeit an einem speziellen OKLCH-Farbwähler und einem Generator für die Relative Farbsyntax. Bleiben Sie dran!