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%) |