Breve tutorial per convertire il colore di una immagine in codice esadecimale.

Il titolo potrebbe spaventare i meno esperti. In realtà si tratta di un caso abbastanza semplice e frequente. Spesso, infatti, chi ha un sito ha bisogno di conoscere il codice da inserire per ottenere un determinato colore. Il caso classico è quello dello sfondo di una pagina: accanto al tag body occorre aggiungere un codice alfanumerico simile a questo “#F5F4F4” (che corrisponde al grigio chiaro).

Esistono sul web numerose tabelle con le palette dei colori che mostrano, accanto ad esse, il relativo codice esadecimale (composto da 6 caratteri che nella pagina vanno fatti precedere dal carattere “cancelletto”). Ma che fare se desideriamo riprodurre il colore che abbiamo visto in un sito e non ne conosciamo il comando? Chi si intende di programmazione o di fogli di stile andrà a spulciare nel sorgente. Ma gli altri?
Per chi dispone del programma Adobe Photoshop, la soluzione è abbastanza semplice. Ecco i passaggi.

1 ) Copiare la schermata utilizzando il tasto STAMP della tastiera, che fa una foto di quanto appare sul monitor.

2 ) Lanciare Adobe Photoshop, creare una nuova finestra ed incollare la foto della schermata scattata poco prima.

3 ) Selezionare lo strumento contagocce.

4 ) Con il contagocce posizionarsi sul punto di colore desiderato e fare click.

5 ) Sulla destra (di solito) è visibile il pannello del colore (se non è aperto, selezionarlo tramite il menù Window di Photoshop). Visualizzarlo e cliccare sulla linguetta COLOR (o COLORE).
Si noteranno tre numeri uno sopra all’altro, in corrispondenza della lettere R (= red = rosso), G (= green = verde) B (=blu). In questo caso, i numeri sono 128, 128, 128 che corrispondono al colore grigio scuro visibile nel quadratino a sinistra.

6 ) Collegarsi alla pagina http://www.webfract.it/GUIDA/rgbEsa.htm: è una delle tante che offrono la conversione automatica del codice RGB in codice esadecimale (si può anche fare una ricerca con Google digitando questi termini).

7 ) Andare sul pannello colorato in rosso, verde e blu ed inserire nelle tre caselle i numeri ottenuti con Photoshop. Poi, premere il tasto ESADECIMALE. Per fare una eventuale verifica, fare click sul pulsante PROVA COLORE.
Attenzione, i numeri che si notano nella immagine sottostante sono casuali e non corrispondono a quelli visibili nella immagine precedente.

8 ) Copiare il codice esadecimale che compare nella casella posta a destra del tasto “ESADECIMALE” ed incollarlo vicino al tag BODY o vicino ad eventuali altri comandi HTML presenti nella pagina su cui si sta lavorando.

Il gioco è fatto. Avremo il colore che desideravamo ottenere.