Color Shade Generator

by alexandermikhailov

HTML

<input type="color" id="hex" name="hex" value="#E1342A"/>
<input type="number" id="count" name="count" value="6"/>
<button id="shades">Get shades</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;
}

$("#shades").on("click", function() {
    // Get Value
    var colorHex = document.getElementById('hex').value;
    var count = document.getElementById('count').value;
  

    // Convert Value
    var colorRGB = hexToRgb(colorHex);
    
    var r = colorRGB.r;
    var g = colorRGB.g;
    var b = colorRGB.b;
    var gap = (255 / count)*0.5;
    
    for(var i=0; i < count; i++) {
        $("#colors").append('<li style="background:rgb(' + Math.round(r+(i*gap)) + ',' + Math.round(g+(i*gap)) + ',' + Math.round(b+(i*gap)) + ')"></li>');
    }
    
});