Warum Entwickler bei UI-Farben von RGB auf HSL umsteigen

Das HSL-Farbmodell (Hue, Saturation, Lightness - also Farbton, Sättigung, Helligkeit) bietet Entwicklern eine deutlich lesbarere Methode, um in CSS mit Farben zu arbeiten - verglichen mit RGB. Statt zu raten, welche Kombination aus Rot-, Grün- und Blauwerten den gewünschten Farbton ergibt, kannst du mit HSL Farben so beschreiben, wie das Gehirn sie tatsächlich wahrnimmt: Wähle eine Farbe, bestimme ihre Intensität und lege fest, wie hell oder dunkel sie sein soll. Genau dieser Unterschied im Denkmodell ist der Grund, warum immer mehr Entwickler rgb() zugunsten von hsl() aufgeben.

RGB vs. HSL - Der grundlegende Unterschied

RGB definiert Farbe durch die Mischung von drei Lichtkanälen: Rot, Grün und Blau, jeweils auf einer Skala von 0 bis 255. Das Problem dabei ist, dass dies die Art und Weise ist, wie Bildschirme Pixel rendern - nicht wie Menschen Farben wahrnehmen. Wenn du in RGB ein etwas helleres Blau möchtest, musst du alle drei Kanäle im richtigen Verhältnis anpassen. Es gibt keinen einzigen Regler dafür.

HSL hingegen orientiert sich daran, wie Menschen Farben beschreiben:

• Hue (Farbton) - die eigentliche Farbe, ausgedrückt als Grad auf einem 360-Grad-Farbkreis. Rot liegt bei 0, Grün bei 120, Blau bei 240.
• Saturation (Sättigung) - wie intensiv oder verblasst die Farbe ist, von 0 % (reines Grau) bis 100 % (volle Intensität).
• Lightness (Helligkeit) - wie hell oder dunkel die Farbe ist, von 0 % (Schwarz) bis 100 % (Weiß), wobei 50 % die "reine" Farbe darstellt.

Hier ist dasselbe mittlere Blau in beiden Formaten dargestellt:

/* RGB - what do these numbers even mean at a glance? */
color: rgb(70, 130, 180);

/* HSL - instantly readable: blue hue, moderate saturation, medium lightness */
color: hsl(207, 44%, 49%);

Beide ergeben Stahlblau. Aber nur die HSL-Variante ist auf den ersten Blick verständlich. Der Farbton liegt bei 207 (bläulich), die Sättigung ist mit 44 % moderat, und die Helligkeit liegt mit 49 % in der Mitte. Du kannst darüber nachdenken, ohne einen Color Picker öffnen zu müssen.

HSL-Syntax in CSS

Die CSS-Funktion hsl() wird seit CSS3 unterstützt. Die moderne Syntax (CSS Color Level 4) erlaubt außerdem einen vierten Alpha-Parameter direkt innerhalb von hsl() , wodurch hsla() weitgehend überflüssig geworden ist:

/* Classic syntax */
color: hsl(207, 44%, 49%);

/* With alpha (transparency) - old way */
color: hsla(207, 44%, 49%, 0.8);

/* Modern CSS Color Level 4 syntax - commas optional, alpha with slash */
color: hsl(207 44% 49%);
color: hsl(207 44% 49% / 0.8);
color: hsl(207 44% 49% / 80%);

Alle gängigen Browser unterstützen beide Syntaxvarianten. Die kommafreie Variante ist die Richtung, in die sich CSS entwickelt - die Komma-Syntax funktioniert jedoch überall, einschließlich Internet Explorer 9+.

Warum HSL bei der UI-Entwicklung überzeugt

Die eigentliche Stärke von HSL zeigt sich, sobald du Farbvariationen erzeugen musst - was in der UI-Entwicklung ständig vorkommt.

In Sekunden eine Farbpalette aufbauen

Angenommen, deine Markenfarbe ist ein kräftiges Grün bei hsl(140, 70%, 45%) . Du brauchst einen Hover-Zustand, einen deaktivierten Zustand und eine helle Hintergrundtönung. In HSL änderst du jedes Mal nur einen einzigen Wert:

--color-base:     hsl(140, 70%, 45%);  /* base green */
--color-hover:    hsl(140, 70%, 38%);  /* darker - just lower lightness */
--color-disabled: hsl(140, 20%, 65%);  /* washed out - lower saturation */
--color-tint:     hsl(140, 70%, 92%);  /* very light background tint */

Versuch das mal zuverlässig in RGB ohne offenen Color Picker umzusetzen. Es ist echte Arbeit, weil es keine isolierte Achse zum Anpassen gibt.

