Zum Hauptinhalt springen
ToolsByUs

HSL in HEX umwandeln

HSL zu HEX macht aus einem Farbtonwinkel, einer Sättigung und einer Helligkeit einen Hex-Farbwert. Sättigung und Helligkeit bestimmen, wie weit die Farbe aus dem Grau heraustritt; der Farbtonwinkel entscheidet, in welchen 60°-Sektor des Rades sie fällt und damit, welcher Kanal der größte ist. Die drei Kanäle kommen als Werte von 0–255 heraus, und jeder wird zu zwei Hex-Ziffern.

Nur lokal
HSL-Eingabe

Links eine Farbe eingeben. Akzeptiert werden Hexwerte mit oder ohne Raute, rgb(), hsl(), oklch() und CSS-Farbnamen.

Wie funktioniert HSL in HEX umwandeln?

Die Umwandlung läuft in drei Schritten. Das Chroma – wie weit die Farbe vom Grau entfernt ist – ergibt sich aus Sättigung und Helligkeit zusammen: (1 − |2L − 1|) × S. Genau dieser Faktor lässt das Chroma an beiden Enden schrumpfen, denn eine Farbe bei 5% oder 95% Helligkeit hat kaum Raum, um farbig zu sein.

Der Sektor entscheidet, welcher Kanal gewinnt

Teilen Sie den Farbton durch 60, landen Sie in einem von sechs Sektoren. Jeder Sektor hat ein festes Muster: ein Kanal bei vollem Chroma, einer bei null und einer, der zwischen ihnen ansteigt, je nachdem, wie weit Sie im Sektor fortgeschritten sind. Bei 32° sind Sie knapp über der Hälfte des Weges von Rot Richtung Gelb, also ist Rot bei vollem Chroma, Grün bei 0.53 davon und Blau bei null – das ist das Orange oben auf dieser Seite.

Dann verschiebt die Helligkeit das Ganze

Die drei Werte beschreiben bis hierher die Farbe in ihrer gesättigtesten Form. Addiert man zu jedem L − chroma / 2, wandert der Satz nach oben oder unten auf die verlangte Helligkeit, ohne dass sich die Abstände zwischen ihnen ändern – genau das hält den Farbton konstant, während sich die Helligkeit ändert.

Warum man nicht von jedem HSL zu jedem Hex-Wert kommt

Doch, das geht: HSL und sRGB beschreiben exakt dieselbe Menge von Farben, und die Abbildung ist eine Bijektion. Was nicht geht, ist der Rückweg zu denselben HSL-Zahlen nach einem Rundtrip, denn Hex hat 16.7 Millionen Werte, während HSL in der üblichen Schreibweise – ganzzahliger Farbton, ein Zehntel Prozent genau – weniger hat. Zwei nahe beieinanderliegende HSL-Werte können auf denselben Hex-Wert runden, und die Rückrechnung dieses Hex-Werts liefert denjenigen der beiden, den die Formel eben hervorbringt. Wenn es auf Exaktheit ankommt, behalten Sie den Hex-Wert.

Eine Warnung, wenn Sie auf diese Weise Skalen bauen

Ein sehr verbreitetes Muster: eine Markenfarbe nehmen, sie in HSL umwandeln und eine Palette erzeugen, indem man die Helligkeit von 95% bis 10% abstuft. Das liefert gleichmäßige Zahlen und ungleichmäßige Farben: Die HSL-Helligkeit gewichtet alle drei Kanäle gleich, und das Auge tut das nicht, deshalb wirken die Gelbtöne in der Rampe deutlich heller als die Blautöne bei derselben Zahl. Wenn genau das Ihr Vorhaben ist, erzeugen Sie die Skala stattdessen in OKLCh – genau das macht der Picker auf dieser Website, und die Stufen sehen am Ende so gleichmäßig aus, wie sie messen.

Farbtion, Sättigung, Helligkeit

hsl(32 100% 50%)

Der Hex-Farbwert

#ff8800

chroma      = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000
sector      = 32 / 60 = 0.53   (red → yellow)
channels    = 1.000, 0.533, 0.000
→ 255, 136, 0  →  ff 88 00

