OKLCH und HLS für CSS color und background-color

Apr 2026

OKLCH (Lightness, Chroma, Hue) ist eine relativ junge Darstellung für Farben auf Webseiten und basiert auf drei Merkmalen von Farben, die uns besser entgegen kommen als Farbangaben in RGB oder HEX. Der Wert für Hue verrät den Farbton, Chroma steht für flau bis brillant und Lightness bestimmt wie hell oder dunkel die Farbe scheint.

Warum Hex und RGB nicht optimal sind

Farben auf Webseiten werden immer noch zu einem großen Teil als RGB oder Hex notiert und meist durch einen Klick auf ein Farbfeld ausgewählt. RGB ist der native Farbmodell der digitalen Geräte. Es ist aber kaum möglich, aus den RGB-oder Hex-Angaben eine Farbe einzuschätzen oder eine eine hellere, komplementäre oder brillante Variante vorauszusagen. RGB-Werte erscheinen chaotisch, die HEX-Notation für RGB wirkt kryptisch.

Pink

Steelblue

Mediumseagreen

Skyblue

OKLCH und HSL – moderne CSS-Farben

OKLCH und HSL eröffnen sich unserem Farbverständnis schneller als RGB oder Farbangaben in HEX. Beide Farbräume unterscheiden Farben nach ihrem Farbton (HUE), ihrer Sättigung (Saturation) oder Chroma und ihrer Helligkeit (Lightness).

Farbsystem	OKLCH	HSL
HUE	Farbton als Winkel von 0 bis 360°	Farbton als Winkel von 0 bis 360°
CHROMA	Chroma (Farbstärke / Sättigung) 0 bis ~0.4+ oklch(0.7 0 200) █ oklch(0.7 0.2 200) █	Sättigung von 0 bis 100%
LIGHTNESS	Bereich: 0 bis 1 (oder 0 bis 100%) oklch(0.2 0.1 200) → sehr dunkel █ oklch(0.9 0.1 200) → sehr hell █	Helligkeit von 0 bis 100%

Chroma, die Brillanz oder Sättigung ist nicht fest begrenzt wie bei HSL.

Ein helleres oder dunkleres, höher oder weniger gesättigtes Blau lässt sich voraussagen ohne einen Farbpicker zu bemühen.

hsl(270 70% 70%)
     ▲   ▲   ▲
     │   │   └-- Helligkeit
     │   │
     │   └-- Sättigung
     │
     └-- Farbe von 0°-360° 
         auf dem Farbkreis

oklch(69% 0.16 306)
       ▲   ▲    ▲
       │   │    └-- HUE Farbton 0°-360° 
       │   │        auf dem Farbkreis
       │   │
       │   └-- Croma, Farbbrillanz
       │
       └-- Lightness

Warum OKLCH jetzt HSL ersetzt

HSL war der erste Versuch, ein Farbsystem in CSS aufzustellen, in dem Farben mit ihrer Helligkeit und Sättigung leichter vorauszusagen sind. Die Helligkeitskomponenten von HSL und OKLCH verhalten sich unterschiedlich.

hsl(270,70%,70%)

oklch(69% 0.16 306)

hsl(270,70%,90%)

oklch(89% 0.16 306)

Auch wenn HSL und OKCLH auf den ersten Blick viel gemeinsam haben: In OKLCH ist die Helligkeit visuell gleichmäßig – kleine Änderungen fühlen sich gleich an (anders als bei RGB/HSL). In HSL wirkt die Farbe bei einer höheren Helligkeit leicht entsättigt (als wäre Weiß eingemischt worden) und driftet so ins Pastell. HSL ist im Grunde genommen nur eine Transformation von sRGB.

In OKLCH hingegen ist die Helligkeit »perzeptiv«: Farben werden gleichmäßiger hell, der Farbton Hue und auch das Chroma bleiben stabil, weil Lightness, Chroma und Hue getrennt modelliert sind.

Neu! – oklch – Farbpicker und Umrechnen mit Farbumfangwarnung

OKLCH ist ein modernes Farbmodell, das deutlich wahrnehmungsgetreuer (perceptual uniform) ist als RGB oder HSL. Farben wirken bei gleichem L-Wert tatsächlich gleich hell, Verläufe wirken natürlicher.

OKLCH steht für:

L → Lightness (Helligkeit)
C → Chroma (Farbsättigung)
H → Hue (Farbwinkel)

Lightness (L):

Das Gelb erscheint uns schwach: Der RGB-Monitor kann nicht alle Farben gleich gut darstellen. Darum ist das Farbrad auch nicht wirklich kreisförmig, sondern »wabbert« am Rand. Werte, die in sRGB nicht dargestellt werden können, erhalten ein Warnsignal ähnlich wie in Photoshop. Ein zweites Farbfeld zeigt die nächstgelegene Farbe in sRGB.

OKLCH wird von allen modernen Browsern unterstützt und ist direkt in CSS einsetzbar.