HSL-zu-HEX-Konverter

Eine Farbe, fünf Schreibweisen

In CSS haben sich mehrere Wege angesammelt, dieselbe HSL-Farbe zu notieren. Die ursprüngliche CSS3-Form trennt die Bestandteile mit Kommas; CSS Color 4 hat eine Form mit Leerzeichen eingeführt und Alpha hinter einen Schrägstrich verschoben. Der Farbton nimmt eine schlichte Zahl oder eine ausdrückliche Winkeleinheit, und Werte über 360 laufen einfach um den Farbkreis herum. Jede Zeile unten erzeugt exakt dasselbe Pixel:

Dieser Konverter schluckt sie alle – du kannst also einfügen, was dir ein Stylesheet, ein Code-Review oder ein altes Tutorial liefert, ohne vorher umzuformatieren.

Winkeleinheiten für den Farbton: deg, grad, rad und turn

Eine nackte Farbtonzahl bedeutet Grad, doch CSS erlaubt vier Winkeleinheiten, und in generiertem Code tauchen sie gelegentlich auf. 1turn ist eine volle Umdrehung, 0.25turn entspricht also 90°; 200grad entspricht 180°; und ein Radiant sind rund 57,296°, weshalb 3.1416rad praktisch genau auf 180° landet. Sättigung und Helligkeit sind dagegen schlichte Prozentwerte ihrer Achsen – dort gibt es keine Einheit zu wählen.

Echter Code liefert die exotischen Einheiten häufiger, als man erwartet. Math.atan2 aus JavaScript – der Standardweg, um aus einem Punkt auf dem Farbkreis einen Farbton abzuleiten – gibt Radiant zurück; Präprozessor-Schleifen, die einen Kreis in n Farbfelder zerlegen, geben gern Bruchteile einer Umdrehung aus. Welche Einheit auch ankommt: Die sechs Hex-Ziffern, die herauskommen, sind dieselben.

Rechenbeispiel: hsl(220, 60%, 49%) zu #3264c8

Die Umrechnung führt über die Buntheit. Zuerst C = (1 − |2L − 1|) × S = (1 − 0,02) × 0,6 = 0,588 – so weit übertrifft der stärkste Kanal den schwächsten. Der Farbton geteilt durch 60 ergibt 3,667 und setzt 220° damit in das Band von 180° bis 240°, in dem das Kanalmuster (0, X, C) gilt: Rot bekommt nichts dazu, Blau die volle Buntheit und Grün den Zwischenwert X = C × (1 − |3,667 mod 2 − 1|) = 0,588 × 0,333 = 0,196.

Anschließend wird jeder Kanal um m = L − C ÷ 2 = 0,49 − 0,294 = 0,196 angehoben, damit die Helligkeit stimmt. Auf Bytes skaliert: Rot (0 + 0,196) × 255 = 49,98 rundet auf 50, Grün (0,196 + 0,196) × 255 = 99,96 rundet auf 100, und Blau (0,588 + 0,196) × 255 = 199,92 rundet auf 200. Hexadezimal lauten diese Bytes 32, 64 und c8 – der fertige Code ist also #3264c8.

Der Farbton läuft bei 360° um

Weil der Farbton ein Winkel ist, kennt er weder Ober- noch Untergrenze: 360° zeigt in dieselbe Richtung wie 0°, hsl(380 60% 49%) entspricht hsl(20 60% 49%), und ein negativer Farbton zählt rückwärts – −40° bedeutet also 320°. Praktisch wird das, sobald Farbtöne aus Rechnungen stammen: Eine JavaScript-Schleife, die den Farbton pro Durchlauf um +37 erhöht, oder ein Theme, das einen Ausgangsfarbton um −120 dreht, erzeugt bereitwillig Werte wie 613 oder −83. Kaputt geht dabei nichts: Normalisiere mit Modulo 360, oder überlass das Umlaufen CSS und diesem Konverter.

HSL aus Design-Tools kopieren: die Stolperfallen

• HSB ist nicht HSL. Die Farbwähler in Figma und Photoshop zeigen HSB (auch HSV genannt), dessen B für Brightness steht. Reines Rot ist HSB 0, 100, 100, aber hsl(0, 100%, 50%) – kippst du HSB-Zahlen in hsl(), bekommst du einen ausgewaschenen Hochstapler.
• Gerundete Anzeigen driften. Tools runden Farbton, Sättigung und Helligkeit für die Anzeige auf ganze Zahlen – der HEX-Wert, den du daraus zurückrechnest, kann deshalb pro Kanal um einen Punkt vom Original abweichen.
• Behalte die Prozentzeichen. In der Komma-Syntax ist hsl(220, 60, 49) keine gültige CSS-Farbe – Sättigung und Helligkeit brauchen zwingend das %.
• Entferne das Gradzeichen. Manche Tools schreiben 220° samt °-Zeichen; CSS will 220 oder 220deg, nie das Zeichen selbst.
• Achte auf verstecktes Alpha. Eine Ebene mit 80 % Deckkraft exportiert einen Alphawert, der hinter den Schrägstrich gehört und nicht in die Helligkeit eingerechnet wird.

Sonderfälle: Grautöne, Schwarz und Weiß

Liegt die Sättigung bei 0 %, tut der Farbton überhaupt nichts – hsl(137, 0%, 49%) ist das Grau #7d7d7d, und statt 137 kannst du jeden beliebigen Winkel einsetzen, ohne dass sich etwas ändert. Ebenso ergibt 0 % Helligkeit #000000 und 100 % Helligkeit #ffffff, ganz gleich, welchen Farbton oder welche Sättigung du verlangst. Genau deshalb meldet die Rückrechnung eines Graus nach HSL den Farbton 0: Der Winkel war nie Teil der Information. Alpha übersteht den Weg nach HEX als viertes Paar, hsl(220 60% 49% / 0.8) wird also zu #3264c8cc – 0,8 × 255 rundet auf 204, hexadezimal cc.

Die gesamte Umrechnung passiert lokal in deinem Browser – nichts, was du eingibst, wird irgendwohin gesendet. Für die Gegenrichtung zerlegt der HEX-zu-HSL-Konverter jeden Code wieder in Winkel und Prozentwerte, und der universelle Farbkonverter gibt dieselbe Eingabe auf einen Schlag in Lab, LCH, OKLCH und CMYK aus.