HEX in HSL umrechnen

Was die drei HSL-Zahlen beschreiben

HSL ordnet jede sRGB-Farbe in einem Zylinder an. Der Farbton ist der Winkel darum herum: 0° liegt bei Rot, dann folgen 60° Gelb, 120° Grün, 180° Cyan, 240° Blau und 300° Magenta, bei 360° ist man wieder bei Rot. Die Sättigung ist der Abstand vom grauen Kern – 0 % ist farblos, 100 % so kräftig, wie sRGB es zulässt. Die Helligkeit ist die Höhe: 0 % ist immer Schwarz, 100 % immer Weiß, und die intensivste Fassung eines Farbtons liegt bei 50 %.

Dabei geht keine Farbe verloren und es kommt keine hinzu. HSL ist nur ein anderes Koordinatensystem über derselben Menge an Farben, die ein HEX-Code ausdrücken kann – gewählt, weil Winkel und Prozentwerte dazu passen, wie Menschen über Farbe sprechen: „wärmer“, „ausgewaschen“, „etwas dunkler“.

Warum Designer HSL statt der RGB-Kanäle anpassen

Angenommen, dein Markenblau ist #3564c4 und du brauchst eine Variante für den gedrückten Zustand. In RGB abzudunkeln heißt, drei voneinander abhängige Zahlen im exakt richtigen Verhältnis zu skalieren – verschätzt du dich bei einem Kanal, driftet der Farbton selbst ins Violette oder Türkise. In HSL ist dieselbe Änderung ein einziger Regler: Farbton und Sättigung bleiben unangetastet, und du ziehst die Helligkeit um ein paar Punkte nach unten.

• Hover- und Klickzustände – die Helligkeit um 8–12 Punkte nach oben oder unten schieben, während der Farbton fixiert bleibt.
• Deaktivierte und gedämpfte Varianten – die Sättigung reduzieren, statt Grau darüberzulegen; das hält die UI-Familie stimmig.
• Aufhellungs- und Abdunkelungsskalen – Farbton und Sättigung konstant halten und die Helligkeit für eine 50–900-Palette von etwa 95 % auf 15 % herunterstufen.
• Theming – den Farbton als eine einzige CSS-Custom-Property bereitstellen und daraus einen kompletten Akzentbereich ableiten.

Rechenbeispiel: #3564c4 von Hand

Die Paare von #3564c4 ergeben Rot 53, Grün 100, Blau 196. Von dort braucht der Algorithmus den größten Kanal (196), den kleinsten (53) und deren Differenz, 196 − 53 = 143.

• Die Helligkeit ist der Mittelwert aus Maximum und Minimum: (196 + 53) ÷ 2 = 124,5, und 124,5 ÷ 255 ≈ 48,8 % – nennen wir es 49 %.
• Die Sättigung (bei einer Helligkeit unter 50 %) teilt die Differenz durch Maximum + Minimum: 143 ÷ 249 ≈ 0,574, also 57 %.
• Der Farbton ergibt sich, da Blau der größte Kanal ist, aus 60 × (4 + (53 − 100) ÷ 143) = 60 × 3,671 ≈ 220,3°, gerundet 220°.

Ergebnis: hsl(220, 57%, 49%) – ein Blau, dessen Winkel bestätigt, was das Farbfeld zeigt: nur zwanzig Grad vor dem reinen Blau bei 240°.

Häufige HEX-Codes als HSL

Die Farbtöne in der Tabelle sind auf ganze Grad gerundet – Orange etwa ergibt exakt 38,8°. Voll gesättigte Webfarben landen meist auf glatten Winkeln, und genau das macht HSL so angenehm, wenn man Beziehungen zwischen Farbnuancen mit bloßem Auge abschätzen will.

HSL-Werte flüssig lesen

Mit etwas Übung liest sich ein HSL-Tripel auch ohne Vorschau. Der Farbton benennt sich in groben 30-Grad-Schritten quasi selbst – alles um 220 ist ein Anzugblau, 10 geht Richtung Tomate, 160 landet bei Minzgrün. Die Sättigung verrät dann, wie laut die Farbe auftritt, und die Helligkeit deutet an, was darauf liegen kann: unterhalb von rund 45 % trägt meist weiße Schrift, oberhalb von 60 % dunkle. Sag den Wert einmal voraus, bevor du den Code einfügst – das Live-Farbfeld benotet deine Intuition sofort, und die Übung zahlt sich in jedem Stylesheet aus, das du später prüfst.

Der ehrliche Vorbehalt: HSL-Helligkeit ist nicht die Helligkeit des Auges

HSL behandelt alle Farbtöne als gleichwertig – menschliche Augen tun das schlicht nicht. hsl(60, 100%, 50%) (Gelb) und hsl(240, 100%, 50%) (Blau) haben identische 50 % Helligkeit, doch ihre gemessene relative Leuchtdichte liegt bei etwa 0,93 gegenüber 0,07 – das Gelb blendet, während das Blau fast so dunkel ist wie Text. Daraus folgen zwei Dinge für die Praxis: Beurteile die Lesbarkeit von Text niemals anhand von HSL-Zahlen, und rechne damit, dass Palettenstufen mit gleichen Helligkeitsschritten über die Farbtöne hinweg ungleichmäßig wirken.

Die moderne Lösung heißt OKLCH: Dessen Helligkeitsachse ist wahrnehmungsgetreu gleichabständig – dasselbe Gelb kommt dort auf rund 0,97, das Blau nur auf 0,45, und genau so siehst du es auch. Die Formatliste unter diesem Konverter zeigt den OKLCH-Wert bereits an, und der eigene HEX-zu-OKLCH-Konverter geht tiefer, sobald du barrierefreie Farbskalen aufbaust.

Hin- und Rückrechnen: die Rundungsdrift

Beim Zurückrechnen rächt sich ganzzahliges HSL. Die exakten Koordinaten von #3564c4 lauten hsl(220.28°, 57.4%, 48.8%); auf hsl(220, 57%, 49%) gerundet und erneut umgerechnet, erhältst du #3665c4 – Rot und Grün jeweils um eins daneben. Im Farbfeld ist dieser Unterschied unsichtbar, für Snapshot-Tests, Canvas-Vergleiche und Marken-Compliance-Prüfungen dagegen sehr real. Behandle den HEX-Code als maßgebliche Quelle und leite HSL daraus ab – oder behalte eine Nachkommastelle, wenn du HSL speichern musst.

Die Berechnungen auf dieser Seite laufen direkt im Browser; keine Farbe, die du eingibst, wird je an einen Server gesendet. Sobald du dich auf ein Helligkeitspaar für Text und Hintergrund festgelegt hast, prüfe es im Kontrast-Checker und bestätige das WCAG-Kontrastverhältnis, bevor es live geht.