Color gradient

How to implement color gradients and elements along this gradient

HTML

<div id="colors"></div>

JavaScript

function rainbow(value, s, l, max, min, start, end) {
        value = ((value - min) * (start - end) / max)+end;
        return 'hsl(' + value + ','+s+'%,'+l+'%)';
    }
    
    function createRainbowDiv(start,end){
        var gradient = $("<div>").css({display:"flex", "flex-direction":"row",height:"100%"});
        for (var i = start; ((i <= end) && (i >= start)) || ((i >= end) && (i <= start)); 
            i += (end-start) / Math.abs(end-start)){
                gradient.append($("<div>").css({float:"left","background-color":rainbow(i, 100,50, Math.max(start,end), Math.min(start,end), start,end),flex:1}));
        }
        
        return gradient;
    }
    
    $("#colors").append(createRainbowDiv(0,100));
    $("#colors").css("width","500px").css("height","10px");