In questo articolo vedremo come creare degli strumenti per elaborare i colori con Javascript. Si tratta di veri e propri programmini che girano sul browser: chi non è pratico di Javascript ma lavora con pagine HTML e programmi di grafica potrà senz'altro saltare la parte relativa alla programmazione, ma credo che troverà utili gli esempi (e in particolare l'esempio finale).
Voglio solo sottolineare come ci siano libri interi dedicati alla teoria dei colori, un argomento decisamente vasto e tecnico. Rimando all'ottimo articolo «I colori e il loro uso nel web» per un'introduzione all'argomento.
Il sistema binario e la numerazione esadecimale
L'informazione minima all'interno di un computer è il bit, l'equivalente di una cifra per il sistema binario. Un bit può assumere solo due possibili valori: 0 e 1 (corrispondenti ai valori di verità falso e vero). Nel sistema binario, e quindi all'interno del computer, un numero viene codificato come una lunga sequenza di zeri e uni. L'operazione matematica di conversione da decimale a binario non è molto difficile, ma esula un po' troppo dallo scopo dell'articolo.
Otto bit formano un byte. Il sistema binario è basato sulla potenza del 2, e ha quindi due possibili cifre; quello decimale sulla potenza del dieci e ha dieci cifre. Il sistema esadecimale è composto da 16 cifre, queste possono assumere valore da 0 a 9 più le lettere da "A" a "F". La conversione da binario a esadecimale è semplice, e due sole cifre esadecimali possono rappresentare un byte, cioè 8 bit.
Rappresentazione dei colori in esadecimale
Nei computer i colori vengono rappresentati nel sistema RGB - ossia, Red, Green, Blue (Rosso, Verde e Blu). Ciascun color è rappresantato in 256 tonalità, quindi 8 bit (1 byte). In decimale i valori possibili sono tra zero e 255. I colori vengono espressi in 24 bit, generabili con 256 toni di rosso, di verde e di blu sono quindi oltre i 16 milioni. Nei fogli di stile la rappresentazione più versatile e diffusa è senz'altro quella esadecimale. Vediamo un esempio:
L'azzurro che vedete come sfondo dell'immagine sopra è in realta la somma di tre toni di rosso, verde e blu. Nella codifica esadecimale dei colori, dopo il cancelletto, seguono due cifre che indicano il rosso, due per il verde e due per il blu. Sarà chiaro che per manipolare i colori in esadecimale è importante estrarre le tre componenti RGB e lavorare in decimale.
Conversioni di base con Javascript
Javascript dispone di alcune utili funzioni per la trasformazione da esadecimale a decimale e viceversa: sono parte del linguaggio e servono per la manipolazione di numeri e stringhe. La funzione Javascript toString riceve un numero e lo converte nella stringa corrispondente in base 16. Il lavoro opposto lo fa la funzione parseInt.
Queste due funzioni ci verranno utilissime: vediamo le due funzioni di base che ho scritto per la conversione di un numero intero in stringa esadecimale e viceversa:
function DecToHex(n){
//converte da decimale (0..255) a esadecimale (stringa
a due caratteri)
hex=n.toString(16);
if(hex.length==1) hex="0"+hex; /*aggiunge lo zero
davanti se è un numero con una cifra
sola*/
return hex.toUpperCase();
}
function HexToDec(s){
//converte da stringa esadecimale a numero decimale
return parseInt(s,16);
}
Convertire una stringa esadecimale in RGB decimale e viceversa
Le due semplici funzioni che abbiamo appena visto vanno però estese: infatti, un colore viene espresso, sia in RGB esadecimale che in RGB intero, attraverso tre componenti. Quello che ci interessa è che nella codifica esadecimale risulti una stringa, composta dal cancelletto e le sei cifre, mentre nella codifica RGB decimale ci serviranno le tre componenti così da elaborarle agevolmente. Vediamo le due funzioni:
function RGB(c){
//restituisce la conversione esadecimale sotto forma
di array di interi
var r=new Array(3);
if(c.charAt(0)=="#") c=c.substr(1,6); //elimina
il cancelletto
for(i=0;i<3;i++)
r[i]=HexToDec(c.substr(i*2,2));
return r;
}
function HEX(c){
//riceve un vettore rgb in decimale e lo converte in stringa esadecimale
return ("#" + DecToHex(c[0])+ DecToHex(c[1]) + DecToHex(c[2]));
}
La funzione RGB riceve la stringa esadecimale, ne elimina il cancelletto se c'è e procede a converire a due a due le sue cifre, restituendo un array. Gli array sono collezioni di dati in Javascript, e sono l'unico modo per far restituire dati composti (ossia una serie di tre numeri in questo caso) dalla funzione.
Analogamente, la funzione HEX riceve un array e restituisce la stringa esadecimale corrispondente, anteponendo il cancelletto.
Generare un colore casuale
Disponiamo ora delle due funzioni di base per poter processare i colori. Il primo esempio genera un colore casuale, lo assegna come colore di sfondo al body e ne mostra la codifica esadecimale e RGB intero. Aggiornando la pagina attraverso il browser (tasto F5) verrà generato un altro colore. Vediamo allora come generare un colore casuale:
function randomColor(){
//elabora un colore casuale e ne restituisce la stringa esadecimale
rc=new Array(3);
for(i=0;i<3;i++)
rc[i]=Math.floor(Math.random() * 255);
return HEX(rc);
}
La funzione Math.random restituisce un numero con la virgola compreso tra zero e uno. Moltiplicandolo per 255 otteniamo quindi un numero con la virgola compreso tra zero e 255. La funzione Math.floor ci restituisce solo la parte intera. Viene così generato un array di tre interi casuali che viene poi convertito in stringa esadecimale.
Ora, nella pagina HTML dell'esempio l'unico elemento all'interno del body è un div id="content" vuoto. Questo ci servirà per aggiungere il testo attraverso il DOM. La funzione anonima che viene invocata all'onload del body è la seguente:
onload=function(){
c=randomColor();
document.getElementsByTagName("body")[0].style.backgroundColor=c;
t="hex: "+c;
d=document.getElementById("content");
d.appendChild(document.createTextNode(t));
d.appendChild(document.createElement("br"));
cr=RGB(c);
t="rgb: ("+ cr[0]+ ","+ cr[1]+ "," +cr[2]+ ")";
d.appendChild(document.createTextNode(t));
d.appendChild(document.createElement("br"));
d.appendChild(document.createTextNode("premi "Aggiorna" per un altro colore"));
}
Questa attribuisce il background-color del body. A tal proposito, ricordo che le proprietà CSS composte da due o più parole e che includono un trattino, in Javascript vengono rimpiazzate dall'equivalente senza trattino e con la maiuscola. La funzione aggiunge poi il testo grazie ad alcune funzioni DOM. La funzione createTextNode genera un nodo di testo che verrà aggiunto al div id="content" attraverso una appendChild. Grazie a quest'ultima si aggiungono dei br creati con la createElement. L'esempio è così ultimato. Disponendo delle funzioni di base per elaborare i colori, possiamo spingerci oltre. Lo vedremo nella seconda parte, quando realizzeremo un generatore di palette armoniche per la scelta dei colori.
Quante volte vi sarà capitato di rimanere un po' in crisi di fronte alla scelta di un set di colori per il vostro sito? Esistono molte utility in Rete che possono facilitare il compito ai meno fantasiosi: se ne parla anche nell'articolo «Scegliere il colore giusto».
Vedremo ora, nel prossimo esempio, come sia possibile generare una palette di colori con Javascript. Si tratta di una pagina HTML che crea una palette di righe sulla base del colore scelto, o generato casualmente, più quella dei cinque colori ottenuti permutando i valori RGB. Per ciascuna coppia di righe, la prima fornisce le tonalità verso il bianco, e quindi i colori più chiari, e la seconda verso il nero. Questo è possibile grazie alla funzione Mix, che riceve come parametri i due colori da mixare in stringa esadecimale e la percentuale da attribuire al primo dei due. Vediamola:
function Mix(c1,c2,p){
/*riceve due colori rappresentati in stringhe esadecimali e una percentuale.
Restuisce il mix*/
var r=new Array(3);
cv1=RGB(c1);
cv2=RGB(c2);
for(i=0;i<3;i++)
r[i]=Math.floor(cv1[i]*(p/100)+cv2[i]*(1-p/100));
return HEX(r);
}
Questa funzione è la parte essenziale di tutto l'esempio. Riceve due stringhe esadecimali e di ciascuna componente RGB fa il mix a seconda della percentuale. Infine il colore così risultante viene convertito in stringa esadecimale.
Lo script è decisamente più complesso del primo esempio, e non potremo vederlo passo passo: è comunque commentato così da poter indicare le istruzioni più importanti. Ci tenevo però a soffermarmi su uno degli passaggi essenziali della funzione genPalette, quella che genera la palette di colori:
cell=document.createElement("div");
cell.style.backgroundColor=res;
cell.title=res;
cell.onclick=function(){Show(this.title);}
cell.ondblclick=function(){genPalette(this.title);}
palettediv.appendChild(cell);
Il contenitore della palette è un div che viene popolato da tanti piccoli div del colore elaborato. Questi vengono creati con il DOM grazie a vari cicli for annidati. Una volta creato un div, viene assegnato il colore di sfondo, l'attributo title e le funzioni di gestione degli eventi al click singolo e doppio. Lascio all'appassionato l'approfondimento del resto del codice.
Conclusioni
Termina qui l'introduzione ai colori e alla loro elaborazione con Javascript. Questo linguaggio di scripting si rivela particolarmente utile e versatile, e con un po' di dimestichezza con il DOM le possibilità di creazione sono veramente moltissime. In questo caso abbiamo realizzato un vero e proprio programma che potrebbe esserci utile nella scelta dei colori per le pagine HTML. La compatibilità degli esempi visti è buona: dovrebbe essere estesa ai browser moderni e DOM-compatibili: sono stati testati con Internet Explorer, Opera e Mozilla su PC e Safari per Mac.
Il codice degli esempi è disponibile per il download, e lo script è incorporato nella pagina. Buon divertimento.
