Zum Hauptinhalt springen
ToolsByUs

HEX in HSL umwandeln

HEX zu HSL wandelt einen Hex-Farbwert in Farbtion, Sättigung und Helligkeit um. Die drei Kanäle werden auf 0–1 skaliert, dann liefern der größte und der kleinste von ihnen das Ergebnis: Die Helligkeit ist ihre Mitte, die Sättigung ist ihre Entfernung voneinander, und der Farbton ergibt sich daraus, welcher Kanal der größte ist und um wie viel. Das Ergebnis ist exakt und umkehrbar – aber die HSL-Helligkeit ist nicht die Helligkeit, die Ihr Auge meldet, und das zu wissen lohnt sich, bevor Sie darauf etwas aufbauen.

Nur lokal
HEX-Eingabe

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

Wie funktioniert HEX in HSL umwandeln?

HSL ist ein anderes Koordinatensystem für dieselben drei Bytes. Skalieren Sie jeden Kanal auf 0–1, suchen Sie den größten und den kleinsten heraus, und der Rest folgt: Die Helligkeit ist ihre Mitte, das Chroma ist der Abstand zwischen ihnen, und der Farbton ergibt sich daraus, welcher Kanal am größten ist und wie sich die anderen beiden im Verhältnis dazu verhalten.

Woher die Farbtonzahl kommt

Das Rad ist in sechs 60°-Sektoren geteilt, einen pro Primär- und Sekundärfarbe. Ist Rot der größte Kanal, befinden Sie sich im roten Sektor, und die Position darin bestimmt sich daraus, wie weit Grün vor oder hinter Blau liegt. Bei #ff8800: Rot ist das Maximum, Grün ist 0.533, Blau ist 0, also ist der Farbton (0.533 − 0) / 1 × 60 = 32°. Jede Farbtonberechnung, die Sie je gesehen haben, ist genau das – nur kompakter geschrieben.

Sättigung ist relativ, was viele überrascht

Dasselbe Chroma ergibt je nach Helligkeit eine andere Sättigungszahl, weil sich der Nenner ändert: Er lautet chroma / (1 − |2L − 1|). Ein sehr dunkler oder sehr heller Farbwert hat kaum Raum für Chroma, deshalb meldet sich ein kleiner absoluter Abstand zwischen den Kanälen als hohe Sättigung. Deshalb kommt #010200 mit 100% Sättigung zurück – es ist fast schwarz, und innerhalb dessen, was bei dieser Helligkeit möglich ist, ist es so farbig, wie es eben geht.

HSL-Helligkeit ist nicht die empfundene Helligkeit

Das ist die Erkenntnis, die Sie mitnehmen sollten. hsl(60 100% 50%) ist Gelb und hsl(240 100% 50%) ist Blau, und HSL behauptet, beide seien zu 50% hell. Für das Auge ist das eine fast weiß, das andere fast schwarz. Die Formel gewichtet alle drei Kanäle gleich, und das Auge tut das nicht – Grün trägt etwa zehnmal mehr zur empfundenen Helligkeit bei als Blau.

Die praktische Folge: Eine Abstufungsrampe, die man durch Schritte in der HSL-Helligkeit baut, hat Stufen, die ungleichmäßig aussehen, so gleichmäßig die Zahlen auch sind. Und eine Palette, die durch HSL-Farbtöne rotiert, kommt mit manchen Farben grell und anderen unsichtbar daher. Speist der Wert eine Rampe, eine Mischung oder irgendein Urteil über Helligkeit, nehmen Sie OKLCH – es steht in der Ausgabe unten, und jeder aktuelle Browser akzeptiert es in CSS.

Ein Hex-Farbwert

#ff8800

Farbtion, Sättigung, Helligkeit

hsl(32 100% 50%)

