JSFiddle - React, Tailwind, and code Playground

by francisfortier

JavaScript

function hsl2rgb(h, s, l) {
    var c = (1 - Math.abs(2 * l - 1)) * s;
    var h1 = h / 60;
    var x = c * (1 - Math.abs(h1 % 2 - 1));
    var rgb;
    
    if (h1 < 1) rgb = [c, x, 0];
    else if(h1 < 2) rgb = [x, c, 0];
    else if(h1 < 3) rgb = [0, c, x];
    else if(h1 < 4) rgb = [0, x, c];
    else if(h1 < 5) rgb = [x, 0, c];
    else if(h1 < 6) rgb = [c, 0, x];
    else rgb = [0, 0, 0];
    
    var m = l - (0.5 * c);
    
    return "#" + padLeft(Math.floor((rgb[0] + m) * 255).toString(16), 2, '0') + 
            padLeft(Math.floor((rgb[1] + m) * 255).toString(16), 2, '0') +
            padLeft(Math.floor((rgb[2] + m) * 255).toString(16), 2, '0');
}

function padLeft(s, w, c) {
    while(s.length < w)
    {
        s = c + s;
    }
    
    return s;
}

var table = document.createElement("table");
var tbody = document.createElement("tbody");

table.setAttribute("border", "1");

for (var i = 0; i < 20; i++)
{
    var tr = document.createElement("tr");
    
    for (var j = 0; j < 20; j++)
    {
        var td = document.createElement("td");
        
        td.style.width = "1em";
        td.style.height = "1em";
        td.style.backgroundColor = hsl2rgb(i / 20.0 * 360, j / 20.0, 0.5);
        
        tr.appendChild(td);
    }
    
    tbody.appendChild(tr);
}

table.appendChild(tbody);

document.body.appendChild(table);