PercentageColors

Testing Mr. @Jacob answer from http://stackoverflow.com/a/7128796/3786841

by matox

HTML

<ul class="spot"></ul>

CSS

.spot 
{
  width: 80%;
}

.spot li {
  float          : left;
  width          : 50px;
  border         : 2px solid white;
  border-left    : none;
  border-right   : none;
  padding        : 2px;
  box-shadow     : 0px -10px 0px rgba(0,0,0,0.08) inset, 0px 12px 0px rgba(0,0,0,0.2) inset, 0px 0px 5px rgba(0,0,0,0.2);
  list-style     : none;
  text-align     : center;
  color          : #333;
  font-family    : Verdana;
  opacity        : 0.8;
}

.spot li:hover {
  opacity : 1;
}

.spot li:first-child {
  border-left: 2px solid white;
}

.spot li:last-child {
  border-right: 2px solid white;
}

JavaScript

// Mister @Jacob's Anwser
var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
}  

for(var i = 0, l = 3; i <= l; i++)
{
	let r = Math.random();
  var li = $("<li>").css("background-color", getColorForPercentage( r ) )
  									.text( (r * 100).toFixed(0) + "%" );
  $(".spot").append( li );
}