Was ist der Unterschied zwischen RGB und HSL?
RGB und HSL sind zwei grundlegend verschiedene Modelle, um Farbe zu beschreiben. RGB – das Kürzel steht für Rot, Grün, Blau – bildet ab, wie ein Bildschirm Licht mischt: Jeder der drei Kanäle bekommt einen ganzzahligen Wert zwischen 0 und 255, und je höher die Zahl, desto mehr Licht dieser Grundfarbe wird ausgesendet. Bei 255, 255, 255 entsteht Weiß, bei 0, 0, 0 Schwarz. Dieses additive Prinzip ist technisch präzise, aber für den Menschen schwer intuitiv: Ändert man etwa den Rotkanal, verschiebt sich nicht nur die Helligkeit, sondern auch der wahrgenommene Farbton.
HSL hingegen modelliert Farbe so, wie Menschen sie denken: Der Farbton (Hue) liegt auf einem Kreis von 0° bis 360° – 0° ist Rot, 120° Grün, 240° Blau. Die Sättigung (Saturation) gibt in Prozent an, wie rein die Farbe ist: 0 % ergibt Grau, 100 % die volle Farbe. Die Helligkeit (Lightness) reicht ebenfalls von 0 % (schwarz) bis 100 % (weiß). Der entscheidende Vorteil: Man kann die Helligkeit eines Farbtons verändern, ohne den Farbton selbst zu beeinflussen. Will man etwa aus einem kräftigen Blau ein helleres Pastell machen, genügt es, den Lightness-Wert zu erhöhen – der Hue bleibt konstant. Dieser Unterschied macht HSL zur bevorzugten Wahl, wenn es um Farbpaletten, Themes oder barrierefreie Kontraste geht.
Der Konverter auf dieser Seite nimmt Ihre RGB-Eingabe entgegen und rechnet sie sofort in HSL um, zeigt aber auch die Entsprechungen in HEX, HSV, CMYK und LAB an. Alle Berechnungen laufen lokal in Ihrem Browser; nichts von dem, was Sie eingeben, wird übertragen oder gespeichert.
So nutzen Sie den RGB‑zu‑HSL‑Konverter
Die Eingabe ist denkbar einfach: Sie geben rot, grün und blau als drei ganze Zahlen zwischen 0 und 255 ein, getrennt durch Kommas oder Leerzeichen. Ein typisches Beispiel lautet 79, 70, 229. Sobald Sie die Werte eintippen, aktualisieren sich alle übrigen Felder in Echtzeit. Sie sehen:
- HSL mit Hue (0–360), Saturation (%) und Lightness (%)
- HEX (z. B.
#4F46E5) - HSV (Hue, Saturation, Value)
- CMYK – eine Bildschirmschätzung, die nicht für den professionellen Druck verwendet werden sollte
- LAB – ein geräteunabhängiger Farbraum
Das Besondere: Auch die umgekehrte Richtung funktioniert. Tragen Sie einen gültigen HSL-Wert ein – zum Beispiel 243, 75%, 59% –, dann wandelt der Konverter ihn zurück nach RGB, HEX, HSV, CMYK und LAB. So können Sie Farbdefinitionen zwischen verschiedenen Formaten hin und her wechseln, ohne sich die Umrechnungsformeln merken zu müssen.
Die Umrechnungsformel von RGB zu HSL
Die zugrunde liegende Mathematik ist nicht kompliziert, aber das Verständnis hilft, die Ergebnisse besser einzuordnen. Zuerst werden die RGB-Werte von 0–255 auf den Bereich 0–1 normiert:
r' = r/255, g' = g/255, b' = b/255.
Dann bestimmt man den kleinsten und größten dieser drei Werte (min und max). Die Helligkeit L ergibt sich als Mittelwert der beiden:
L = (max + min) / 2.
Die Sättigung S hängt davon ab, wie weit die Extremwerte auseinanderliegen, und wird unterschiedlich berechnet, je nachdem ob L kleiner oder größer als 0,5 ist:
Falls max = min (keine Sättigung, Grauton), ist S = 0.
Sonst:
Δ = max - min
S = Δ / (1 - |2L - 1|).
Der Farbton H schließlich ergibt sich aus der relativen Lage von max:
- Ist
max = r':
H = 60° × ((g' - b') / Δ mod 6) - Ist
max = g':
H = 60° × ((b' - r') / Δ + 2) - Ist
max = b':
H = 60° × ((r' - g') / Δ + 4)
Negative Ergebnisse werden auf 0–360° normalisiert. Diese Formel liefert den exakten Hue-Wert – kein Runden, keine Tabelle.
HSL für barrierefreie Farbpaletten und Themes
Weil HSL die Helligkeit unabhängig vom Farbton steuert, eignet es sich hervorragend, um WCAG-Kontrastverhältnisse einzuhalten, ohne die Markenfarbe zu verändern. Möchten Sie beispielsweise eine Schrift auf einem Hintergrund in Markenblau lesbar machen, können Sie die Lightness des Hintergrunds anpassen oder einen helleren Farbton mit gleichem Hue verwenden. Das Ergebnis bleibt farblich konsistent – der Betrachter erkennt die Farbe wieder.
Im Webdevelopment wird HSL über die CSS-Funktionen hsl() und hsla() direkt unterstützt. Ein Stylesheet-Eintrag wie color: hsl(243, 75%, 59%) ist nicht nur lesbarer als rgb(79, 70, 229), sondern erlaubt auch dynamische Anpassungen per JavaScript, indem Sie nur den Lightness-Wert ändern. Theme-Builder nutzen diesen Mechanismus, um aus einer einzigen Grundfarbe automatisch helle und dunkle Varianten zu erzeugen – ein klassischer Anwendungsfall, der mit RGB viel umständlicher wäre.
Auch für Datenvisualisierung ist HSL nützlich: Sequenzielle Farbskalen lassen sich aufbauen, indem man die Lightness schrittweise erhöht, während Hue und Saturation gleich bleiben. Das ergibt visuell geordnete Abstufungen, die auch farbenblinde Betrachter noch unterscheiden können.
Einschränkungen: Wenn HSL nicht ausreicht
HSL ist kein perzeptuell uniformer Farbraum. Das bedeutet, dass zwei Farben mit demselben Lightness-Wert nicht zwingend als gleich hell empfunden werden. Gelb bei 50 % Lightness wirkt deutlich heller als Blau bei 50 % Lightness, weil das menschliche Auge auf verschiedene Wellenlängen unterschiedlich empfindlich ist. Wer wirklich gleichmäßige Helligkeitsabstufungen braucht, sollte auf LAB oder LCh ausweichen – Formate, die die menschliche Wahrnehmung besser abbilden.
Ein weiterer Punkt betrifft den Farbumfang (Gamut). Sowohl RGB als auch HSL sind an den sRGB-Farbraum gebunden, der durch die Displaytechnik definiert ist. Wenn Sie einen LAB- oder CMYK-Wert eingeben, der außerhalb des sRGB-Gamuts liegt (also eine Farbe, die kein handelsüblicher Monitor darstellen kann), passt der Konverter den Wert an den nächsten darstellbaren Farbton an. Wandeln Sie diese angepasste Farbe anschließend zurück, kann eine leichte Verschiebung auftreten – die Umrechnung ist dann nicht mehr exakt umkehrbar. Dieses Verhalten ist beabsichtigt, aber Sie sollten es kennen, wenn Sie mit Out-of-Gamut-Werten arbeiten.
Der ausgegebene CMYK-Wert ist zudem eine reine Bildschirmschätzung. Professionelle Druckereien arbeiten mit eigenen ICC-Profilen und Druckbedingungen; verlassen Sie sich daher nie auf diese Angabe für die Druckvorstufe, ohne sie vorher mit einem Proof zu verifizieren.
Häufige Fehler und gültige Eingabeformate
Der Konverter prüft Ihre Eingaben auf Korrektheit. Folgende Meldungen erscheinen, wenn etwas nicht stimmt:
- Für RGB: „Geben Sie RGB als drei Zahlen 0–255 ein, zum Beispiel 79, 70, 229.“ – Achten Sie darauf, dass die Werte ganze Zahlen sind und im richtigen Bereich liegen. Dezimalzahlen oder negative Werte werden nicht akzeptiert.
- Für HSL: „Geben Sie HSL als Farbton 0–360 mit zwei Prozentwerten ein, zum Beispiel 243, 75%, 59%.“ – Hue darf keine Einheit haben, Saturation und Lightness müssen als Prozentwerte (mit oder ohne Prozentzeichen) eingegeben werden.
Wenn Sie aus Versehen ein anderes Format ausfüllen und wieder löschen, springt der Konverter nicht in einen undefinierten Zustand, sondern zeigt die entsprechende Fehlermeldung an. Alle anderen Felder bleiben unverändert, bis die Eingabe gültig ist.
FAQ – Häufig gestellte Fragen
Warum ist die CMYK-Ausgabe nicht druckgenau?
Der Konverter verwendet eine vereinfachte Umrechnung von sRGB nach CMYK. Professionelle Druckprozesse benötigen individuelle ICC-Profile und berücksichtigen Papierart, Druckmaschine und Rasterung. Nutzen Sie die CMYK-Werte daher nur als grobe Orientierung.
Kann ich die Umrechnung auch für ein einzelnes RGB-Paar rückgängig machen?
Ja. Wenn Sie HSL-Werte eintragen, werden alle anderen Formate automatisch neu berechnet, inklusive RGB. Sie können so beliebig zwischen den Formaten hin- und herspringen.
Was passiert, wenn ich einen LAB-Wert eingebe, der außerhalb des sRGB-Gamuts liegt?
Der Konverter passt die Farbe an den nächstmöglichen darstellbaren Farbton an. Das Ergebnis liegt dann innerhalb des sRGB-Gamuts. Eine Rückkonvertierung kann eine minimale Abweichung ergeben – das ist systembedingt und kein Fehler.
Unterstützt der Konverter auch RGBA oder HSLA mit Alphakanal?
Nein. Die Seite arbeitet mit deckenden Farben. Einen Alphakanal können Sie später bei der Verwendung in CSS selbst ergänzen (z. B. hsla(243, 75%, 59%, 0.8)).