Welche Optionen und Sonderfälle unterstützt HSL in HEX umwandeln?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
hsl(32 100% 50%)modernLeerzeichenDie aktuelle CSS-Syntax. Die Hue-Einheit ist optional; 32 und 32deg sind identisch.
hsl(32, 100%, 50%)klassischKommasÜberall weiterhin gültig. Nicht veraltet und kein Grund, es umzuschreiben.
hsla(…)Alias—Die gleiche Funktion wie hsl(), die nun direkt Alpha akzeptiert.
FarbtonBeliebige Zahlmodulo 360370 ist 10, und −30 ist 330. Der Winkel ist modular, also sind außerhalb des gültigen Bereichs liegende Werte gültig und keine Fehler.
Sättigung 0%—grauErzeugt ein Grau in der angegebenen Helligkeit, unabhängig vom eingestellten Hue.
Helligkeit 0% / 100%—schwarz / weißBeide komprimieren jeden Hue und Saturation auf dieselbe Farbe.
Alpha0–1 or %1Wird als viertes Hex-Paar angehängt. 0.5 wird zu 80.
Außerhalb des Bereichs—begrenztSättigung und Helligkeit werden auf 0–100 begrenzt statt abgelehnt, wie es CSS tut.

Häufig gestellte Fragen

Wie rechne ich HSL von Hand in Hex um?

Berechnen Sie das Chroma als (1 − |2L − 1|) × S, wobei L und S Bruchteile sind. Teilen Sie den Farbton durch 60, um den Sektor zu finden, und berechnen Sie den mittleren Kanal als chroma × (1 − |(hue/60 mod 2) − 1|). Weisen Sie Chroma, diesen mittleren Wert und null je nach Sektor Rot, Grün und Blau zu, addieren Sie zu allen dreien L − chroma/2, multiplizieren Sie mit 255 und schreiben Sie jeden Wert als zwei Hex-Ziffern.

Liefert hsl(32 100% 50%) immer denselben Hex-Wert?

Ja. Die Umwandlung ist deterministisch und überall dieselbe, in jedem Browser und Tool; hsl(32 100% 50%) ist überall #ff8800. Nicht garantiert ist der Rückweg – die Rückrechnung von #ff8800 kann je nach Rundung des Tools einen Farbton von 31.9 ergeben, denn Hex hält mehr unterschiedliche Werte bereit als ein ganzzahliger Farbton.

Warum scheint sich beim Ändern der Helligkeit in HSL auch der Farbton zu ändern?

Die Farbtonzahl ändert sich nicht, wohl aber das Bild, denn die Helligkeitsachse von HSL ist nicht perzeptiv. Bei einem Blau wirkt der Schritt von 50% auf 70% Helligkeit wie eine viel kleinere Änderung als derselbe Schritt bei einem Gelb; eine Gruppe von Farben mit derselben Helligkeitszahl sieht daher nicht so aus, als hätte sie dieselbe Helligkeit. In OKLCh gearbeitet verschwindet der Effekt vollständig.

Wie baut man aus einem HSL-Wert eine gute Farbskala?

Nicht, indem man die HSL-Helligkeit abstuft – der übliche Rat, der sichtbar ungleiche Stufen liefert. Wandeln Sie in OKLCh um, stufen Sie deren Helligkeit entlang einer Kurve ab, halten Sie den Farbton fest und lassen Sie das Chroma an beiden Enden auslaufen, damit die hellen Stufen nicht fluoreszieren und die dunklen nicht glühen. Der Color-Picker auf dieser Website macht genau das und liefert Ihnen die elf Werte samt CSS-Variablen.

Darf ich einen Farbton über 360 oder unter 0 schreiben?

Ja, und CSS akzeptiert das. Der Farbtonwinkel ist modular: 370deg ist 10deg, und −30deg ist 330deg. Das ist in einer Animation oder einer erzeugten Palette wirklich nützlich, wo ein Winkel hochgezählt wird und man den Umbruch nicht selbst schreiben will.

Warum liefert mir ein anderer Konverter einen um eine Ziffer abweichenden Hex-Wert?

Rundung. HSL ist kontinuierlich, und jeder Hex-Kanal hat nur 256 Stufen; ein Kanal, der bei 127.5 landet, muss sich für die eine oder andere Seite entscheiden. Dieser Konverter rundet zur nächsten Stufe, ein Tool, das abschneidet, landet eine Stufe tiefer. Die beiden Farben sind auf dem Bildschirm ununterscheidbar – der Abstand beträgt 1/255 eines Kanals –, aber es sind nicht dieselben Zeichenketten.

ToolsByUs-Team · Wie wir unsere Tools prüfen