title: Javascript - Generate Different Shades of the Same Color
body: <p>I would like to be able to call a function that takes a base color and returns an array of values that correspond to different shades of the same color. The array can contain either hex values or rgba() values. I would like to be able to input the amount of desired shades as well. The amount of shades would then also be able to be used as a metric to increment the shade. For example if I wanted the output have 3 different shades, the 1st shade would be 1/3 of the base.. however that math would work... Additionally, In some situations the 1st shade may need to be 100% transparent so I would like to accept an argument for the initial alpha. I've organized what I think would be the basic logic of the function but the math is unclear to me. </p>
  
  <pre><code>        var buildColorStops = function (baseColor,numberOfValues,initialAlpha) {
              var b = baseColor;
              var n = numberOfValues //expected number of colors in the output. If n was 3 results would be [light blue, blue(base), dark blue] (# or rgba will work)
              var d = 1 / n; // if number of values was 5 d would represent 1/5 of the base. 
              var ia = initialAlpha; // some situations may require the first color to be 100% transparent 
  
              var outputArray = [];
              var i = 0;
              while (i &lt; n) {
                  if (i == 0) {
                      //...math on base color &amp; incorporate initial alpha
                      outputArray.push("result of math on base")
                  }
                  else {
                      //...math on base color by incrementing d or 1/n
                      outputArray.push("result of math on base")
                  }   
              }
  
              return outputArray;
          }// end of buildColorStops
  </code></pre>