HSL 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. HSL eröffnet sich unserem Farbverständnis schneller als RGB oder Farbangaben in HEX. Wir unterscheiden Farben nach ihrem Farbton (HUE), ihrer Sättigung (Saturation) und ihrer Helligkeit (Lightness). In HSL läßt sich ein helleres oder dunkleres, höher oder weniger gesättigtes Blau leicht einschätzen ohne einen Farbpicker zu bemühen.

hsla(140,20%,50%,0.5)
   |  |   |   |   |
   |  |   |   |   +-- Alpha oder Opacity: Deckkraft 
   |  |   |   |
   |  |   |   +-- Helligkeit 0% = Schwarz, 100% = Weiß
   |  |   |
   |  |   +-- Sättigung 0% = Farblos, 100% = höchste Reinheit
   |  |
   |  +-- Farbe von 0°-360° auf dem Farbkreis
   |
   +-- Indikator für Deckkraft

Der Computer liebt RGB, aber für Menschen ist RGB alles andere als intuitiv. Wir verstehen Farben in der HSL-Schreibweise schneller und können sie einfacher miteinander in Verbindung setzen.

HUE (Farbton) ist ein Winkel zwischen 0 bis 360° in einem Farbrad mit dem kompletten Farbkreis. Die Werte 0 und 360° stehen für das reine Rot, 120° für Grün, 240° für Blau.

Das HSL-Farbrad

Für die Auswahl von Farben in der HSL-Notation 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.

RGB: schwer einzuschätzen

Wozu auch noch HSL für Farbangaben? RGB ist doch der native Farbraum der digitalen Geräte und uns daher am besten vertraut. 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ß.

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

Aber aus den RGB-Angaben eine Farbe einzuschätzen oder umgekehrt die RGB-Werte für eine Farbe vorauszusagen ist kaum möglich. RGB-Werte erscheinen uns chaotisch, die HEX-Notation für RGB darüber hinaus als kryptisch.

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.

Achtung! Die Grauskala unter dem Farbband kommt von CSS filter und wird von IE11 nicht unterstützt.

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.

HSL- und 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.