RGB-zu-HSL-Farbumrechner

Der Farbtonwert (H) zeigt die Position Ihrer Farbe auf dem Farbkreis, die Sattigung (S) zeigt, wie lebendig oder gedeckt sie ist, und die Helligkeit (L) zeigt, wie nah sie an Schwarz oder Weiss liegt. Zusammen konnen diese drei Werte direkt in CSS als hsl(H, S%, L%) verwendet werden.

R, G und B werden zunachst auf einen Bereich von 0 bis 1 skaliert. Die Helligkeit (L) ist der Durchschnitt aus dem hochsten und dem niedrigsten Kanal. Die Sattigung (S) ist die Differenz zwischen den Kanalen im Verhaltnis zur Helligkeit, und der Farbton (H) wird auf einer Skala von 0 bis 360 Grad basierend auf dem dominanten Kanal berechnet.

• R-, G- und B-Werte werden durch 255 geteilt, um sie auf einen Bereich von 0 bis 1 zu skalieren.
• Der grosste (max) und der kleinste (min) der skalierten Werte werden ermittelt.
• Die Helligkeit (L) wird als Durchschnitt der Werte max und min berechnet.
• Die Sattigung (S) ergibt sich, indem die Differenz max-min im Verhaltnis zur Helligkeit normalisiert wird.
• Der Farbton (H) wird auf einer Skala von 0 bis 360 Grad basierend auf dem dominanten Kanal (R, G oder B) berechnet.

R=52, G=152, B=219 (ein kraftiges Blau) entspricht etwa H=204 Grad, S=70%, L=53%.

• Geben Sie R, G und B als ganze Zahlen zwischen 0 und 255 ein; Werte ausserhalb dieses Bereichs stellen keine gultige Farbe dar.
• Der Farbton (H) ist eine Position auf einem Farbkreis von 0 bis 360 Grad: 0 bedeutet Rot, 120 Grun, 240 Blau.
• Sattigung und Helligkeit werden in Prozent angegeben; 0% Sattigung ist ein Grauton, 100% Helligkeit ist Weiss.

Das RGB-Modell (Rot, Grun, Blau) bildet genau ab, wie Bildschirme durch Lichtemission Farbe erzeugen: Jeder Kanal erhalt einen Intensitatswert von 0 bis 255, und die Kombination der drei Kanale erzeugt Millionen unterschiedlicher Farben. Dieses Modell ist jedoch nicht intuitiv, wenn Sie eine Farbe 'heller' oder 'lebendiger' machen wollen, da Sie alle drei Kanale gleichzeitig anpassen mussten.

Das HSL-Modell (Hue, Saturation, Lightness) beschreibt Farben dagegen so, wie das menschliche Auge sie wahrnimmt: Der Farbton gibt an, um welche Farbe es sich handelt (Rot, Grun, Violett), die Sattigung zeigt, wie lebendig sie ist, und die Helligkeit zeigt, wie hell oder dunkel sie ist. Deshalb bevorzugen Designer und Entwickler beim Erstellen von Farbpaletten oft HSL.

Dieses Tool skaliert Ihre RGB-Eingabe auf einen Bereich von 0 bis 1 und ermittelt dann den hochsten und niedrigsten Kanalwert, um Helligkeit und Sattigung zu berechnen. Anschliessend wird bestimmt, welcher Kanal dominant ist, um die genaue Position des Farbtons auf dem Farbkreis zu finden.

Der grosste Vorteil des HSL-Formats ist, dass es direkt in CSS als hsl(Farbton, Sattigung%, Helligkeit%) verwendet werden kann. Um zum Beispiel eine dunklere Variante der Hauptfarbe einer Marke zu erstellen, mussen Sie nur den Helligkeitswert senken — bei RGB mussten Sie alle drei Kanale einzeln neu berechnen.

Farbumrechnungen wie diese kommen haufig im Webdesign, bei Logoarbeiten, der Datenvisualisierung und in UI-Themensystemen zum Einsatz. Die Umrechnung von RGB in HSL ist ein praktischer Ausgangspunkt fur Entwickler, die Hell/Dunkel-Themenvarianten oder eine konsistente Farbpalette erstellen mochten.