Farben in HSL auszuwählen ist angenehm, aber Stylesheets, Design-Übergaben und Markendokumente laufen weiterhin auf HEX. Dieser Konverter schließt die Lücke und liefert dir den sechsstelligen Code für jede Kombination aus Farbton, Sättigung und Helligkeit.
So funktioniert die Umrechnung von HSL in HEX
- Rechne Sättigung und Helligkeit in Bruchteile um: aus 60% wird 0,6.
- Berechne die Buntheit C = (1 − |2L − 1|) × S — sie gibt an, wie weit die Farbe von Grau entfernt ist.
- Verteile diese Buntheit anhand des Farbtons auf Rot, Grün und Blau und verschiebe alle drei Kanäle um L − C/2.
- Multipliziere jeden Kanal mit 255, runde ihn und schreibe ihn als zwei Hexadezimalziffern.
Beispiel zum Nachrechnen
Gerundet wird nur einmal, im letzten Schritt, wenn jeder Kanal auf einen ganzen Wert zwischen 0 und 255 gesetzt wird. Das Ergebnis ist der nächstgelegene HEX-Code zu deinem HSL-Wert und stimmt normalerweise exakt mit dem überein, was Design-Tools anzeigen.
HSL und HEX erklärt
Was ist HSL?
HSL zerlegt eine Farbe in Farbton (0–360° auf dem Farbkreis), Sättigung (wie farbig, 0–100%) und Helligkeit (wie hell, 0–100%). Weil jeder Teil dem entspricht, wie Menschen über Farbe sprechen, ist HSL das einfachste Format für Abstufungen und konsistente Paletten — von Hand oder im Code.
- Syntax:
- hsl(H, S%, L%)
- Wertebereich:
- 0–360°, 0–100%, 0–100%
- Ideal für:
- Paletten, Farbabstufungen, Theming
Was ist HEX?
Ein HEX-Code ist eine sechsstellige Hexadezimalzahl, die Rot-, Grün- und Blau-Kanal einer Farbe hinter einem # speichert. Jedes Ziffernpaar steht für einen Kanal, von 00 (nichts) bis FF (voll) — das ergibt dieselben 16,7 Millionen Farben wie RGB, nur deutlich kürzer notiert. HEX ist der Standard in CSS, Design-Tools und Markenrichtlinien.
- Syntax:
- #RRGGBB
- Wertebereich:
- 00–FF pro Kanal
- Ideal für:
- CSS, Design-Übergabe, Markenrichtlinien
Referenztabelle HSL zu HEX
Die gängigsten CSS-Farben, umgerechnet von HSL nach HEX.
| Farbe | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |