HSL-Farben: die freundlichste Art, CSS-Farben zu schreiben

Eine HSL-Farbe wird mit drei Zahlen geschrieben: Farbton, Sättigung und Helligkeit. In CSS bedeutet hsl(262 83% 58%) einen Farbton von 262 Grad (Violett), 83 % Sättigung (kräftig) und 58 % Helligkeit (etwas über der Mitte). Es ist dasselbe Violett wie #7c3bed, aber du kannst es lesen. Heller? Erhöhe die letzte Zahl. Weicher? Senke die mittlere. Genau diese Eigenschaft, eine Bedeutung pro Zahl, macht HSL zur freundlichsten Art, Farben von Hand zu schreiben.

Was Farbton, Sättigung und Helligkeit bedeuten

Der Farbton ist eine Position auf dem Farbkreis, angegeben in Grad. Rot liegt bei 0 und wieder bei 360, Gelb bei 60, Grün bei 120, Cyan bei 180, Blau bei 240 und Magenta bei 300. Den Farbton zu verschieben dreht die Farbe weiter, ihre Stärke bleibt.

Die Sättigung gibt an, wie viel Farbe da ist. Bei 0 % ist jeder Farbton dasselbe Grau, bei 100 % so kräftig, wie der Bildschirm es erlaubt. Die Helligkeit reicht von Schwarz bei 0 % bis Weiß bei 100 %, mit dem reinen Farbton bei 50 %. Das Modell wird in Farbton, Sättigung und Helligkeit breiter erklärt, wo auch steht, wie sich HSB in Design-Apps von HSL in CSS unterscheidet.

HSL-Syntax in CSS

Es gibt zwei Schreibweisen. Die moderne trennt Werte mit Leerzeichen und setzt Alpha nach einen Schrägstrich. Die ältere nutzt Kommas und eine eigene Funktion hsla(). Browser akzeptieren beide, und hsl() nimmt inzwischen auch Alpha, hsla() wird also nicht mehr gebraucht. Die MDN-Referenz zu hsl() listet jede Form auf.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Eine Farbskala über die Helligkeit bauen

Hier verdient sich HSL seinen Platz. Halte Farbton und Sättigung fest, verändere die Helligkeit in Stufen, und du hast eine Familie von hellen und dunklen Abstufungen, die offensichtlich zusammengehören. Hier ein Violett in sieben Stufen, jeweils mit dem Hex-Wert, in den es umgerechnet wird.

Kombiniere das mit CSS Custom Properties, und dein ganzes Theme hängt an zwei Zahlen. Speichere Farbton und Sättigung einmal und wähle dann pro Rolle eine Helligkeit. Ändere die Farbton-Variable, und die gesamte Oberfläche wechselt von Violett zu Petrol, genau die Idee hinter CSS-Variablen fürs Theming.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Relative Farben

Neuere Browser unterstützen außerdem die relative Farbsyntax, die die HSL-Anteile jeder Farbe ausliest und sie anpassbar macht. hsl(from var(--brand) h s calc(l + 15%)) ergibt eine hellere Version der Markenfarbe, egal welche es ist, selbst wenn sie in Hex definiert wurde. Prüfe die aktuelle Unterstützung auf caniuse, bevor du dich darauf verlässt, und halte einen einfachen Fallback bereit. Um zwei Farben zu mischen statt eine anzupassen, ist color-mix() in CSS das Werkzeug.

Wo HSL dich täuscht

HSL ist eine Umordnung von RGB, kein Modell des menschlichen Sehens. Seine Helligkeit ist ein einfacher Mittelwert aus dem hellsten und dem dunkelsten Kanal und ignoriert damit, dass unsere Augen Gelb und Grün viel heller sehen als Blau. Das Ergebnis: Zwei Farben mit identischer HSL-Helligkeit können in der wahrgenommenen Helligkeit völlig verschieden aussehen.

Das zählt an zwei Stellen. Erstens wird eine Skala, die über die HSL-Helligkeit gebaut ist, über verschiedene Farbtöne hinweg ungleichmäßig: Ein Gelb bei 50 % ist viel zu hell für Text, während ein Blau bei 50 % locker besteht. Teste echte Paare immer mit einem Kontrastprüfer. Zweitens werden Verläufe und generierte Paletten, die den Farbton bei fester Helligkeit drehen, heller und dunkler, wenn sie Gelb und Blau durchlaufen.

OKLCH behält dieselbe freundliche Idee (Helligkeit, Buntheit, Farbton), misst die Helligkeit aber so, wie Augen sie sehen. Wenn du ein neues Designsystem beginnst, ist es der bessere Standard; wenn du bestehendes CSS bearbeitest oder eine schnelle, lesbare Anpassung willst, bleibt HSL völlig in Ordnung.

HSL in Hex umrechnen und zurück

Die Mathematik brauchst du selten, denn jedes Design-Tool und jedes Devtools-Panel im Browser rechnet für dich um: Klick in den Devtools von Chrome oder Firefox auf ein Farbfeld und schalte durch die Formate. Intern wird HSL zuerst in RGB umgerechnet, und RGB in Hex ist einfache Paar-Arithmetik, erklärt in Hex in RGB. Rechne mit winzigen Rundungsunterschieden: hsl(262 83% 58%) landet bei #7c3bed, einen Schritt neben dem #7c3aed, mit dem du vielleicht angefangen hast, weil ganze Prozentwerte nicht jeden der 16,7 Millionen Hex-Werte treffen können.

Wenn du in Gradiently gestaltest, fasst du diese Zahlen kaum an: Ein Mark bringt seine eigene Palette mit, und mit Pro speichert das Markenkit deine Farben, damit der Designer sie für dich anwendet.