Der Konverter akzeptiert alle Hex-Formen aus CSS: das 6-stellige Format #3366cc, die 3-stellige Kurzform #36c sowie die 4- und 8-stelligen Formen mit Alphakanal, mit oder ohne #. Er zeigt den hsl()- oder hsla()-String, die einzelnen Werte und eine Aufschlüsselung pro Komponente - dazu eine umgekehrte HSL-zu-HEX-Zeile, wenn es andersherum gehen soll. Alles läuft im Browser - kein Upload, kein Konto, keine Limits.
HEX in HSL umrechnen
Läuft komplett in deinem Browser - kein Upload, keine Anmeldung.
CSS
hsl(220, 60%, 50%)So wird umgerechnet
Farbton220
Sättigung60%
Helligkeit50%
Andersherum? HSL zu HEX
#3366ccWie rechnet man HEX in HSL um?
Zuerst wird der Hex-Code als Rot, Grün und Blau (0-255) gelesen, dann dieselbe Farbe als Farbton, Sättigung und Helligkeit ausgedrückt. Der Farbton ist der Winkel auf dem Farbkreis (0-360), die Sättigung zeigt, wie kräftig die Farbe wirkt (0-100 %), und die Helligkeit, wie hell sie ist (0-100 %). Aus #3366cc wird hsl(220, 60%, 50%). Dieser Konverter macht das sofort beim Tippen.
So funktioniert’s
- 1Hex-Code eingeben. Eine Hex-Farbe wie #3366cc (oder #36c) eintippen oder einfügen, oder eine mit dem Farbwähler auswählen. Die # ist optional.
- 2HSL-Wert ablesen. Der hsl()-String, die reinen Werte und eine Live-Farbvorschau aktualisieren sich beim Tippen, mit einer Aufschlüsselung pro Komponente für Farbton, Sättigung und Helligkeit.
- 3Gewünschtes Format kopieren. Auf Kopieren neben dem hsl()-String oder den Rohwerten klicken. Andersherum? Farbton, Sättigung und Helligkeit unten eingeben, um den Hex-Code zurückzubekommen.
Für wen
- Frontend-Entwickler, die einen Hex-Code in hsl() umwandeln, um für Hover- und Fokuszustände nur die Helligkeit anzupassen, statt eine ganz neue Farbe zu suchen.
- Designer, die Paletten aufbauen, indem sie den Farbton festhalten und Sättigung sowie Helligkeit schrittweise ändern, um aus einer Markenfarbe Auf- und Abtöne zu erzeugen.
- Wer Themes und Design-Tokens pflegt und Farben als HSL speichert, weil es sich von Hand deutlich leichter lesen und anpassen lässt als ein Hex-String.
- Alle, die Farben zwischen Tools angleichen, von denen eines Hex will (Figma, die meisten CSS-Fälle) und ein anderes HSL erwartet (SCSS-Helfer, manche Farbsysteme).
Häufige Fragen
Ist dieser HEX-zu-HSL-Konverter kostenlos?
Ja - er ist 100 % kostenlos, ohne Anmeldung und ohne Limits. Er läuft komplett im Browser.
Werden meine Farben irgendwohin hochgeladen?
Nein. Die Umrechnung ist reines JavaScript, das auf dem eigenen Gerät läuft - es wird nichts an einen Server gesendet, und der Konverter funktioniert nach dem Laden der Seite auch offline weiter.
Was ist HSL?
HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Der Farbton ist ein Winkel von 0 bis 360 Grad auf dem Farbkreis, die Sättigung reicht von 0 bis 100 Prozent je nach Kräftigkeit der Farbe, und die Helligkeit reicht von 0 Prozent (Schwarz) über die reine Farbe bei 50 Prozent bis 100 Prozent (Weiß).
Wie rechnet man Hex von Hand in HSL um?
Den Hex-Wert in Rot, Grün und Blau umrechnen und jeden Wert durch 255 teilen. Maximum und Minimum der drei Werte bestimmen: Die Helligkeit ist ihr Mittelwert, die Sättigung ergibt sich aus (Maximum - Minimum) geteilt durch (1 - |2L - 1|), und der Farbton hängt davon ab, welcher Kanal das Maximum ist, skaliert auf 0 bis 360 Grad.
Unterstützt er die 3-stellige Kurzform wie #36c?
Ja. In der CSS-Kurzform wird jede Ziffer verdoppelt, aus #36c wird also #3366cc, was zu hsl(220, 60%, 50%) wird. Die 4-stellige Form funktioniert genauso, mit der letzten Ziffer als Alpha.
Wie geht er mit Transparenz um (HSLA)?
Ein 8-stelliger Hex-Code trägt Alpha im letzten Ziffernpaar. Dieses Byte (0-255) wird durch 255 geteilt, um den Alphawert von 0 bis 1 zu erhalten, den hsla() erwartet, gerundet auf drei Nachkommastellen - so wird #3366cc80 zu hsla(220, 60%, 50%, 0.502).
Kann er HSL zurück in HEX umrechnen?
Ja. Die Zeile HSL zu HEX unter dem Ergebnis nutzen: Farbton (0-360) sowie Sättigung und Helligkeit (0-100 %) eingeben, und der Hex-Code erscheint sofort. Werte außerhalb des Bereichs werden auf den zulässigen Bereich begrenzt.
Warum HSL statt Hex verwenden?
HSL lässt sich menschlich lesen: Eine Farbe wird heller, wenn man L erhöht, blasser, wenn man S senkt, oder wechselt die Farbfamilie, wenn man H ändert - alles ohne Hex-Ziffern zu erraten. Das macht HSL ideal für konsistente Paletten, Hover-Zustände und Design-Tokens.