HSL in HEX umrechnen
Legen Sie Farbton, Sättigung und Helligkeit fest und erhalten Sie den passenden sechsstelligen HEX-Farbcode zum Kopieren.
hsl-Eingabe
Ergebnis · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
So funktioniert’s: HSL in HEX
- 1
Farbe eingeben
Geben Sie einen Farbcode ein oder wählen Sie eine Farbe mit dem Farbwähler – jedes Feld akzeptiert das angezeigte Format.
- 2
Umrechnung ansehen
Das Ergebnis aktualisiert sich sofort während der Eingabe, zusammen mit einer Live-Vorschau der Farbe.
- 3
Code kopieren
Kopieren Sie den gewünschten Wert mit einem Klick und fügen Sie ihn in Ihr Design, Ihr CSS oder Ihre Druckeinstellungen ein.
Warum HSL in HEX umrechnen?
HSL ist die intuitivste Art, ein Farbsystem aufzubauen. Sie legen einen Farbton fest, etwa 262° für Violett, und erstellen eine ganze Skala, indem Sie vor allem die Helligkeit ändern: rund 95 % für Hintergründe, 58 % für Buttons und Akzente, 30 % für Text. Designer und Entwickler nutzen diese Methode für Aufhellungen, Abdunklungen und Dark Themes.
Die fertige Skala muss allerdings meist als HEX-Codes geliefert werden: Styleguides, Design-Tokens, Figma-Bibliotheken, Brand Books und viele Content-Management-Systeme erwarten #RRGGBB-Werte. Geben Sie die HSL-Werte ein und kopieren Sie das HEX-Ergebnis – aus hsl(262, 83%, 58%) wird zum Beispiel #7C3BED. Das Tool zeigt für dieselbe Farbe außerdem RGB, HSV und CMYK an. Da HEX nur 256 Stufen pro Kanal speichern kann, ändern sehr kleine Anpassungen in HSL den HEX-Code nicht immer.
Alles läuft lokal in Ihrem Browser – Ihre Bilder werden nie auf einen Server hochgeladen.