So wandeln Sie HEX in HSL um
Wandeln Sie HEX-Farbcodes sofort in HSL um. Geben Sie einen HEX- oder RGB-Wert ein oder nutzen Sie die Schieberegler – alle Formate aktualisieren sich gleichzeitig, mit Farbvorschau, Formel und einer Tabelle gängiger Farben.
- Geben Sie einen HEX-Wert wie #3B82F6 in das passende Feld oben ein.
- Der HSL-Wert aktualisiert sich sofort: #3B82F6 ist hsl(217, 91%, 60%). Auch die anderen Formate und die Farbvorschau ändern sich mit.
- Kopieren Sie den HSL-Wert in Ihr CSS, Ihr Designtool oder Ihren Code.
Die Formel von HEX zu HSL
Skalieren Sie Rot, Grün und Blau auf 0–1. Die Helligkeit ist der Mittelwert aus größtem und kleinstem Kanal, die Sättigung wächst mit dem Abstand zwischen beiden, und der Farbton ist die Position des stärksten Kanals auf dem 360°-Farbkreis:
#3B82F6 → hsl(217, 91%, 60%)
Gängige Farben in HEX und HSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
HEX und HSL erklärt
Eine HEX-Farbe ist ein # gefolgt von sechs Hexadezimalziffern: je zwei für Rot, Grün und Blau, von 00 (nichts) bis FF (voll). Es ist die gängigste Schreibweise für Farben in CSS und Designtools.
HSL beschreibt eine Farbe über Farbton (einen Winkel von 0 bis 360 auf dem Farbkreis), Sättigung und Helligkeit (beide in %). So lassen sich hellere, dunklere oder gedämpfte Varianten derselben Farbe leicht bilden.
Häufige Fragen
Ändert sich die Farbe beim Umrechnen?
HEX, RGB und HSL beschreiben dieselben Bildschirmfarben, daher ist die Umrechnung zwischen ihnen exakt (HSL wird auf ganze Zahlen gerundet). CMYK ist für den Druck: Das Druckergebnis hängt vom Farbprofil des Druckers ab, betrachten Sie CMYK-Werte vom Bildschirm also als Ausgangspunkt.
Kann ich das Ergebnis in CSS verwenden?
Ja. CSS akzeptiert Hex (#3B82F6), rgb(59, 130, 246) und hsl(217, 91%, 60%) direkt. CMYK ist kein CSS-Format; es wird im Druck und in Designprogrammen verwendet.
Und Transparenz?
Ergänzen Sie einen Alphawert: 8-stelliges Hex (#3B82F680) oder rgba()/hsla() in CSS. Der Konverter arbeitet mit der deckenden Farbe; der Alphawert bleibt in jedem Format gleich.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.