Invert Color (Advanced)

HTML

<button id="btn-invert">Generate</button>&nbsp;&nbsp;
<button id="btn-invert-bw">Generate (BW)</button>
<br /><br />
<div id="colors"></div>

CSS

.box {
    float: left;
}
.box > span {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 13px;
    padding: 10px 15px;
    display: inline-block;
}
button {
    width: 100px;
    height: 30px;
}

JavaScript

function invertColor(hex, bw) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
    	return (r * 0.299 + g * 0.587 + b * 0.114) > 186
        	? '#000000'
            : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
	b = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}

function getRandomColor() {
    var color = Math.round(Math.random() * 0x1000000).toString(16);
    return "#" + padZero(color, 6);
}

function generate(bw) {
	$('#colors').empty();
    var i, box, color, bgColor;
    for (i = 0; i <= 41; i++) {
        bgColor = getRandomColor();
        color = invertColor(bgColor, bw);
        box = $('<div><span>' + bgColor.toUpperCase() + '</span></div>')
            .addClass('box')
            .css({
                'color': bgColor,
                'background-color': color
            });
        $('#colors').append(box);
    }
}

$('#btn-invert').on('click', function() { generate(false); })
$('#btn-invert-bw').on('click', function() { generate(true); })