CSS-Farben: Das HSL- und HSLA-Format

October 29, 2022

Das HSL-Farbraummodell (Hue, Saturation, Lightness / Farbton, Sättigung, Helligkeit) ist eines der intuitivsten und entwicklerfreundlichsten Farbformate in CSS. Im Gegensatz zu Hexadezimal-Codes (z.B. #ff0000) oder RGB-Werten ermöglicht HSL das Erstellen von harmonischen Farbpaletten und Schattierungen direkt im Code, ohne externe Design-Tools verwenden zu müssen.

1. Warum HSL verwenden? (Die Vorteile)

Einfache Transparenz: Das HTM-Format des Alpha-Kanals (Deckkraft) ist unkompliziert und erfordert keine Konvertierung in andere Formate.
Komplementärfarben berechnen: Komplementärfarben liegen sich auf dem Farbkreis genau gegenüber (180 Grad Differenz). Sie lassen sich im Kopf berechnen: (hue + 180) % 360.
Einfache Schattierungen: Heller oder dunkler machen für Hover-Zustände, weiche Hintergründe, Rahmen oder Schatten erfordert lediglich die Anpassung des Helligkeitswerts (Lightness). In Sass oder CSS-Variablen macht dies Funktionen wie lighten() oder darken() weitgehend überflüssig.
Einfache Graustufen: Ein kompletter Satz von Graustufen lässt sich durch einfaches Inkrementieren des Helligkeitswerts in 10%-Schritten erzeugen, bei einer Sättigung von 0%.

2. Die beiden CSS-Syntaxen

Es gibt zwei gültige Syntaxen in CSS. Die moderne Syntax wurde 2016 eingeführt und wird von allen aktuellen Browsern unterstützt. Die ältere Syntax wird aus Kompatibilitätsgründen (z.B. IE11) manchmal noch verwendet.

Die moderne Syntax (Empfohlen)

Verwendet Leerzeichen zur Trennung der Werte. Die Deckkraft (Opacity) wird als optionaler vierter Wert nach einem Schrägstrich (/) übergeben.

code

/* Syntax: hsl(Farbton Sättigung Helligkeit [/ Deckkraft]) */
.card {
  color: hsl(200deg 100% 50%); /* Reines Cyan */
  border-bottom: 3px solid hsl(100deg 75% 50% / 0.2); /* Grün mit 20% Deckkraft */
}

Die klassische Syntax (Legacy)

Verwendet Kommata zur Trennung. Für die Deckkraft muss die hsla()-Funktion explizit verwendet werden.

code

/* Nur für ältere Browser notwendig */
.card {
  color: hsl(200deg, 100%, 50%);
  background-color: hsla(200deg, 100%, 50%, 0.2);
}

3. Die Parameter im Detail

HSL stellt Farben in einem zylindrischen Koordinatensystem dar.

Farbton (Hue)

Der Farbton wird als Winkel auf dem Farbkreis (von 0 bis 360 Grad) angegeben. Die Angabe der Einheit deg ist optional.

0 (oder 360): Rot
120: Grün
240: Blau

Sättigung (Saturation)

Bestimmt die Intensität und Reinheit der Farbe in Prozent (0% bis 100%).

0%: Vollständig ungesättigt (Graustufen, unbunte Farbe).
100%: Volle Farbsättigung (maximale Leuchtkraft).

Helligkeit (Lightness)

Bestimmt den Anteil von Weiß oder Schwarz in der Farbe in Prozent (0% bis 100%).

0%: Vollkommen schwarz.
50%: Die reine, unverfälschte Farbe (weder weiß noch schwarz zugemischt).
100%: Vollkommen weiß.

Deckkraft (Opacity / Alpha)

Bestimmt die Transparenz des Elements. Wird als Wert zwischen 0 (vollständig transparent) und 1 (vollständig deckend) oder in Prozent (0% bis 100%) angegeben.

4. Praktische Anwendungsbeispiele

Erstellung von Farbschattierungen

Das folgende Beispiel zeigt, wie einfach es ist, basierend auf einem einzigen Farbton (Grün, 120 Grad) verschiedene funktionale Farbvarianten für ein UI-Element zu erstellen.

code

:root {
  --green-base:   120deg 100%;
  
  --color-primary: hsl(var(--green-base) 50%);          /* Standard-Grün */
  --color-dark:    hsl(var(--green-base) 25%);          /* Dunkelgrün */
  --color-light:   hsl(var(--green-base) 75%);          /* Hellgrün */
  --color-pastel:  hsl(120deg 60% 70%);                 /* Sanftes Pastell-Grün */
}

.button {
  background-color: var(--color-primary);
  border: 1px solid var(--color-dark);
}

.button:hover {
  background-color: var(--color-light); /* Wird bei Hover heller */
}

Deckkraft-Abstufungen

code

.box-100 { background-color: hsl(335deg 100% 50% / 1); }
.box-75  { background-color: hsl(335deg 100% 50% / 0.75); }
.box-50  { background-color: hsl(335deg 100% 50% / 0.5); }
.box-25  { background-color: hsl(335deg 100% 50% / 0.25); }

Fazit

Das HSL-Format ist das flexibelste und intuitivste Farbformat für modernes Webdesign. Durch die einfache Anpassung von Sättigung und Helligkeit können harmonische Farbschemata und interaktive Zustände (wie Hover-Effekte) direkt im CSS-Code ohne den Einsatz von Grafikprogrammen generiert werden. Die moderne, leerzeichen-separierte Syntax ist der heutige Standard für zukunftssicheren Code.