Come trovare il codice di un colore per il tuo sito web

A qualunque tipologia di progetto web si lavori, il colore, se utilizzato sapientemente, oltre a migliorare l’estetica e la leggibilità di ogni pagina è anche in grado di trasformarsi in un importantissimo strumento nel campo del marketing e della pubblicità. Secondo la psicologia del colore infatti, questo sarebbe in grado di influenzare stati d’animo, decisioni e prime impressioni degli utenti che visualizzano un certo prodotto digitale. Lo studio dell’impatto dei colori sul Marketing ha rivelato che il 90% dell’opinione che si viene a generare su un prodotto o sul brand ad esso collegato, la prima volta che lo si vede, è praticamente basata tutta sul colore. La “Color research and application” ci rivela invece un’altro aspetto molto importante: il pubblico online è maggiormente attratto da brand o siti che utilizzano un colore differente rispetto ai competitor. Questo perché il nostro cervello è alla continua ricerca di novità, quel tratto distintivo che differenzia visivamente un articolo da un altro. Ecco ora venire a galla l’importanza di poter disporre di colori che possano rappresentare al meglio il messaggio del brand e che siano capaci di costruire associazioni mentali efficaci. La scelta non è assolutamente semplice: vanno studiati i significati che ogni colore nasconde e quelli che il cervello associa a determinate  

sensazioni, le preferenze in base al genere e all’età, prima di poter passare all’azione. Per poterli poi applicare al sito è necessario conoscere precisamente il valore della cromia che si vuole utilizzare.

Scoprire i valori esadecimali

I colori HTML sono definiti attraverso il sistema RGB (red, green, blue) che sintetizza i primari additivi. Il valore di ogni elemento passa da 0 a 225, numeri che indicano rispettivamente minima e massima presenza di quel determinato colore. Sui siti web, nel linguaggio html, per definire un colore è invece necessario trovare il giusto equilibrio tra valori esadecimali, una procedura molto lunga e complicata se non si ha la possibilità di accedere a dei tool specifici che il web mette a disposizione. Questi strumenti offrono delle tavolozze per il colore che permettono di estrarre in modo diretto la combinazione di esadecimali ed eventualmente anche quelli RGB:

1- Il tool più semplice che permette la cattura dei colori dallo schermo e che consente di estrapolare il codice in modo da utilizzarlo sul proprio sito, è ColorPix. Si tratta di un piccolo programma portable, senza installazione, che è in grado di riferire i codici RGB e quello esadecimale del colore su cui si ferma la freccia del mouse. Per estrarre il colore da un altro sito o da un’immagine nella sua più precisa sfumatura, si usa la freccia del mouse con ColorPix aperto per leggere quale codice si deve digitare per usarlo di nuovo. Grazie all’opzione magnifier è anche possibile ingrandire una piccola porzione dello schermo per raccogliere il dettaglio preciso che successivamente verrà tradotto in modo automatico nel suo codice RGB, HEX, HSB e CMYK.

2- Un’altra soluzione potrebbe essere quella di utilizzare lo strumento offerto da w3schools, un color picker che permette di ottenere codice colore scegliendo da una tavolozza, inserendo direttamente il nome del colore oppure attraverso l’uso di HTML5. Dopo aver inserito l’input testuale o visivo, il sito genererà in pochi secondi l’esadecimale e il valore RGB corrispondenti alla scelta.

3- L’ultima risorsa, e forse la più completa, viene offerta da imagecolorpicker.com, un’app completamente online che permette di caricare immagini e foto da cui recuperare il valore HTML, RGB e HSV di ogni minimo dettaglio. Anche solo attraverso l’inserimento dell URL si potrà visualizzare l’immagine che più ci interessa analizzare, in modo da catturare una schermata della risorsa in questione.

4- Anche Firefox e Google Chrome hanno per predisposizione uno strumento che consente di analizzare le immagini sullo schermo a fine di estrarne i codici esadecimali di ogni colore. Chiamato Colorzilla, questa estensione aggiunge un contagocce nell’angolo in alto a destra del browser che se cliccato aziona un cursore da cui poter ottenere tutte le informazioni utili sulla sfumatura cromatica del punto indicato.