title: RGB to HSL conversion
body: <p>I'm creating a Color Picker tool and for the HSL slider, I need to be able to convert RGB to HSL. When I searched SO for a way to do the conversion, I found this question <a href="https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion">HSL to RGB color conversion</a>.</p>
  
  <p>While it provides a function to do conversion from RGB to HSL, I see no explanation to what's really going on in the calculation. To understand it better, I've read the <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" rel="noreferrer">HSL and HSV</a> on Wikipedia.</p>
  
  <p>Later, I've rewritten the function from the "HSL to RGB color conversion" using the calculations from the "HSL and HSV" page.</p>
  
  <p>I'm stuck at the calculation of hue if the R is the max value. See the calculation from the "HSL and HSV" page:</p>
  
  <p><a href="https://i.stack.imgur.com/c6FL6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/c6FL6.jpg" alt="enter image description here"></a></p>
  
  <p>This is from another <a href="https://nl.wikipedia.org/wiki/HSL_(kleurruimte)#Omzetting_van_RGB_naar_HSL" rel="noreferrer">wiki page</a> that's in Dutch:</p>
  
  <p><a href="https://i.stack.imgur.com/VJrSc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/VJrSc.jpg" alt="enter image description here"></a></p>
  
  <p>and this is from the <a href="https://stackoverflow.com/a/9493060/2202732">answers</a> to "HSL to RGB color conversion":</p>
  
  <pre><code>case r: h = (g - b) / d + (g &lt; b ? 6 : 0); break; // d = max-min = c
  </code></pre>
  
  <p>I've tested all three with a few RGB values and they seem to produce similar (if not exact) results. What I'm wondering is are they performing the same thing? Will get I different results for some specific RGB values? Which one should I be using?</p>
  
  <pre><code>hue = (g - b) / c;                   // dutch wiki
  hue = ((g - b) / c) % 6;             // eng wiki
  hue = (g - b) / c + (g &lt; b ? 6 : 0); // SO answer
  </code></pre>
  
  <p></p>
  
  <pre><code>function rgb2hsl(r, g, b) {
      // see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
      // convert r,g,b [0,255] range to [0,1]
      r = r / 255,
      g = g / 255,
      b = b / 255;
      // get the min and max of r,g,b
      var max = Math.max(r, g, b);
      var min = Math.min(r, g, b);
      // lightness is the average of the largest and smallest color components
      var lum = (max + min) / 2;
      var hue;
      var sat;
      if (max == min) { // no saturation
          hue = 0;
          sat = 0;
      } else {
          var c = max - min; // chroma
          // saturation is simply the chroma scaled to fill
          // the interval [0, 1] for every combination of hue and lightness
          sat = c / (1 - Math.abs(2 * lum - 1));
          switch(max) {
              case r:
                  // hue = (g - b) / c;
                  // hue = ((g - b) / c) % 6;
                  // hue = (g - b) / c + (g &lt; b ? 6 : 0);
                  break;
              case g:
                  hue = (b - r) / c + 2;
                  break;
              case b:
                  hue = (r - g) / c + 4;
                  break;
          }
      }
      hue = Math.round(hue * 60); // °
      sat = Math.round(sat * 100); // %
      lum = Math.round(lum * 100); // %
      return [hue, sat, lum];
  }
  </code></pre>