color gradient

by rwhal06

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div>

</div>

CSS

div {
  width: 100px;
  height: 100px;
  float: left;
}

JavaScript

/**
 * http://stackoverflow.com/a/17267684/470749
 * Change the start and end values to reflect the hue map
 * Reference : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png
 *    0   – red
 *    60  – yellow
 *    120 – green
 *    180 – turquoise
 *    240 – blue
 *    300 – pink
 *    360 – red
 *    Responster.com uses for 6 shades from green to red: 
 *    rgb(81, 164, 81) hsl(120, 34%, 48%)
 *    rgb(188, 204, 79) hsl(68, 55%, 55%)
 *    rgb(218, 203, 68) hsl(54, 67%, 56%)
 *    rgb(249, 187, 56) hsl(41, 94%, 60%)
 *    rgb(238, 153, 62) hsl(31, 84%, 59%)
 *    rgb(205, 93, 76) hsl(8, 56%, 55%)
 */
function getColorFromPercent(percent, start, end) {
  if (typeof start === 'undefined') {
    start = 0;
  }
  if (typeof end === 'undefined') {
    end = 120;
  }
  var a = percent,
    b = (end - start) * a,
    c = b + start;
  return 'hsl(' + c + ', 60%, 55%)';
}

function colorizeItems(items) { //IMPORTANT: this unforunately affects future elements (questions and pages) too, so you'll need to call removeAttr('style') otherwise.
  var n = items.length;
  var numMiddleColors = n - 1;
  $.each(items, function(k, v) {
    var percent = (numMiddleColors - k) / numMiddleColors;
    console.log('percent', percent);
    var color = getColorFromPercent(percent);
    $(v).css({
      //'background': 'linear-gradient(to right, ' + color + ' 0%,rgba(255,255,255,0) 4%, rgba(255,255,255,0) 96%, ' + color + ' 100%)',
      //'background': 'linear-gradient(to right, ' + color + ' 0%,rgba(255,255,255,0) 8%',
      //border: '1px solid ' + color,
      'background': color,
      //background: color,
      //border: '1px solid hsl(0, 0%, 100%)'
    }).html(color);
  });
}

$(document).ready(function() {
  colorizeItems($('div'));

});