Analoge und komplementäre Farben

Da der Farbton ein Grad auf dem Farbkreis ist, lassen sich harmonische Paletten durch einfache Arithmetik erzeugen. Analoge Farben liegen innerhalb von 30 Grad voneinander, komplementäre Farben liegen 180 Grad auseinander:

--primary:       hsl(210, 80%, 50%);   /* blue */
--analogous-1:   hsl(180, 80%, 50%);   /* cyan - 30 degrees left */
--analogous-2:   hsl(240, 80%, 50%);   /* purple - 30 degrees right */
--complementary: hsl(30, 80%, 50%);    /* orange - 180 degrees opposite */

Sättigung und Helligkeit bleiben identisch, sodass die Farben wie eine zusammenhängende Familie wirken. Genau so erzeugen Design-Systeme wie Tailwind CSS und Material Design ihre Farbskalen programmatisch.

Praktische CSS-Beispiele

CSS Custom Properties mit HSL-Komponenten

Eines der wirkungsvollsten HSL-Muster ist das Aufteilen der drei Werte in separate CSS Custom Properties. So kannst du sie überall neu zusammensetzen und einzelne Kanäle spontan anpassen:

:root {
  --brand-h: 210;
  --brand-s: 80%;
  --brand-l: 50%;
  --brand-color: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
}

.button {
  background-color: var(--brand-color);
}

.button:hover {
  /* Just override lightness - no need to redefine the whole color */
  background-color: hsl(var(--brand-h), var(--brand-s), 40%);
}

.button:disabled {
  background-color: hsl(var(--brand-h), 20%, 70%);
}

Eine vollständige Tonal-Skala generieren

Design-Systeme benötigen oft 9 bis 10 Abstufungen einer einzigen Farbe (wie Tailwinds Skala von 50 bis 950). Mit HSL kannst du die gesamte Skala erzeugen, indem du die Helligkeit in gleichmäßigen Schritten veränderst und dabei Farbton und Sättigung konstant hältst:

:root {
  --blue-50:  hsl(210, 80%, 95%);
  --blue-100: hsl(210, 80%, 87%);
  --blue-200: hsl(210, 80%, 76%);
  --blue-300: hsl(210, 80%, 65%);
  --blue-400: hsl(210, 80%, 55%);
  --blue-500: hsl(210, 80%, 50%);  /* base */
  --blue-600: hsl(210, 80%, 43%);
  --blue-700: hsl(210, 80%, 36%);
  --blue-800: hsl(210, 80%, 26%);
  --blue-900: hsl(210, 80%, 16%);
}

Einen umfassenderen Überblick darüber, wie CSS-Farbformate miteinander zusammenhängen, bietet der HEX-zu-RGB-Konvertierungsleitfaden - inklusive einer Übersicht, wann welches Format das richtige Werkzeug ist.

Hover-Zustände, Theming und Dark Mode

Hover- und Fokus-Zustände

Mit HSL werden Hover-Zustände zum Kinderspiel. Statt eine komplett neue Farbe zu definieren, verschiebst du einfach die Helligkeit:

.btn-primary {
  background: hsl(210, 80%, 50%);
  transition: background 0.2s ease;
}

.btn-primary:hover  { background: hsl(210, 80%, 43%); }
.btn-primary:active { background: hsl(210, 80%, 36%); }
.btn-primary:focus-visible {
  outline: 3px solid hsl(210, 80%, 70%);
}

Jeder Zustand ist klar mit der Basisfarbe verwandt. Ein Kollege, der diesen Code liest, versteht sofort die Beziehung zwischen den Zuständen.

Theming mit HSL-Variablen

HSL ist das Fundament modernen CSS-Themings. Indem du nur den Farbton als Variable freigibst, kannst du Nutzern oder Admins ermöglichen, das gesamte Farbschema einer App durch Ändern einer einzigen Zahl anzupassen:

/* Default theme: blue */
:root {
  --theme-hue: 210;
}

/* Green theme - just swap the hue */
[data-theme="green"] {
  --theme-hue: 140;
}

/* Purple theme */
[data-theme="purple"] {
  --theme-hue: 270;
}

/* All components use the same hue variable */
.button      { background: hsl(var(--theme-hue), 75%, 50%); }
.link        { color: hsl(var(--theme-hue), 75%, 40%); }
.badge       { background: hsl(var(--theme-hue), 75%, 92%); color: hsl(var(--theme-hue), 75%, 25%); }
.focus-ring  { outline-color: hsl(var(--theme-hue), 75%, 65%); }