max  255 / 255 = 1.000   (red)
min    0 / 255 = 0.000   (blue)
lightness = (1 + 0) / 2 = 50%
chroma    = 1 − 0 = 1.000 → saturation 100%

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

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
Farbton0–360deg0 = rotPosition auf dem Farbkreis. 120 ist grün, 240 ist blau. Die Angabe ist zyklisch, also sind 370 und 10 identisch.
Sättigung0–100%—Farbstärke relativ zum Maximum, das diese Helligkeit zulässt. 0 % ist bei jeder Farbwertigkeit Grau.
Helligkeit0–100%—0 % ist bei jeder Farbwertigkeit Schwarz, 100 % Weiß. 50 % ist der Punkt, an dem eine Farbwertigkeit am gesättigtsten ist.
Alpha0–11Wird in moderner Syntax nach einem Schrägstrich geschrieben: hsl(32 100% 50% / 50%).
hsl() vs hsla()—identischhsl() akzeptiert jetzt einen Alpha-Wert. hsla() ist ein veraltetes Alias und wird nicht als veraltet markiert.
GrauS = 0—Ohne Sättigung ist die Farbwertigkeit willkürlich und enthält keine Information. Sie wird hier als 0 und nicht als Rauschen angegeben.
Hin und zurückexakt—Ein Konvertierungsvorgang von Hex nach HSL und zurück ergibt die gleiche Farbe. Die Formel ist eine Koordinatentransformation, keine Näherung.
OKLCHAlternative—Gleiches Prinzip – ein Farbwinkel, eine Farbstärke und eine Helligkeit – aber mit einer Helligkeitsachse, der das Auge entspricht.

Häufig gestellte Fragen

Wie rechne ich Hex von Hand in HSL um?

Wandeln Sie den Hex-Wert in drei Kanäle von 0–255 um, teilen Sie jeden durch 255 und suchen Sie den größten und den kleinsten Wert heraus. Die Helligkeit ist (max + min) / 2. Das Chroma ist max − min; ist es null, ist die Farbe grau, und Sie sind fertig. Andernfalls ist die Sättigung chroma / (1 − |2L − 1|), und der Farbton ergibt sich daraus, welcher Kanal am größten war: Rot liefert ((G − B) / chroma) × 60, Grün ((B − R) / chroma + 2) × 60, Blau ((R − G) / chroma + 4) × 60.

Warum zeigt ein fast schwarzer Farbwert 100% Sättigung?

Weil die HSL-Sättigung relativ zum maximalen Chroma ist, das bei dieser Helligkeit verfügbar ist, und nicht absolut. Bei 1% Helligkeit bleibt für Chroma fast kein Raum, also ist ein winziger Unterschied zwischen den Kanälen so farbig, wie diese Helligkeit überhaupt erlaubt – und meldet sich als 100%. Es verhält sich korrekt; es misst nur etwas anderes, als die meisten erwarten.

Ist die HSL-Helligkeit dasselbe wie die empfundene Helligkeit?

Nein, und genau das ist die Falle. HSL gewichtet die drei Kanäle gleich, während das Auge Grün weit stärker gewichtet als Blau. hsl(60 100% 50%) und hsl(240 100% 50%) geben dieselbe Helligkeit an; das eine ist ein blendendes Gelb, das andere fast schwarz. Für alles, was von der empfundenen Helligkeit abhängt – eine Abstufungsskala, eine Kontrastentscheidung, eine Mischung – liefert OKLCH die richtige Antwort, wo HSL eine plausibel klingende falsche liefert.

Soll ich in CSS HSL verwenden?

Für das, was es gut kann, durchaus: einen Farbton leicht verschieben, etwas entsättigen oder einen Farbwert notieren, den man auf einen Blick erfassen kann. Das falsche Werkzeug ist es für das Erzeugen einer Skala oder das Interpolieren zwischen zwei Farben, denn seine Helligkeitsachse ist nicht perzeptiv. Für diese Aufgaben sollten Sie oklch() nehmen, was jeder aktuelle Browser unterstützt.

Geht beim Umwandeln von Hex in HSL Genauigkeit verloren?

Die Umwandlung selbst ist exakt – sie ist nur ein Koordinatenwechsel derselben drei Bytes. Genauigkeit verliert die Ausgabe: Ein auf ganze Grad gerundeter Farbton und eine auf ein Zehntel Prozent gerundete Sättigung rechnen nicht immer in denselben Hex-Wert zurück. Die Werte hier werden mit ausreichender Genauigkeit ausgegeben, um den Rundtrip zu überstehen; wenn Sie einen garantiert exakten Rundtrip brauchen, behalten Sie den Hex-Wert.

Wie mache ich eine Farbe heller oder dunkler, ohne den Farbton zu verschieben?

Wandeln Sie sie in HSL um und bewegen Sie allein die Helligkeit. Farbton und Sättigung festzuhalten, während die Helligkeit in Stufen steigt – 50%, 60%, 70% –, erzeugt eine Abstufung, die weiterhin wie eine einzige Farbe wirkt. Das kann das manuelle Anpassen eines Hex-Werts nicht: Addiert man zu allen drei Kanälen denselben Betrag, ändert das neben der Helligkeit auch den Farbton.

ToolsByUs-Team · Wie wir unsere Tools prüfen