T
css colors oklch color-mix design

Moderner CSS-Farbleitfaden: OKLCH, color-mix() und die Zukunft des Webdesigns

Erkunden Sie die nächste Generation der CSS-Farben. Ein vollständiger Leitfaden zu OKLCH, color-mix(), LCH und relativer Farbsyntax.

2026-04-12

Moderner CSS-Farbleitfaden: OKLCH, color-mix() und die Zukunft des Webdesigns

Farben sind die Seele des Webdesigns, aber jahrzehntelang waren wir in den Beschränkungen von sRGB und nicht wahrnehmungsbezogenen Farbräumen wie RGB und HSL gefangen. Modernes CSS hat diese Grenzen gesprengt und eine neue Ära hochauflösender, wahrnehmungsmäßig gleichmäßiger und dynamischer Farbsysteme eingeleitet.

In diesem Leitfaden untersuchen wir die revolutionären Farbfunktionen und -merkmale, die die Art und Weise verändern, wie wir Farben in CSS definieren und manipulieren.

2. Dynamische Manipulation mit color-mix()

Eine der leistungsstärksten Neuerungen in CSS ist die Funktion color-mix(). Sie ermöglicht es Ihnen, zwei Farben direkt in Ihrem Stylesheet zu mischen, wodurch komplexe Sass-Berechnungen oder JavaScript überflüssig werden.

Syntax: color-mix(in [Farbraum], [Farbe1] [Prozent], [Farbe2] [Prozent])

Beispiel: Erstellen eines sofortigen Hover-Zustands

.button {
  background: var(--primary-color);
}

.button:hover {
  /* 20 % Weiß in die Primärfarbe mischen */
  background: color-mix(in oklch, var(--primary-color), white 20%);
}

Das Mischen in den Räumen oklch oder oklab führt normalerweise zu viel natürlicher aussehenden Ergebnissen als das Mischen in RGB.

3. LCH und LAB beherrschen

Während OKLCH wegen seiner Intuitivität im Allgemeinen bevorzugt wird, bilden LCH und LAB die Grundlagen.

  • LAB: Verwendet ein Koordinatensystem (L für Helligkeit, a für die Grün-Rot-Achse, b für die Blau-Gelb-Achse).
  • LCH: Die Polarkoordinaten-Version von LAB (Lightness, Chroma, Hue).

Diese Farbräume sind geräteunabhängig und können jede für Menschen sichtbare Farbe darstellen. Sie sind die „native“ Art und Weise, wie moderne Browser Farben intern verarbeiten.

4. Die color()-Funktion und Display-P3

Die Funktion color() ist eine allgemeine Methode für den Zugriff auf spezifische Farbräume wie display-p3, a98-rgb oder prophoto-rgb.

/* Zugriff auf den Wide-Gamut-P3-Farbraum */
.p3-green {
  color: color(display-p3 0 1 0); /* Reinstes P3-Grün */
}

Wenn ein Gerät den angegebenen Farbraum nicht unterstützt, greift CSS automatisch auf das nächstgelegene sRGB-Äquivalent zurück.

5. Anpassung an Themen mit light-dark()

Da der Dark Mode zu einer Standardanforderung wird, vereinfacht die Funktion light-dark() den Themenwechsel. Sie wählt automatisch den ersten Wert für den Light Mode und den zweiten Wert für den Dark Mode aus, basierend auf den Systemeinstellungen des Benutzers.

body {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #efefef);
}

6. Relative Farbsyntax (RCS)

Die Relative Farbsyntax ist vielleicht die fortschrittlichste Farbfunktion. Sie ermöglicht es Ihnen, eine vorhandene Farbe zu „destrukturieren“, eine ihrer Komponenten zu ändern und eine neue Farbe zu erstellen – alles in einer Zeile.

/* Eine vorhandene Farbe nehmen und ihre Deckkraft oder Helligkeit ändern */
.card {
  --base-color: #3498db;
  background: oklch(from var(--base-color) 80% c h); /* Helligkeit auf 80 % erhöhen */
  border-color: oklch(from var(--base-color) l c h / 0.5); /* Farbe beibehalten, 50 % Deckkraft hinzufügen */
}

Zusammenfassung moderner CSS-Farbfunktionen

Funktion Bestens geeignet für Unterstützung
oklch() Wahrnehmungsmäßig gleichmäßiges Design, barrierefreie Paletten Moderne Browser
color-mix() Mischen von Farben (Hover-Zustände, Overlays) Moderne Browser
light-dark() Einfache Unterstützung des Dark Mode Neu (Unterstützung prüfen)
RCS Ableiten von Farben aus Variablen Im Kommen

Fazit

Modernes CSS hat Farben von einem statischen Wert in ein dynamisches, programmierbares System verwandelt. Durch die Nutzung von OKLCH für Präzision und color-mix() für Flexibilität können Sie Web-Erlebnisse schaffen, die nicht nur schöner, sondern auch barrierefreier und leistungsfähiger sind.

Bereit für ein Upgrade Ihres Designs? Experimentieren Sie mit unserem Farbkonverter und freuen Sie sich auf unseren kommenden OKLCH-Farbauswähler und CSS-Farbmischgenerator!

Zurück zum Blog