title: How can I iterate over easily-differentiated colors? (jsfiddle included)
body: <p>For example: I'm generating a line chart that shows the sales performance of my client's stores. The user will be submitting store numbers (1-200) and the graph will draw a line for each store. I need a function that will return one color for each store and I'd like the colors to look significantly different from one another.</p>
  
  <p>I'm pretty close to having this working.</p>
  
  <p>Here's a jsfiddle that iterates over hues:
  <a href="http://jsfiddle.net/cabichandani/ub3H9/5/" rel="nofollow">http://jsfiddle.net/cabichandani/ub3H9/5/</a></p>
  
  <pre><code>var scale = 200;
  var hueSkip = 5;
  
  for (var storeNumber = 1; storeNumber &lt; scale; storeNumber++) {
      var h = storeNumber/scale;
      var color = getColor(h);
      var colorString = getColorString(h);
      $("#store-list")
          .append('&lt;li style="background-color:' + 
                  colorString + 
                  ';"&gt;Store: ' + 
                  storeNumber + ' hue:' + 
                  h.toFixed(3) + ' color:' + 
                  colorString + '&lt;/li&gt;');
  }
  
  function getColorString(hue) {
      var color = getColor(hue);
      return "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
  }
  
  function getColor(hue) {
      var huePercent = hue * 100;
      var hueSkipAmount = hueSkip * huePercent;
      var newHuePercent = (huePercent + hueSkipAmount) % 100;
      var newHue = newHuePercent / 100;
  
      return hslToRgb(newHue,1,0.5);
  }
  
  /**
   * Converts an HSL color value to RGB. Conversion formula
   * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
   * Assumes h, s, and l are contained in the set [0, 1] and
   * returns r, g, and b in the set [0, 255].
   *
   * @param   Number  h       The hue
   * @param   Number  s       The saturation
   * @param   Number  l       The lightness
   * @return  Array           The RGB representation
   */
  function hslToRgb(h, s, l){
      var r, g, b;
  
      if(s == 0){
          r = g = b = l; // achromatic
      }else{
          function hue2rgb(p, q, t){
              if(t &lt; 0) t += 1;
              if(t &gt; 1) t -= 1;
              if(t &lt; 1/6) return p + (q - p) * 6 * t;
              if(t &lt; 1/2) return q;
              if(t &lt; 2/3) return p + (q - p) * (2/3 - t) * 6;
              return p;
          }
  
          var q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;
          var p = 2 * l - q;
          r = hue2rgb(p, q, h + 1/3);
          g = hue2rgb(p, q, h);
          b = hue2rgb(p, q, h - 1/3);
      }
  
      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  }
  
  /**
   * Converts an RGB color value to HSL. Conversion formula
   * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
   * Assumes r, g, and b are contained in the set [0, 255] and
   * returns h, s, and l in the set [0, 1].
   *
   * @param   Number  r       The red color value
   * @param   Number  g       The green color value
   * @param   Number  b       The blue color value
   * @return  Array           The HSL representation
   */
  function rgbToHsl(r, g, b){
      r /= 255, g /= 255, b /= 255;
      var max = Math.max(r, g, b), min = Math.min(r, g, b);
      var h, s, l = (max + min) / 2;
  
      if(max == min){
          h = s = 0; // achromatic
      }else{
          var d = max - min;
          s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min);
          switch(max){
              case r: h = (g - b) / d + (g &lt; b ? 6 : 0); break;
              case g: h = (b - r) / d + 2; break;
              case b: h = (r - g) / d + 4; break;
          }
          h /= 6;
      }
  
      return [h, s, l];
  }
  </code></pre>
  
  <p>I have this concept called "hue skip" that tries to skip over colors that look too similar.</p>
  
  <p>With a hueSkip of 5, I can graph stores 1-6 together and they are easily-differentiate red-yellow colors. But If I put 10 and 11 on the same graph, they look like nearly the same shade of green.</p>
  
  <p>I'd like to improve the function to dish out more easily-differentiated colors, or just take another approach entirely.</p>