RGB in HSL umrechnen

Geben Sie den roten, grünen und blauen Kanal jeweils zwischen 0 und 255 an. Der Rechner liefert den Farbton auf einem Kreis von 0–360 Grad sowie Sättigung und Helligkeit als Prozentwerte von 0 bis 100. Fehlende, nicht numerische, unendliche oder außerhalb des Bereichs liegende Kanäle werden abgewiesen und nicht unbemerkt begrenzt. So bleiben Fehler sichtbar und nachgelagerte Farbdaten zuverlässig.

Geben Sie die RGB-Kanäle korrekt ein

Übermitteln Sie drei numerische Felder für Rot, Grün und Blau mit den Kurzbezeichnungen r, g und b. Jeder Kanal muss einschließlich der Grenzwerte zwischen 0 und 255 liegen. Null bedeutet, dass der Kanal keine Intensität beiträgt; 255 steht für die volle Intensität. Dezimalwerte dazwischen sind ebenfalls zulässig, was bei interpolierten Farben aus einer vorherigen Berechnung nützlich ist. Ungültige Werte werden bewusst nicht auf den erlaubten Bereich begrenzt. Ist ein Kanal negativ, größer als 255, nicht vorhanden, nicht numerisch oder unendlich, liefert die Anfrage einen Eingabefehler. Dieses strenge Verhalten schützt automatisierte Abläufe, weil ein ungültiger Ausgangswert nicht unbemerkt zu einer plausiblen, aber falschen Farbe werden kann. Verwenden Sie für einen einfachen ersten Test r 255, g 0 und b 0. Das Ergebnis ist Rot mit einem Farbton von null Grad, voller Sättigung und fünfzig Prozent Helligkeit. Wenn Sie Werte aus CSS übernehmen, senden Sie ausschließlich die Kanalzahlen ohne rgb()-Hülle, Kommas oder Prozentzeichen. Numerische Eingaben verhindern außerdem Verwechslungen zwischen der RGB-Skala 0–255 und der prozentualen RGB-Schreibweise mancher Designsysteme.

Verstehen Sie die Berechnung des HSL-Ergebnisses

Zunächst wird jeder RGB-Kanal durch Division durch 255 normalisiert. Anschließend werden der größte und der kleinste normalisierte Kanal bestimmt. Ihr Mittelwert ergibt die Helligkeit; ihre Differenz, Chroma genannt, entscheidet darüber, ob die Farbe Sättigung und einen aussagekräftigen Farbton besitzt. Ist das Chroma null, handelt es sich um einen Grauton: Die Sättigung beträgt null, und der Farbton wird per Konvention als null ausgegeben, da keine Position auf dem Farbkreis visuell unterscheidbar ist. Bei chromatischen Farben entspricht die Sättigung dem an die aktuelle Helligkeit angepassten Chroma. Der Farbton hängt davon ab, welcher RGB-Kanal am größten ist. Rot, Grün und Blau belegen verschiedene Sektoren des Farbkreises; die relativen Kanalunterschiede bestimmen die Position innerhalb des Sektors. Der Farbton wird in Grad ab null bis ausschließlich 360 angegeben. Sättigung und Helligkeit werden mit 100 multipliziert und als Prozentwerte ausgegeben. Ergebnisse werden auf vier Dezimalstellen gerundet, damit sie nützliche Präzision mit stabilen, lesbaren Antworten verbinden. Dies ist die übliche RGB-HSL-Transformation: Sie ordnet dieselben Farbinformationen neu und führt weder Farbmanagement noch Gammakorrektur oder Profilkonvertierung durch.

Setzen Sie HSL in Design und Anwendungen ein

HSL lässt sich bei Farbvarianten häufig leichter als RGB verstehen. Der Farbton bezeichnet die Farbfamilie, die Sättigung steuert den lebhaften oder grauen Eindruck, und die Helligkeit verschiebt die Farbe in Richtung Schwarz oder Weiß. Nach der Umrechnung einer Markenfarbe können Sie deren Farbton beibehalten und die Helligkeit für Hover-, gedrückte oder deaktivierte Zustände verändern. Eine Datenpipeline kann gemischte Farbdatensätze vor dem Sortieren oder Gruppieren in eine einheitliche HSL-Darstellung überführen. Eine Qualitätsprüfung kann die Rückgabewerte außerdem mit Design-Tokens vergleichen und fehlerhafte RGB-Kanäle früh ablehnen. Beachten Sie, dass gleiche numerische Änderungen nicht zwingend gleich starke visuelle Änderungen bewirken: HSL eignet sich gut für Bedienelemente, ist aber kein wahrnehmungsgleichmäßiger Farbraum. Bewahren Sie die ursprünglichen RGB-Werte auf, wenn exakte Rückumwandlungen wichtig sind, denn die Rundung kann dabei eine kleine Abweichung verursachen. Der Vorgang ist deterministisch und hängt nur von den übergebenen Zahlen ab: Er nutzt weder Netzwerk noch Zufall, Uhrzeit oder externe Farbdatenbank. Identische Eingaben liefern daher bei wiederholten Aufrufen identische Ausgaben. Das eignet sich für Tests, Build-Skripte, API-Integrationen und reproduzierbare Werkzeuge für Designsysteme.