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

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.

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).

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

hsl(270 70% 70%)
     ▲   ▲   ▲
     │   │   └-- Lightness, Helligkeit
     │   │
     │   └-- Sättigung, Farbbrillanz
     │
     └-- HUE Farbton 0°-360° 
         auf dem Farbkreis

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

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.

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. Das macht OKLCH ideal für UI-Design, Themes und Dark Mode.

Verlauf in HSL

Verlauf in OKLCH

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.

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 dann die nächstgelegene Farbe in sRGB.

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

Der Abstand erscheint uns sowohl im Blau als auch im Orange angemessen.

CSS Color: HSL oder HSV

CSS OKLCH- und HSL-Farbangaben (Farbton, Sättigung und Helligkeit) sind intuitiver als Hex- oder RGB-Farben. OKLCH und HSL trennen Farbe von Helligkeit und Sättigung – Komponenten, die das RGB-Farbmodell nicht kennt.

Da heißt es sofort aufpassen! Photoshop, der Color Picker in Mac OS und viele andere Anwendungen hingegen auf HSV. HSL und HSV sind sich sehr ähnlich, aber die Unterschiede sind sichtbar.

Wenn also Farben auf der Webseite mit HTML und CSS nicht so aussehen wie in Photoshop, dann liegt die Diskrepanz in diesem einen Buchstaben L oder V.

            ┌ HUE – Farbton
            │   ┌ Saturation – Sättigung
            │   │   ┌ Lightness – Helligkeit
            ▼   ▼   ▼
color: hsl(321,42%,35%);

color: oklch(0.44 0.12 344);
               ▲    ▲   ▲
               │    │   └ HUE Farbton
               │    └ Chroma – Sättigung
               └ Lightness – Helligkeit

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

• Die großen Farbmuster haben jeweils dieselbe Helligkeit und Sättigung
• Die Streifen unter einem Farbmuster haben dieselbe Farbe, aber unterschiedliche Helligkeit.