Dark Mode mit HSL

Beim Dark Mode spielt HSL seinen größten Vorteil aus. Statt zwei komplett separate Farbpaletten zu pflegen, kehrst du einfach die Helligkeitswerte innerhalb desselben Farbtons um:

:root {
  --bg:   hsl(210, 20%, 98%);   /* near-white background */
  --text: hsl(210, 20%, 15%);   /* near-black text */
  --card: hsl(210, 20%, 93%);   /* slightly darker card */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   hsl(210, 20%, 10%);  /* flip: near-black background */
    --text: hsl(210, 20%, 90%);  /* flip: near-white text */
    --card: hsl(210, 20%, 15%);  /* slightly lighter card in dark */
  }
}

Farbton (210) und Sättigung (20 %) ändern sich dabei nie. Nur die Helligkeit wird umgekehrt. So fühlt sich der Dark Mode wie dasselbe Design an - nur invertiert. Genau das macht guten Dark Mode aus.

Browser-Unterstützung und Kompatibilität

HSL wird von Browsern hervorragend unterstützt. Die Funktion hsl() ist verfügbar seit:

• Chrome 1 (2008)
• Firefox 1 (2004)
• Safari 3.1 (2008)
• Internet Explorer 9 (2011)
• Edge 12 (2015)

Die moderne kommafreie Syntax ( hsl(210 80% 50%) ) und die Slash-Alpha-Syntax ( hsl(210 80% 50% / 0.5) ) sind Teil der CSS Color Level 4 Spezifikation und werden seit 2023 von allen modernen Browsern unterstützt. Falls du noch IE11-Unterstützung benötigst (was inzwischen selten ist), bleib bei der Komma-Syntax.

Du kannst jederzeit einen Color Picker verwenden, um zwischen HSL, RGB und HEX zu konvertieren - praktisch, wenn du Werte gegenprüfen oder Farben an Tools übergeben musst, die nur ein Format akzeptieren.

HSL vs. OKLCH - Was kommt als Nächstes?

Wer tiefer als HSL einsteigen möchte, sollte OKLCH kennen. Es handelt sich dabei um einen wahrnehmungsgleichmäßigen Farbraum, bei dem gleiche numerische Schritte in Helligkeit oder Chroma auch für das menschliche Auge gleich groß wirken - etwas, das HSL nicht vollständig gewährleisten kann.

Das Problem bei HSL ist, dass zwei Farben mit demselben Helligkeitswert in der wahrgenommenen Helligkeit sehr unterschiedlich wirken können. Zum Beispiel erscheint hsl(60, 100%, 50%) (Gelb) deutlich heller als hsl(240, 100%, 50%) (Blau), obwohl beide eine Helligkeit von 50 % haben. OKLCH korrigiert diesen Effekt.

/* HSL - same lightness, different perceived brightness */
color: hsl(60, 100%, 50%);   /* yellow - looks very bright */
color: hsl(240, 100%, 50%);  /* blue - looks much darker */

/* OKLCH - same lightness, actually looks the same to the eye */
color: oklch(0.75 0.18 90);   /* yellow-ish */
color: oklch(0.75 0.18 260);  /* blue-ish - genuinely similar perceived brightness */

OKLCH unterstützt außerdem Wide-Gamut-Farben (P3-Display-Farben), die über den sRGB-Bereich hinausgehen, auf den HSL beschränkt ist. Die Browser-Unterstützung für oklch() ist 2024 solide: Chrome 111+, Firefox 113+, Safari 15.4+.

Für die meisten Projekte ist HSL derzeit der praktische Mittelweg: lesbar, wartbar, universell unterstützt und eine enorme Verbesserung gegenüber RGB. OKLCH ist die richtige Wahl, wenn du ein Design-System baust, das mathematisch konsistente Kontrastverhältnisse benötigt, oder wenn du Wide-Gamut-Displays gezielt ansprechen möchtest.

Wenn du Farbbeziehungen visuell erkunden möchtest, während du deine Palette aufbaust, ermöglicht das Color-Explorer-Tool das Experimentieren mit HSL-Werten und zeigt in Echtzeit, wie Farbton-Rotationen, Sättigungsänderungen und Helligkeitsanpassungen zusammenwirken.

HSL-Farben ohne Rätselraten auswählen

Unser Color Picker ermöglicht es dir, Farbton, Sättigung und Helligkeit visuell einzustellen und den fertigen HSL-Wert direkt in dein CSS zu kopieren - ganz ohne Kopfrechnen.

Color Picker ausprobieren →