HEX in HSL umrechnen
Machen Sie aus einem HEX-Farbcode Farbton, Sättigung und Helligkeit – die Schreibweise, mit der Farbvarianten leichtfallen.
HEX-Farben in HSL umrechnen
HEX-Codes sind kompakt, aber schwer zu durchschauen: Niemand sieht #0A84FF an, wie man die Farbe um 10 Prozent dunkler macht. HSL beschreibt dieselbe Farbe so, wie Menschen über Farben denken – ein Hover-Zustand, ein deaktivierter Zustand oder eine Dark-Mode-Variante wird damit zur Änderung einer einzigen Zahl.
Diese Seite öffnet den Farbkonverter mit HEX als Eingabeformat und einem geladenen Beispiel.
Einen HSL-Wert lesen
| Teil | Bereich | In hsl(210, 100%, 52%) |
|---|---|---|
| Farbton (Hue) | 0–360° | 210°: ein Blau zwischen Cyan (180°) und reinem Blau (240°) |
| Sättigung (Saturation) | 0–100% | 100%: so kräftig wie möglich, kein Grau beigemischt |
| Helligkeit (Lightness) | 0–100% | 52%: knapp über der Mitte zwischen Schwarz und Weiß |
Wie aus HEX ein HSL-Wert wird
Der Konverter rechnet den HEX-Code zuerst in RGB um und skaliert dann jeden Kanal auf 0–1. Die Helligkeit ist der Mittelwert aus dem größten und dem kleinsten Kanal. Die Sättigung hängt davon ab, wie weit diese beiden auseinanderliegen, bezogen auf die Helligkeit. Der Farbton ergibt sich daraus, welcher Kanal am größten ist und wie sich die beiden anderen zueinander verhalten. Für #0A84FF lautet das Ergebnis 210,1°, 100% und 51,96%, gerundet hsl(210, 100%, 52%).
Varianten mit HSL bauen
- Hover- oder Pressed-Zustand: Helligkeit um 5 bis 10 Punkte senken.
- Deaktivierter Zustand: Sättigung senken und Helligkeit erhöhen.
- Tints für Hintergründe: Farbton und Sättigung beibehalten, Helligkeit auf 90–97% setzen.
- Dark Mode: Helligkeit erhöhen, damit die Farbe auf dunklen Flächen lesbar bleibt.
Der Reiter „Palette“ automatisiert das mit einer elfstufigen Skala von 50 bis 950, und die Harmonien darunter drehen den Farbton, um Komplementär- und Analogfarben zu finden.
Grenzen der wahrgenommenen Helligkeit
HSL-Helligkeit ist nicht gleich wahrgenommener Helligkeit: Ein Gelb und ein Blau mit 50% wirken sehr unterschiedlich hell. Wenn Kontrast zählt, testen Sie das tatsächliche Farbpaar im Kontrast-Checker oder nutzen Sie den OKLCH-Wert, den der Konverter ebenfalls anzeigt. Für reine Kanalwerte siehe HEX in RGB.