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

HSL in CSS

Wir denken bei einer Farbe wie »Himmelblau« nicht an einen mittleren Energielevel von Rot mit höherer Energie von Blau und Grün (skyblue), sondern an ein helles klares Blau. 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). 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 0% = Schwarz, 100% = Weiß
     │   │
     │   └-- Sättigung 0% = Farblos, 100% = höchste Reinheit
     │
     └-- Farbe von 0°-360° auf dem Farbkreis

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

Auch wenn HSL und OKCLH auf den ersten Blick viel gemeinsam haben: Die Helligkeit verhält sich völlig unterschiedlich. 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.

Farbe auswählen: Der Farbpicker im Farbrad

Für die Auswahl von Farben wird meist das Farbrad genutzt: Auf dem Rand wählen wir den Farbton, im Farbfeld die Helligkeit auf der Diagonalen von oben links nach unten rechts und die Sättigung von unten links nach oben rechts.

Farbtöne gleicher Helligkeit und gleicher Sättigung passen meist gut zusammen. Eine monochrome Farbpalette entsteht aus einem Farbton in verschiedenen Helligkeiten / Sättigungen.

Am Rande: Meist wird das Farbrad mit einer HSL-Ausgabe gezeigt, hier mit dem jüngeren OKLCH.

RGB: schwer einzuschätzen

Wozu OKLCH und HSL für Farbangaben? RGB ist der native Farbraum der digitalen Geräte. Fast alle sichtbaren Farben können als Mischung dreier Primärfarben – z.B. eben Rot, Grün und Blau – erzeugt werden.

Je größer der Anteil aller drei Farben, desto heller wird die Mischung bis zum reinen Weiß.

Aber welche dieser Farben hat den Wert rgb(135,206,235)?

Es ist kaum möglich, aus den RGB-Angaben eine Farbe einzuschätzen oder umgekehrt die RGB-Werte für eine Farbe vorauszusagen. RGB-Werte erscheinen chaotisch, die HEX-Notation für RGB wirkt kryptisch.

Für das Design werden häufig Farbpaletten zusammengestellt. Typische Farbpaletten sind

• monochrom: Eine Farbe in verschiedenen Helligkeiten
• analog: Benachbarte Farben gleicher Helligkeit und Sättigung / Chroma
• komplementär: Grundfarbe und Komplementärfarbe in gleicher Helligkeit und Sättigung / Chroma

Mit OKLCH ist eine Farbpalette viel einfacher erstellt als mit RGB.

HSL-Falle: Helligkeit

HSL erleichtert Farbkorrekturen und das Zusammenstellen von Farbpaletten, denn HSL trennt die Farbe von der Helligkeit. Perfekt ist HSL als Farbmodell aber auch nicht, denn Lightness, die Helligkeit ist zwischen den Farbtönen nicht vergleichbar.

Die Grauskala unter dem Farbband entsteht mit CSS filter.

In HSL sind die Helligkeiten von Blau und Gelb zwar gleich, aber das geht dem menschlichen Farbsehen gegen den Strich. Rechnet man die Farbe heraus, ist Blau deutlich dunkler als Gelb!

HSL: Probleme mit der Gleichabständigkeit

HSL-Farben sind besser einzuschätzen als RGB-Farben, aber auch HSL hat eine Crux. Dem HSL-Farbmodell mangelt es an Gleichabständigkeit. Was jetzt klingt, als wäre es eher an Theoretiker gewandt, bringt auch den Designer aus dem Konzept.

Die Blautöne unterscheiden sich im Wert für den Farbton um 10, aber diesen Unterschied nimmt unser Auge kaum wahr. Hingegen sehen wir einen deutlichen Unterschied zwischen den beiden Orangetönen, obwohl der Unterschied auch hier nur um 10 abweicht.

Neu! – oklch – ein modernes, intuitives Farbmodell

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:

1. L → Lightness (Helligkeit)
2. C → Chroma (Farbsättigung)
3. H → Hue (Farbwinkel)

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. Außerdem ist OKLCH gegenüber HSL um ca. 25–30° „gedreht“.

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.

HSL vs HSV – Verwirrung

Am Ende lauert eine Falle bei der Angabe von Farben im HSL-Farbraum: CSS setzt auf HSL-Farbangaben, Photoshop, der Farbwähler von Mac OS und viele andere Anwendungen hingegen setzen auf HSV. Die beiden Modelle sind sich sehr ähnlich, aber doch nicht gleich. Und wenn Photoshop und Apple auf HSV setzen – HSV ist als Farbangabe in CSS auch in CSS 4 nicht auf dem Plan.

Windows Paint hat zwar Farben als HSL im Menü des Farb-Editors, aber Paint komprimiert die Farben auf eine Skala von 0 bis 239 und setzt bei Helligkeit und Sättigung auf Werte zwischen 0 und 239. Paint ist immer noch das Malprogramm aus Windows 3.1.