JavaScript: rendere i colori più chiari o più scuri

I colori esadecimali si prestano a svariate manipolazioni tramite JavaScript. Una di queste riguarda la possibilità di creare colori più chiari o più scuri partendo da un colore di base.

Possiamo creare la seguente funzione di utility:

var lightenDarkenColor = function (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);
}

La funzione accetta due parametri: il primo è il colore esadecimale di partenza, il secondo è il coefficiente numerico per rendere il colore più chiaro o più scuro. Un valore positivo rende il colore più chiaro, mentre uno negativo lo scurisce. Esempio:

document.getElementById('test').onclick = function() {
	this.style.backgroundColor = lightenDarkenColor('#ff6666', -20);

};