Color Shading

HTML

<div class="colors">
    <div class="darkest">.</div>
    <div class="darker">.</div>
    <div class="base">.</div>
    <div class="lighter">.</div>
</div>

<h4><a href="http://www.w3schools.com/tags/ref_colorpicker.asp">Click here for color picker</a></h4>

JavaScript

var MinColor = {
    shade: function(color, percent) {
        // source: http://stackoverflow.com/a/13542669/1093087
        // percent: -100 to 100
        // require hex code with #
        // returns hex with # (e.g. #f7f7f7)
        if ( color[0] != '#' ) {
            throw "Invalid color: " + color + "; requires hex code like '#ababab'";
        }
        else {
            color = color.slice(1);
        }

        var num = parseInt(color,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);
    },
};

var base = '#6B6C6F';
var diff = 25;
var darkest = MinColor.shade(base, diff  * -1);
var darker = MinColor.shade(base, diff / 2  * -1);
var lighter = MinColor.shade(base, diff);
var text_color = MinColor.shade(base, diff * 2);

$('.darkest').css('background-color', darkest).html(darkest);
$('.darker').css('background-color', darker).html(darker);
$('.base').css('background-color', base).html(base);
$('.lighter').css('background-color', lighter).html(lighter);

$('div.colors div').css('color', lighter);
$('div.colors div.lighter').css('color', darkest);