This template computes the hue value in degrees [0..360) in the HSL color space (as defined in standard CSS3), from a color specified in the sRGB color space. The returned value is rounded to one decimal (which preserves the precision of RGB colors whose components are specified in the standard range [0..255].

Syntax
{{RGBtoHSL.H|r|g|b}}
The range of the three parameters is [0..255] ; they can be any numeric expressions.
{{subst:RGBtoHSL.H|r|g|b|subst=subst:}}
To remplace the template invokation by the computed value when saving an article Wiki source.
Algorithm used
if r = g and g = b then
H = 0;
else if g >= r and g >= b then
if r > b
then H = 120 - 60 * (r - b) / (g - b);
else H = 120 + 60 * (b - r) / (g - r);
else if b >= r and b >= g then
if g > r
then H = 240 - 60 * (g - r) / (b - r);
else H = 240 + 60 * (r - g) / (b - g);
else
if b > g
then H = 360 - 60 * (b - g) / (r - g);
else H = 60 * (g - b) / (r - b);
return H round 1;
Examples
  • "{{RGBtoHSL.H|0|0|0}}" returns "0".
  • "{{RGBtoHSL.H|255|255|255}}" returns "0".
  • "{{RGBtoHSL.H|255|0|0}}" returns "0".
  • "{{RGBtoHSL.H|255|1|0}}" returns "0.2".
  • "{{RGBtoHSL.H|255|127.5|0}}" returns "30".
  • "{{RGBtoHSL.H|255|255|0}}" returns "60".
  • "{{RGBtoHSL.H|127.5|255|0}}" returns "90".
  • "{{RGBtoHSL.H|0|255|0}}" returns "120".
  • "{{RGBtoHSL.H|0|255|127.5}}" returns "150".
  • "{{RGBtoHSL.H|0|255|255}}" returns "180".
  • "{{RGBtoHSL.H|0|127.5|255}}" returns "210".
  • "{{RGBtoHSL.H|0|0|255}}" returns "240".
  • "{{RGBtoHSL.H|127.5|0|255}}" returns "270".
  • "{{RGBtoHSL.H|255|0|255}}" returns "300".
  • "{{RGBtoHSL.H|255|0|127.5}}" returns "330".
  • "{{RGBtoHSL.H|255|0|1}}" returns "359.8".
  • example for "sandybrown" = "#F4A460" = "rgb(244, 164, 96)" = "hsl(27.6, 0.871, 0.667)"
"{{RGBtoHSL.H|244|164|96}}" returns "27.6".
  • same example using subst
"{{subst:RGBtoHSL.H|244|164|96|subst=subst:}}" returns "27.6".


See also

edit
(By definition, Template:RGBtoHSL.H and Template:RGBtoHSV.H should give the same Hue value for any color. As of Jan 2021, this has not been tested yet.)