JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<div id='colors'></div>

CSS

div {
    width:20px;
    height:20px;
}

JavaScript

function rainbow(numOfSteps, step) {
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1, g = f, b = 0; break;
        case 1: r = q, g = 1, b = 0; break;
        case 2: r = 0, g = 1, b = f; break;
        case 3: r = 0, g = q, b = 1; break;
        case 4: r = f, g = 0, b = 1; break;
        default: r = 1, g = 0, b = q; break;
    }
    return ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);

}

var html = [], total = index = 15, colors = [], color;

while(index--) {
    color = rainbow(total,index);
    colors.push(color)
    html.push('<div style="background-color:#'+color+'"></div>');
}

console.log(JSON.stringify(colors));
document.getElementById('colors').innerHTML = html.join('');