Tavolozza dei colori in Javascript

Non sono un grosso esperto in grafica, per dirla tutta non ho nessuno spirito artistico, ma mi sono trovato davanti al problema di voler generare una tavolozza dei colori per una scelta in pop-up e non sapevo come generarla, perché come sapete sono tre le "dimensioni" dei colori, cioè il numero minimo di parametri che definiscono un colore, mentre lo schermo è bi-dimensionale, ha solo l’alto e il basso, quindi è adatto a variazioni bidimensionali. Detto in chiare lettere, la cosa più naturale è far crescere un parametro al crescere dell’altezza e l’altro della larghezza, ma qui ne abbiamo tre.

Da programmatore cercavo una soluzione che generasse "da sola" la tavolozza, non volevo specificare io in che ordine e quali colori mettere. Inoltre la cercavo con certe caratteristiche: la presenza dei colori di base (000FF, 00FF00, FF0000, 000000, FFFFFF) in primis, una gradevolezza visiva e una preponderanza di colori di base nei vertici. Dopo molte prove, la soluzione a cui sono arrivato è questa:

gradiente

È generata facendo variare un parametro in una direzione, mentre gli altri due variano nell’altra direzione, ma alternativamente: entrambi partono bassi, ma mentre uno cresce e decresce, l’altro quando ha raggiunto il massimo ricomincia il giro, in questo esempio mentre il blu va tranquillo da 00 a FF, il rosso fa ’00′, ’44′, ’88′, ‘CC’, ‘FF’, ’00′, ’44′, ’88′, ‘CC’, ‘FF’ e il verde fa ’00′, ’44′, ’88′, ‘CC’, ‘FF’, ‘FF’, ‘CC’, ’88′, ’44′,’00′.

L’algoritmo che ho scritto per generare il tutto è relativamente semplice, bisogna stabilire solo quanto grande deve essere la tabella (numero pari) e i numeri da passare, in varia ci sarà il valore del colore che fa il giro, in varib quello che cresce e decresce, in varic il rimanente che è tranquillo, il codice si riferisce all’esempio (chiaramente dipende da come associ colore a cella ;) )

var varia = ['00', '33', '99', 'CC', 'FF'];
var varib = ['00', '33', '99', 'CC', 'FF', 'FF', 'CC', '99', '33', '00'];
var varic = ['00', '33', '44', '66', '77', '99', 'AA', 'CC', 'EE', 'FF'];
var colori = new Array(10);
var j;
for (var i=0;i<10;i++) {
	colori[i] = new Array(10);
	for (j=0;j<10;j++) {
		colori[i][j] = varia[(j-5>=0? j-5 : j)]+varib[j]+varic[i];
	}
}

Codice piccolo e snello, spero anche leggibile, piccola nota, ho definito var j fuori dal ciclo altrimenti sarebbe stato definito 10 volte, non comporta nessun errore ma non mi piace.

Aggiornamento:

Ecco una versione a 16 colori, un poco più gradevole

gradiente

%d bloggers like this: