JSFiddle - React, Tailwind, and code Playground

by alexandermikhailov

HTML

<input type="text" id="hex" name="hex" />
<button id="sat">Saturation</button>
<button id="vib">Vibrance</button>
<button id="hue">Hue (Soon?)</button>
<ul id="colors">
</ul>

CSS

#colors {list-style-type:none; margin:0; padding:0;}
#colors li {width:25px; height:25px; margin:1px; float:left;}

JavaScript

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

$("#sat").on("click", function() {
    // Get Value
    var colorHex = document.getElementById('hex').value;
    
    // Convert Value
    var colorRGB = hexToRgb(colorHex);
    
    var r = colorRGB.r;
    var g = colorRGB.g;
    var b = colorRGB.b;
    
    for(var i=0; i < 30; i++) {
        $("#colors").append('<li style="background:rgb(' + (r+(i*30)) + ',' + (g+(i*30)) + ',' + (b+(i*30)) + ')"></li>');
    }
    
});