HSL-zu-RGB-Konverter

Was die Umrechnung in die Gegenrichtung rekonstruieren muss

Ein HSL-Wert formuliert eine Absicht: welche Richtung auf dem Farbkreis (Farbton), wie kräftig (Sättigung), wie weit in Richtung Weiß (Helligkeit). Ein Display kann mit Absichten nichts anfangen – es braucht drei Kanalenergien. Die Umrechnung von HSL nach RGB läuft deshalb in drei Stufen ab: die kräftigste mögliche Version des gewünschten Farbtons bauen, ihre Buntheit skalieren und anschließend alles auf die gewünschte Helligkeit anheben oder absenken. Der Standardalgorithmus nennt die drei beteiligten Größen C, X und m – und sobald klar ist, wozu jede davon dient, wirkt die abschnittsweise definierte Formel nicht mehr willkürlich.

C, X und m, anschaulich erklärt

C ist die Buntheit – der Abstand zwischen dem größten und dem kleinsten RGB-Kanal der fertigen Farbe: C = (1 − |2L − 1|) × S. Der erste Faktor ist der Spielraum, den es bei dieser Helligkeit überhaupt für Farbe gibt: Bei L = 50 % beträgt er 1 (maximaler Spielraum) und schrumpft zu Schwarz wie zu Weiß hin linear auf 0. Dieser eine Term erklärt, warum fast schwarze und fast weiße Farben nie kräftig aussehen können, wie hoch ihre Sättigung auch eingestellt sein mag.

X ist der mittlere Kanal. In jedem 60°-Sektor des Farbkreises liegt ein Kanal bei C, einer bei 0, und der dritte – X = C × (1 − |(H ÷ 60) mod 2 − 1|) – steigt und fällt als Dreieckswelle dazwischen. Genau diese Rampe lässt den Farbton stufenlos durchlaufen: reines Rot bei 0°, Grün steigt bis zum Gelb bei 60°, Rot fällt bis zum reinen Grün bei 120°, und so weiter rund um den Kreis.

m ist der Sockel aus Weißlicht. Eine rohe Mischung aus C/X/0 hat die Helligkeit C ÷ 2, und die ist meist nicht die gewünschte. Addiert man m = L − C ÷ 2 auf alle drei Kanäle, steigt die Helligkeit auf den Zielwert, ohne dass sich Farbton oder Buntheit ändern – visuell wird eine gleichmäßige Menge Weißlicht über die reine Farbe gegossen. Die drei Summen mit 255 multiplizieren, auf ganze Zahlen runden, fertig ist RGB.

Welcher Kanal C bekommt und welcher X, hängt allein vom Sektor ab:

Rechenbeispiel: hsl(220, 60%, 49%)

• C = (1 − |2 × 0.49 − 1|) × 0.60 = (1 − 0.02) × 0.60 = 0.98 × 0.60 = 0.588.
• H′ = 220 ÷ 60 = 3,6667, was in die Zeile 180°–240° fällt → Muster (0, X, C).
• X = 0,588 × (1 − |3,6667 mod 2 − 1|); der |…|-Term ergibt exakt zwei Drittel, der Faktor also ein Drittel, und X = 0,588 ÷ 3 = 0,196.
• m = 0.49 − 0.588 ÷ 2 = 0.49 − 0.294 = 0.196.
• Kanäle: R = (0 + 0,196) × 255 = 49,98 → 50; G = (0,196 + 0,196) × 255 = 99,96 → 100; B = (0,588 + 0,196) × 255 = 199,92 → 200.

Ergebnis: rgb(50, 100, 200), in HEX #3264c8. Rechnest du zurück, kommt der Farbton exakt als 220° und die Sättigung exakt als 60 % heraus – die Brüche 150 ÷ 250 und (50 − 100) ÷ 150 gehen glatt auf –, während die Helligkeit rechnerisch 49,02 % ergibt und als 49 % angezeigt wird.

Die Prozent-Patzer, die jeder einmal macht

• Das % bei Sättigung oder Helligkeit weglassen. In der klassischen Komma-Syntax verlangt CSS Prozentzeichen an S und L – hsl(220, 60, 49) ist ungültiger Stylesheet-Code. Konverter, die nackte Zahlen dulden (dieser eingeschlossen), lesen sie auf einer Skala von 0–1; eine als 49 getippte Helligkeit wird also auf 100 % begrenzt, und die Ausgabe wird reinweiß. Ein unerwartet weißes Ergebnis geht fast immer auf diesen Fehler zurück.
• Ein Prozentzeichen an den Farbton hängen. Der Farbton ist ein Winkel: 220, 220deg, 244.4grad und 0.611turn zeigen alle in dieselbe Richtung, während sich 220% überhaupt nicht parsen lässt.
• Dezimalwerte von 0–1 mit nackten Prozentzahlen verwechseln. 0.6 für 60 % zu schreiben funktioniert hier und in vielen Bibliotheken; 60 ohne Zeichen bedeutet dagegen nicht 60 %.
• Reihenfolge der Komponenten. Das Python-Modul colorsys arbeitet mit HLS – Helligkeit an zweiter, Sättigung an dritter Stelle. Wer dessen Ausgabe direkt in hsl() einfügt, vertauscht beide unbemerkt und bekommt seltsam ausgewaschene oder übersättigte Farben.
• Angst vor Farbtönen außerhalb des Bereichs. Winkel laufen um: −140° und 580° normalisieren beide zu 220°. Das ist nie ein Fehler.

Warum das RGB-Ergebnis so unrunde Zahlen hat

RGB-Kanäle sind 8-Bit-Ganzzahlen – ein Raster aus 256 Stufen – und prozentbasierte HSL-Werte treffen dieses Raster nur selten exakt. Das Beispiel oben will idealerweise 49,98, 99,96 und 199,92, jeder Kanal wird also um höchstens eine halbe Stufe gerundet: eine Verschiebung von rund 0,2 %, die kein Auge wahrnimmt. Die Rundung erklärt aber zwei Alltagsbeobachtungen: Saubere HSL-Eingaben erzeugen unaufgeräumt wirkende RGB-Werte, und mehrfaches Hin- und Herrechnen über gerundete Anzeigewerte kann die letzte Stelle wackeln lassen. Die zugrunde liegenden Formeln sind exakte Umkehrungen voneinander; die Drift entsteht allein durch die 8-Bit-Quantisierung und die Anzeigegenauigkeit.

Die Umrechnung ist hier schlichte Arithmetik, ausgeführt von der Seite, die du gerade vor dir hast – nichts wird an einen Server gesendet, und einmal geladen funktioniert das Tool auch offline. Willst du dieselbe Beziehung von der anderen Seite betrachten, seziert der RGB-zu-HSL-Konverter die Max/Min-Formel des Hinwegs; und wenn am Ende ohnehin ein Code fürs Stylesheet gebraucht wird, springt der HSL-zu-HEX-Konverter direkt zur Hex-Notation.