LightenDarken Color

by g30rg3

HTML

<div>
    <label>Input Color</label><input type="text" id="txtInputColor" value="#cfda5a,#f16d54,#96dedb,#ffcc00,#cf507b" />
    <label>Steps</label><input type="text" id="txtInputAmount" />
    <input type="button" id="btnLoad" value="Load" />
    <br/>
    <textarea id="txtOutput" rows=30 style="width:250px;">
        
    </textarea>
    <div id="colorContainer">
        
    </div>
</div>

CSS

.color{
    width:100px;
    height:20px;
    border:thin solid black;
    
}
#txtOutput{
    float:left;
}

#colorContainer{
    float:left;
}

JavaScript

$(document).ready(function(){

    $("#btnLoad").on("click",function(){
       
        
        var rawsteps = $('#txtInputAmount').val();
        var absSteps = Math.abs(rawsteps);
        var color = $('#txtInputColor').val().split(',');
        var colorContainer = $('#colorContainer');
        var output = "";
        var wrapStart =  'ColorTranslator.FromHtml("';
        var wrapEnd = '"),';
        colorContainer.empty();
        
        for(var i=0; i<color.length;i++){
            var nColor = shadeColor(color[i],rawsteps*1);
            colorContainer.append($('<div style="background-color:'+nColor+'" class="color" />'));
            
            
            
            output+= wrapStart + nColor + wrapEnd +'\r\n';
        }
        $('#txtOutput').val(output);
    });

});

function shadeColor(color, percent) {   
    var num = parseInt(color.slice(1),16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = (num >> 8 & 0x00FF) + amt, G = (num & 0x0000FF) + amt;
    return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
}

function LightenDarkenColor(col, amt) {
  
    var usePound = false;
  
    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }
 
    var num = parseInt(col,16);
 
    var r = (num >> 16) + amt;
 
    if (r > 255) r = 255;
    else if  (r < 0) r = 0;
 
    var b = ((num >> 8) & 0x00FF) + amt;
 
    if (b > 255) b = 255;
    else if  (b < 0) b = 0;
 
    var g = (num & 0x0000FF) + amt;
 
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
 
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
  
}