JavaScript: modificare la luminosità dei colori

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:

const lightenDarkenColor = (col, amt) => {
	let usePound = false;
	if (col[0] == "#") {
		col = col.slice(1);
		usePound = true;
	}
	let num = parseInt(col, 16);
	let r = (num >> 16) + amt;
	if (r > 255) {
		r = 255;
	} else if (r < 0) {
		r = 0;
	}
	let b = ((num >> 8) & 0x00FF) + amt;
	if (b > 255) {
		b = 255;
	} else if (b < 0) {
		b = 0;
	}
	let 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').addEventListener('click', () => {
	this.style.backgroundColor = lightenDarkenColor('#ff6666', -20);
}, false);