HSL-in-HEX-Konverter

Was die Seite HSL‑zu‑HEX leistet

Die Seite nimmt eine Farbe entgegen, die als HSL‑Tupel formuliert ist – Hue (Farbwinkel in Grad, 0–360), Saturation (Sättigung in Prozent, 0–100 %) und Lightness (Helligkeit in Prozent, 0–100 %) – und gibt den äquivalenten hexadezimalen Farbcode aus. Der HEX‑Code ist die sechsstellige (oder dreistellige Kurzform) Notation, die überall in CSS und in Design‑Werkzeugen verwendet wird, beispielsweise #1E90FF. Sobald der Benutzer einen Wert eingibt oder einen Farbwähler bedient, aktualisiert sich der HEX‑Wert sofort.

Im Unterschied zu allgemeinen Farbkonvertern ist diese Seite ausschließlich auf die Übersetzung HSL → HEX spezialisiert. HSL ist ein Farbmodell, das für das menschliche Verständnis von Farbe entwickelt wurde: Ändert man nur die Helligkeit, bleibt der Farbton (Hue) erhalten – deshalb wird HSL bevorzugt für Paletten‑ und Theme‑Generierung eingesetzt. HEX dagegen ist eine sechsstellige (oder dreistellige Kurzform) RGB‑Notation; sie trägt keinen Alphakanal, es sei denn, man verwendet die achtstellige Form (#RRGGBBAA). Die Konvertierung von HSL nach HEX ist direkt und verlustfrei innerhalb des sRGB‑Gamuts – anders als Umrechnungen über LAB oder CMYK, bei denen außerhalb des Gamuts liegende Farben angepasst werden müssen.

Die Seite zeigt zudem alle anderen Farbfelder (RGB, HSV, CMYK, LAB) gleichzeitig an. Werden ungültige oder falsch formatierte Eingaben gemacht – etwa ein Hue außerhalb 0–360, Sättigung oder Helligkeit ohne Prozentzeichen oder Zahlen über 100 –, erscheint die Fehlermeldung:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“
(Im deutschen Kontext zeigt die Seite die gleiche englische Meldung; das Tool ist international gehalten.) Alle Berechnungen laufen direkt im Browser ab; es wird nichts hochgeladen.

Warum HSL und HEX? – Zwei Farbsysteme im Vergleich

HSL wurde in den 1970er‑Jahren als Alternative zu RGB entwickelt, um Farben intuitiver beschreibbar zu machen. Ein Designer kann sich leichter vorstellen, wie eine Farbe aussieht, wenn er „Hue 200, Sättigung 80 %, Helligkeit 60 %“ hört, als wenn er ein RGB‑Tupel wie (51, 153, 255) interpretieren müsste. Der dreidimensionale HSL‑Raum ist ein Zylinder: Der Farbwinkel (0° = Rot, 120° = Grün, 240° = Blau) bestimmt den Grundton, die Sättigung die Reinheit, die Helligkeit den Anteil von Schwarz oder Weiß.

HEX hingegen ist eine kompakte Schreibweise des sRGB‑Farbraums. Jedes der drei RGB‑Kanäle wird als zwei Hexadezimalziffern von 00 bis FF notiert – das entspricht den Dezimalwerten 0 bis 255. Die dreistellige Kurzform (z. B. #ABC = #AABBCC) ist dann gültig, wenn jedes Kanalpaar aus zwei identischen Ziffern besteht. Die Seite zeigt diese Kurzform an, sobald die Bedingung erfüllt ist.

Die Besonderheit der Seite liegt darin, dass sie genau diese Brücke schlägt: Ein Farbton, der im menschenlesbaren HSL‑System definiert ist, wird automatisch in die maschinenlesbare HEX‑Notation umgerechnet – verlustfrei, ohne Gamut‑Anpassung. Das ist anders als bei Konvertierungen, die über den Lab*‑Farbraum laufen und oft mit Out‑of‑Gamut‑Farben umgehen müssen. Hier nicht: Jeder HSL‑Wert innerhalb der erlaubten Grenzen ergibt einen gültigen sRGB‑Wert und damit eine gültige HEX‑Angabe.

Die konkrete Umrechnung: Von HSL zu RGB zu HEX

Hinter der Seite steckt ein standardisierter Algorithmus. Um die Umrechnung zu verstehen, betrachten wir kurz die mathematischen Schritte, die im Browser ausgeführt werden.

1. HSL normalisieren
   Der Hue‑Wert (0–360) wird auf eine reelle Zahl zwischen 0 und 1 skaliert. Sättigung und Helligkeit werden von Prozent in den Bereich 0..1 umgewandelt.

2. HSL → RGB
   Sei H der skalierte Hue, S die Sättigung und L die Helligkeit. Der Algorithmus unterscheidet, ob eine der Komponenten gleich 0 oder 1 ist – das sind die trivialen Fälle. Sonst wird eine temporäre Variable C = (1 - |2L - 1|) * S berechnet (das Chroma). Dann wird X = C * (1 - |(H mod 2) - 1|) bestimmt. Anschließend wird der passende Bereich festgelegt: Ist H zwischen 0 und 1/6, ergibt sich (C, X, 0); zwischen 1/6 und 1/3 (X, C, 0); usw. Schließlich wird für jeden Kanal der Wert (R', G', B') + (L - C/2) addiert, um den Offset für die Helligkeit auszugleichen. Das Ergebnis sind drei Dezimalzahlen zwischen 0 und 255.

3. RGB → HEX
   Jeder Dezimalwert wird in eine zweistellige Hexadezimalzahl umgewandelt. Beispiel: 79₁₀ → 4F₁₆. Aus den drei Paaren entsteht der sechsstellige Code wie #4F46E5. Falls alle drei Paare aus identischen Ziffern bestehen (z. B. #AABBCC), wird die Kurzform #ABC angeboten.

Die Seite führt diese Berechnung live aus – der Benutzer sieht den HEX‑Code im selben Moment, in dem er den letzten HSL‑Wert eingetippt hat. Die Fehlertoleranz ist bemerkenswert: Felder wie CMYK werden zwar zeitgleich aktualisiert, aber die Seite weist darauf hin, dass es sich um eine on‑screen‑Schätzung handelt, die von professionellen Druckwerten abweichen kann. Das ist keine Einschränkung des Tools, sondern eine Konsequenz der unterschiedlichen Farbräume: CMYK ist geräteabhängig, HEX (bzw. sRGB) ist monitorbezogen.

Grenzfälle und Fehlerbehandlung

Die Seite prüft die Eingabe auf formale Korrektheit. Folgende Situationen führen zur bereits genannten Fehlermeldung:

• Hue ist keine Zahl zwischen 0 und 360 oder liegt außerhalb des Bereichs.
• Sättigung oder Helligkeit sind nicht als Prozentsatz formatiert (fehlendes %‑Zeichen) oder liegen nicht zwischen 0 % und 100 %.
• Es werden nicht genau drei Werte (Hue, Sättigung, Helligkeit) angegeben oder die Syntax weicht ab – etwa ein Komma statt eines Leerzeichens.

In allen diesen Fällen bleibt der HEX‑Ausgabebereich leer oder zeigt die Meldung an. Das Tool erwartet konkrete Eingaben wie 120, 100%, 50% (reines Grün). Wird 120, 100, 50 eingegeben (ohne Prozentzeichen), interpretiert die Seite das nicht als gültig – sie erwartet explizit zwei Prozentangaben.

Ein weiterer Grenzfall betrifft die dreistellige Kurzform: Wenn die RGB‑Kanäle eines HEX‑Codes nicht paarweise identisch sind (z. B. #1E90FF – hier sind R=1E, G=90, B=FF – keine Kanalpaare wie AA, BB, CC), wird nur die sechsstellige Form gezeigt. Die Seite testet das automatisch und schaltet die Kurzform nur zu, wenn sie technisch korrekt ist. Manche Entwickler verwenden die Kurzform aus Platzgründen in CSS, aber viele Browser akzeptieren nur die Langform – die Seite bleibt da konservativ.

Auch außerhalb des sichtbaren Bereichs? Nicht nötig: Jeder HSL‑Wert mit Sättigung und Helligkeit zwischen 0 und 100 ergibt einen gültigen RGB‑Wert. Ein Hue von 0° bis 360° deckt den gesamten Farbkreis ab. Es gibt keine „ungültigen“ HSL‑Farben im sRGB‑Raum – das ist der Grund, warum die Konvertierung ohne Gamut‑Anpassung auskommt.

Wer die Seite braucht – und warum

Vier Hauptzielgruppen profitieren direkt von diesem Tool:

1. Designer, die Farbpaletten in HSL entwickeln (etwa in Figma oder Sketch) und die resultierenden HEX‑Codes für die Implementierung benötigen. Sie können Helligkeit und Sättigung intuitiv anpassen, ohne den Farbton zu verlieren, und sofort den HEX‑Wert für das Styleguide-Dokument kopieren.

2. Front‑End‑Entwickler, die aus Design‑Spezifikationen HSL‑Werte übernehmen und in CSS‑Eigenschaften wie background-color einbauen müssen. HEX ist in Stylesheets nach wie vor die geläufigste Notation – dieser Konverter spart das manuelle Übersetzen.

3. Barrierefreiheits‑Spezialisten, die mit HSL arbeiten, um WCAG‑Kontrastverhältnisse einzuhalten. Durch Anpassen der Lightness kann man die Leuchtdichte einer Farbe gezielt verändern, während der Farbton erhalten bleibt. Aus dem resultierenden HEX‑Code berechnet man dann den Kontrastwert – das Tool liefert die HEX‑Angabe, die für die CSS‑Regel benötigt wird.

4. Entwickler von Theme‑Generatoren oder automatischen Farbsystemen. Wer programmatisch Farbtöne erzeugen will (z. B. alle 30° einen Farbton), kann die HSL‑Werte berechnen und mit dieser Seite schnell in HEX umwandeln, um sie in einer Datenbank zu speichern.

Die Seite vermeidet typische Fallstricke: Manche Konverter bieten nur eine Eingabe als Farbwähler, aber kein HSL‑Textfeld. Hier kann man exakte numerische Werte eingeben – nützlich, wenn ein Design‑System mit festen HSL‑Tokens arbeitet, wie es in Design‑Tokens‑Standards üblich ist.

Grenzen von HEX im Vergleich zu HSL

HEX ist kein direktes Modell für Helligkeit oder Sättigung. Will man eine Farbe aufhellen, muss man in HEX manuell alle drei Kanäle erhöhen – das ändert oft auch den Farbton. In HSL genügt es, die Lightness von 50 % auf 70 % zu setzen. Diese Eigenschaft macht HSL für dynamische Themes und Accessibility‑Anpassungen überlegen.

Ein weiterer Punkt: Sechsstelliges HEX hat keinen Alphakanal. Die Seite gibt nur undurchsichtige Farben aus. Wird ein Alphawert benötigt, muss man entweder die achtstellige HEX‑Form (die das Tool nicht anbietet) oder die CSS‑Funktion rgba() verwenden. Das ist eine bewusste Einschränkung – die Konzentration auf das reine HEX‑Format erlaubt eine klare, verlustfreie Umrechnung.

Schließlich ist HEX geräteabhängig, weil es auf sRGB basiert. HSL ist ebenfalls ein Modell, das in sRGB definiert ist, sodass die Konvertierung keine Überraschungen bringt. Anders sähe es aus, wenn man HSL in den Lab*‑Farbraum umrechnen wollte – dann wären komplizierte Gamut‑Mappings nötig. Die Seite hält sich bewusst an das einfachere, aber ausreichende HSL‑sRGB‑HEX‑Tripel.

Häufig gestellte Fragen (FAQ)

Frage: Warum sehe ich bei manchen Farben die Kurzform #ABC und bei anderen nur die Langform #AABBCC?
Die Kurzform wird nur angezeigt, wenn jeder Kanal aus zwei identischen Hexadezimalziffern besteht, also z. B. #11FF33 → #1F3. Die Seite prüft das automatisch. Ist die Bedingung nicht erfüllt, bleibt es bei der sechsstelligen Version.

Frage: Kann ich auch Werte wie 120°, 50%, 75% mit Gradzeichen eingeben?
Die Seite erwartet den Hue als Zahl ohne Gradsymbol. Eine Eingabe 120°, 50%, 75% würde vermutlich als fehlerhaft zurückgewiesen, da das Gradsymbol kein gültiger Bestandteil der erwarteten Syntax ist. Nur die reine Zahl zwischen 0 und 360 ist korrekt.

Frage: Ist die CMYK‑Ausgabe druckgenau?
Nein. Die Seite selbst warnt, dass es sich um eine On‑Screen‑Schätzung handelt. Professionelle Druckereien verwenden individuelle CMYK‑Profile. Der Wert dient als Orientierung, nicht als Druckanweisung.

Frage: Funktioniert die Seite auch mit negativen Hue‑Werten?
Negative Hue‑Werte sind im HSL‑Modell nicht definiert. Die Seite erwartet 0–360. Ein Wert wie -30 führt zur Fehlermeldung, ebenso wie 400.

Frage: Werden meine eingegebenen Farben an einen Server gesendet?
Nein. Alle Berechnungen finden lokal im Browser statt. Es gibt keine Übertragung – die Seite arbeitet clientseitig.

Frage: Kann ich einen HEX‑Code eingeben und die HSL‑Werte zurückbekommen?
Das Tool ist spezifisch für HSL → HEX. Für die umgekehrte Richtung (HEX → HSL) gibt es auf der gleichen Website eine separate Seite. Dieser Konverter erwartet ausschließlich HSL‑Eingabe.