HSL nach RGB umrechnen

HSL wird nicht durch eine einfache Formel in RGB umgerechnet, sondern durch eine Folge von Schritten je nach Voraussetzung.

RGB ist kein intuitiver Farbraum. Die drei Werte für Rot, Grün und Blau erlauben nur mit viel Erfahrung einen Rückschluss auf die Sättigung und die Helligkeit der Farbe. Das W3C, das die Standards für das Internet festlegt, hat darum HSL als optionale Farbnotation in CSS festgelegt.

HSL wird als Farbkreis dargestellt, in dem die hoch gesättigten Farbtöne auf dem Kreisradius in 360 Schritten abgebildet sind. Die Sättigung nimmt vom außen nach innen ab. Die Helligkeit wird durch einen zusätzlichen Regler von 0 bis 100% geändert.

Sättigung = 0

Wenn die Sättigung der HSL-Farbe 0 beträgt, haben wir einen Grauton. Nur die Luminanz muss in RGB umgesetzt werden.

R = Lightness100 * 255
G = Lightness100 * 255
B = Lightness 100 * 255

Sättigung > 0

Die Umrechnung von HSL nach RGB benötigt zwei temporäre Variablen: t1 und t2.

Sättigung > 0 und Lightness < 50%

t1 = Lightness100*1.0+Saturation100

Sättigung > 0 und Lightness >= 50%

t1 = Lightness 100 + Saturation100 - Lightness 100 * Saturation100
t1 = 0.6 + 0.79 - 0.6 x 0.79 = 1.39 - 0,474 = 0.916

Die temporäre Variable t2

t2 = 2 * Lightness 100 - t1
t2 = 2 x 0.6 - 0.916 = 0.284

Hue auf Werte zwischen 0 und 1 normieren

Im nächsten Schritt wird der Winkel der Farbangabe HUE durch 360 geteilt.

H = HUE 360
H = 0,072222

Drei weitere Variablen speichern temporäre Werte für jeden Kanal: tR, tG und tB.

tR = H + 0.333
tG = H
tB = H - 0.333
tR = 0.40522 tG = 0,072222 tB = -0.260778

Drei weitere Voraussetzungen

  1. Die Werte tR, tG ud tB müssen zwischen 0 und 1 liegen.
  2. Wenn ein Wert negativ ist, muss 1 addiert werden.
  3. Wenn ein Wert größer als 1 ist, muss 1 subtrahiert werden.
tR = 0.40522 tG = 0,07222 tB = 0.73922

Für den letzten Schritt der Umrechnung von HSL zu RGB müssen noch Tests für jede der Farben durchgeführt werden.

Tests für Rot

  • Wenn 6 * tR < 1 : Rot = t2 + t1 - t2 * 6 * tR
  • Wenn 2 * tR < 1 : Rot = t1 Rot = 0.916 x 255 = 233,58
  • Wenn 3 * tR < 2 : Rot = t2 + t1 - t2 * 0.666 - tR * 6
  • Wenn 3 * tR > 2 : Rot = t2

Tests für Grün

  • Wenn 6 * tG < 1 : Grün = t2 + t1 - t2 * 6 * tG 0.284 + 0.632 * 6 * 0,072222 = 0.55786 * 255 = 142,25
  • Wenn 2 * tG < 1 : Grün = t1
  • Wenn 3 * tG < 2 : Grün = t2 + t1 - t2 * 0.666 - tG * 6
  • Wenn 3 * tG > 2 : Grün = t2

Tests für Blau

  • Wenn 6 * tB < 1 : Blau = t2 + t1 - t2 * 6 * tB 6 * 0.73922 > 1 also nächster Test
  • Wenn 2 * tB < 1 : Blau = t1 2 * 0.73922 > 1 also nächster Test
  • Wenn 3 * tB < 2 : Blau = t2 + t1 - t2 * 0.666 - tB * 6 3 * 0.73922 > 2 also nächster Test
  • Wenn 3 * tB > 2 : Blau = t2 0.284 * 255 = 72,42
1260 px
1387