HSL-Farbraum

Im Web findet man Farben meistens als HEX-Wert wie z. B. #FFFFFF (schwarz) oder #FF0000 (rot). Dies ist nichts anderes, als eine alternative Schreibweise für RGB (rot, grün, blau), wobei die Werte als HEX der Zahlen von 0 bis 255 angegeben werden. Die ersten zwei Stellen stehen für rot, die nächsten zwei für Grün und die letzten für blau.

Dieses System hat allerdings einen entscheidenden Nachteil. Obwohl man sich mitunter noch daran erinnern kann, wie man damit schwarz, weiß, rot, grün oder blau darstellt, werden alle anderen Farben schon komplizierter – abgesehen davon, dass kaum jemand mit den grellsten Varianten dieser Farben arbeitet 😉. Noch schwieriger wird es, wenn zwar die gleiche Farbe, aber mit unterschiedlichen Intensitäten gewünscht sind.

Glücklicherweise gibt es in CSS auch die alternative Schreibweise HSL. HSL steht für hue (Farbton von 0 bis 360), saturation (Sättigung von 0 bis 100 %), und lightness (Helligkeit von 0 bis 100 %).

Schauen wir uns die drei Bestandteile im Detail an.

Hue (Farbton)

Dieser wird mit einem Wert zwischen 0 und 360 angegeben.

Wie man aus der Grafik erkennt, hat rot den Wert 0, grün den Wert 120 und blau den Wert 240. Dazwischen liegen jeweils die Mischfarben.

Saturation (Sättigung)

Dieser Wert wird als Prozent zwischen 0 und 100 angegeben.

Bei der Sättigung geht es um die Intensität der Farbe. Je höher dieser Wert ist, desto intensiver oder greller wird diese. Nachfolgend ein paar Beispiele. Als Farbton habe ich 240 (= blau) und als Helligkeit 50 % gewählt.

Wie man hierbei gut erkennen kann, ist ein Wert kleiner 10 % grau, da der Farbton nicht mehr wirklich sichtbar ist. Werte ab 90 % hingegen sind so stark gesättigt, dass sie beim Lesen am Bildschirm fast blenden.

Hier das gleiche nochmal in Grün:

Lightness (Helligkeit)

Gleich wie die Sättigung wird auch dieser Wert als Prozent mit einer Zahl zwischen 0 und 100 angegeben.

Dieser Wert ist meiner Meinung nach am Schwierigsten zu erklären. Div. Beschreibungen bezeichnen ihn als „Anteil des reflektierten Lichts“ – was auch immer das heißen soll 😉. Daher am besten ein paar Beispiele.

Das erste Beispiel ist wieder mit dem Farbton 240 (= blau). Als Sättigung habe ich im ersten Beispiel 20 %, im zweiten 40 %, im dritten 70 % und im letzten 90 % gewählt.

Ein Wert von 0 % ist immer schwarz, da kein Licht mehr reflektiert wird, und ein Wert von 100 % immer weiß, da volle Reflektion.

Und nochmal das gleiche Beispiel in Grün.

Schreibweise in CSS

Die Schreibweise in CSS ist die Funktion „hsl“ mit den Parametern Farbton, Sättigung und Helligkeit. Zusätzlich gibt es noch die Funktion „hsla“ bei der zusätzlich die Deckkraft der Farbe von 0 (= durchsichtig) bis 1 (= voll deckend) angegeben werden kann.

color: hsl(120, 70%, 50%);
background-color: hsl(120, 70%, 50%);

color: hsla(120, 70%, 50%, 0.5);
background-color: hsla(120, 70%, 50%, 0.7);

Wenn wir das Ganze mit CSS-Variablen machen, wird es noch interessanter 😀. Hierfür könnte z. B. der Farbton und die Sättigung als Variable definiert werden und nur noch die Helligkeit passend dazu gemischt wird. Damit kann die Farbe auch nachträglich sehr einfach (also im besten Fall an einer Stelle) angepasst werden.

--hue: 120;
--saturation: 50%;

color: hsl(var(--hue), var(--saturation), 50%);
background-color: hsl(var(--hue), var(--saturation), 50%);

Farbplatte für UI-Design

Mit HSL lässt sich wunderbar einfach eine Farbpalette für ein UI-Design erstellen. Hierfür verwenden wir als Primärfarbe die Farbe Blau mit einem dezenten Anteil grün:

Dies könnte z. B. als Hintergrundfarbe für einen Button oder als Textfarbe für einen Link verwendet werden.

Dazu mit dem gleichen Farbton eine dunkle und eine helle Variante.

Aus diesen zwei Farben kann jetzt bspw. ein Badge erstellt werden.

Oder andersrum eine Navigation-Bar.