HSL beschreibt eine Farbe so, wie Menschen über sie sprechen: welcher Farbton, wie farbig, wie hell. Ein HEX-Code in HSL ist der schnellste Weg zu einer Form, mit der du wirklich arbeiten kannst — aufhellen, abmildern oder eine ganze Farbskala daraus bauen.
So funktioniert die Umrechnung von HEX in HSL
- Rechne den HEX-Code in RGB um und teile jeden Kanal durch 255, sodass alle drei Werte zwischen 0 und 1 liegen.
- Bestimme den größten und den kleinsten der drei Werte. Ihr Mittelwert ist die Helligkeit L.
- Der Abstand dazwischen bestimmt die Sättigung S: teile ihn bei hellen Farben durch (2 − max − min), bei dunklen durch (max + min).
- Der Kanal mit dem Maximum legt den Farbton H fest — Rot bei 0°, Grün bei 120°, Blau bei 240° — die beiden anderen Kanäle bestimmen die Position innerhalb dieses Abschnitts.
Beispiel zum Nachrechnen
Die Rechnung ist exakt, aber HSL-Werte werden üblicherweise auf ganze Grad und Prozent gerundet. Beim Zurückrechnen kann das Ergebnis deshalb ein bis zwei RGB-Schritte danebenliegen — in der Praxis unsichtbar, aber gut zu wissen, wenn du Farben mehrfach hin- und herrechnest.
HEX und HSL erklärt
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
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
Referenztabelle HEX zu HSL
Die gängigsten CSS-Farben, umgerechnet von HEX nach HSL.
| Farbe | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |