# HSL-Farben: die freundlichste Art, CSS-Farben zu schreiben [Canonical HTML page](https://gradiently.design/de/guide/hsl-colors) Hex sagt dem Browser, was er malen soll. HSL sagt dir, was die Farbe ist: welcher Farbton, wie kräftig, wie hell. Das macht es zum am leichtesten von Hand bearbeitbaren Format. ## The short version - Eine HSL-Farbe beschreibt eine Farbe über Farbton, Sättigung und Helligkeit statt über Anteile von Rot, Grün und Blau. - Der Farbton ist ein Winkel auf dem Farbkreis von 0 bis 360 Grad, wobei 0 Rot ist, 120 Grün und 240 Blau. - Die Sättigung reicht von 0 % (Grau) bis 100 % (volle Farbe), die Helligkeit von 0 % (Schwarz) über 50 % (der reine Farbton) bis 100 % (Weiß). - Modernes CSS schreibt sie als hsl(262 83% 58%), mit optionalem Alphawert nach einem Schrägstrich, und jeder gängige Browser unterstützt das. - Die HSL-Helligkeit entspricht nicht dem, wie hell Menschen eine Farbe wahrnehmen, daher können zwei Farben mit gleicher Helligkeit im Kontrast stark abweichen. 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](https://gradiently.design/de/guide/color-wheel), 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. Farbton von 0 bis 360 Grad: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)` Jeder Farbton bei 100 % Sättigung und 50 % Helligkeit. Von links nach rechts: 0, 60, 120, 180, 240, 300 und zurück zu 360. 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](https://gradiently.design/de/guide/hue-saturation-brightness) breiter erklärt, wo auch steht, wie sich HSB in Design-Apps von HSL in CSS unterscheidet. | Wert | Bereich | Was eine Änderung bewirkt | | --- | --- | --- | | Farbton | 0 bis 360 (Grad) | Dreht die Farbe: Violett zu Blau zu Petrol | | Sättigung | 0 % bis 100 % | Von Grau bis volle Farbe | | Helligkeit | 0 % bis 100 % | Von Schwarz über den reinen Farbton bei 50 % bis Weiß | | Alpha (optional) | 0 bis 1 oder 0 % bis 100 % | Von unsichtbar bis deckend | Vier Zahlen, jede mit einer Aufgabe. Diese Trennung ist der ganze Reiz. ## 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) listet jede Form auf. ```css .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%); } ``` Alle vier sind dasselbe Violett. Die zweite und dritte Zeile ergänzen 80 % Deckkraft. ## 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](https://gradiently.design/de/guide/tints-tones-shades), die offensichtlich zusammengehören. Hier ein Violett in sieben Stufen, jeweils mit dem Hex-Wert, in den es umgerechnet wird. - L 95% #efe8fd: #efe8fd - L 85% #d0b9f8: #d0b9f8 - L 70% #a273f2: #a273f2 - L 58% #7c3bed: #7c3bed - L 45% #5914d2: #5914d2 - L 30% #3c0d8c: #3c0d8c - L 15% #1e0746: #1e0746 hsl(262 83% L) bei sieben Helligkeitswerten. Helle Stufen für Hintergründe, die Mitte für Buttons, dunkle Stufen für Text. 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](https://gradiently.design/de/guide/css-custom-properties-theming). ```css :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; } ``` Jede Markenfarbe leitet sich aus demselben Farbton ab, die Skala kann also nie aus der Familie fallen. ### 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](https://gradiently.design/de/guide/css-color-mix) 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. - hsl(60 100% 50%): #ffff00 - hsl(120 100% 50%): #00ff00 - hsl(0 100% 50%): #ff0000 - hsl(240 100% 50%): #0000ff Alle vier haben 50 % Helligkeit. Auf Weiß hat das Gelb ein Kontrastverhältnis von etwa 1,07:1, das Blau etwa 8,6:1. 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](https://gradiently.design/de/guide/color-contrast-accessibility). Zweitens werden Verläufe und generierte Paletten, die den Farbton bei fester Helligkeit drehen, heller und dunkler, wenn sie Gelb und Blau durchlaufen. ### HSL eignet sich für - Farben von Hand lesen und bearbeiten - Helle und dunkle Abstufungen eines Farbtons - Schnellen Theme-Wechsel mit Variablen - Eine Farbe für einen gedämpften Zustand entsättigen ### Nimm stattdessen OKLCH für - Skalen, die über verschiedene Farbtöne zusammenpassen - Vorhersehbaren Kontrast aus einem Helligkeitswert - Verläufe, die in der Helligkeit gleichmäßig bleiben - Generierte Paletten für Designsysteme [OKLCH](https://gradiently.design/de/guide/oklch-explained) 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](https://gradiently.design/de/guide/hex-to-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. ## FAQ ### Wofür steht HSL? Für Hue, Saturation und Lightness, also Farbton, Sättigung und Helligkeit. Der Farbton ist der Winkel auf dem Farbkreis, die Sättigung gibt an, wie kräftig die Farbe ist, und die Helligkeit, wie nah sie an Schwarz oder Weiß liegt. ### Wie schreibe ich eine HSL-Farbe in CSS? Nutze hsl(Farbton Sättigung% Helligkeit%), zum Beispiel hsl(262 83% 58%). Transparenz kommt nach einem Schrägstrich: `hsl(262 83% 58% / 0.5)`. ### Braucht man hsla() noch? Nein. hsl() akzeptiert in jedem aktuellen Browser einen Alphawert, hsla() bleibt nur für älteren Code erhalten. ### Was ist der Unterschied zwischen HSL und RGB? RGB sagt, wie viel rotes, grünes und blaues Licht gemischt wird; HSL sagt, welcher Farbton, wie kräftig und wie hell. Beide beschreiben dieselben Farben, aber HSL lässt sich leichter von Hand anpassen. ### Warum sehen zwei HSL-Farben mit gleicher Helligkeit unterschiedlich aus? Die HSL-Helligkeit ignoriert, wie empfindlich Augen für jeden Farbton sind, deshalb wirkt Gelb beim selben Wert viel heller als Blau. OKLCH löst das mit wahrnehmungsbasierter Helligkeit.