Color gradient

How to implement color gradients and elements along this gradient

by Andreas Neumann

HTML

<div id="colors"></div>http://jsfiddle.net/rootandy/LUG3X/#run

JavaScript

function rainbow(value, max, min, colorrange) {
    var start = 150;
    switch (colorrange) {
        case "circle":
            start += 120;
        case "heatmap":
            start += 90;
        case "trafficlights":
            start += 0;
            break;
    }
    value = (value - min) * start / max;
    return 'hsl(' + value + ',100%,50%)';
}

var start = 250;
var end = 0;

for (var i = start; i > end; i -= 5) {
    $('<b>X</b>').css({
        color: rainbow(i, Math.max(start, end), 0, "heatmap")
    }).appendTo('#colors');
}