Colori sul web, come funzionano?

 In Web design

I colori sul web come funzionano? Che significato possono avere? Tecnicamente parlando, sui monitor, un colore è definito in base alla percentuale di rosso, verde e blu (RGB) poiché questi sono i colori primari che l’occhio umano percepisce con maggiore facilità. Si tratta di un modello cromatico additivo, in quanto si aggiungono le tre componenti di colore per ottenere un colore. La gamma cromaticao (“gamut”) è composta da 16,777,216 colori e copre una parte di tutta la gamma che è in grado di percepire l’occhio.

I colori sul web: accenno alle origini del metodo RGB

Il metodo RGB è diffuso in tutti gli apparecchi elettronici, dalla TV LED di casa fino ai tablet per arrivare ai colori sul web. I primi esordi di questo standard risalgono al 1861, quando i primi esperimenti con la fotografia a colori di Maxwell richiedevano tre passaggi separati e tre lastre. Per poter riprodurre un’immagine a colori, era necessario proiettare tre lastre perfettamente sovrapposte in una camera oscura. Nel campo televisivo, i primi tentativi di trasmettere immagini a colori facevano uso di parti meccaniche (John Logie Baird, 1928). Si trattava di ruote colorate che venivano fatte girare. Nel 1938 è arrivata la tecnologia CRT a cui siamo abituati. In campo informatico, lo standard VGA nel 1987 ha permesso la diffusione di monitor capaci di mostrare un ampio spettro RGB. Nel 1992 le riviste pubblicizzavano fortemente hardware “truecolor Super VGA”. Fin’ora, pertanto, niente colori per il web.

RGB, standard per i colori sul web

Un colore in RGB non viene reso in maniera precisissima e identica su ogni dispositivo. Al contrario, la resa cromatica dipende dalle caratteristiche hardware. Per poter visualizzare una foto e i relativi colori sul web (nello stesso modo), attraverso un iMac, un monitor Acer o una TV LED, viene impiegato, possiamo dire persino largamente adottato, il profilo colore sRGB. Citando Marco Toscano di digitalpublishingnews.it:

Lo spazio colore sRGB è stato introdotto da Microsoft e HP perché rappresenta i colori riproducibili con le più comuni periferiche digitali (monitor e stampanti consumer). Lo spazio colore sRGB include però solo il 35% dei colori visibili dall’occhio umano e solitamente è assegnato alle immagini realizzate con macchine fotografiche consumer. I monitor standard hanno un profilo colore molto simile ad sRGB e non pemettono perciò una corretta visualizzazione di tutti i colori riproducibili in stampa, in particolare i verdi e i blu scuri. Rispetto ad Adobe RGB questo profilo è molto ridotto e non ci permette perciò di ottenere dei risultati ottimali utilizzandolo come spazio di lavoro impostato nei programmi di grafica.

Il profilo sRGB, pur presentando dei limiti, è lo standard ICC per le fotografie sul web. Toscano cita il profilo Adobe RGB, il quale ha una gamma più ampia ma necessita di un monitor professionale. Pertanto, le immagini sul web vanno salvare con il profilo sRGB! In Photoshop, ad esempio, alla finestra “Salva per il web…” è possibile convertire un’immagine nel profilo sRGB.

colori_convert_to_sRGB

Come rappresentare i colori con il CSS

I monitor supportano il profilo colore sRGB, pertanto la paletta di colori web si vede allo stesso modo ovunque. Riallacciandoci agli articoli precedenti, il CSS permette di specificare un colore per il testo oppure un colore di sfondo. Siamo in pieno ambito di colori per il web. Ricordiamo la sintassi.

p {
color: #000;
}
div {
background-color: #666;
}

Come fare, affinché il browser mostri un colore che abbiamo scelto? Sul web, ci sono tre modus operandi complementari. In ordine di importanza:

  1. inserendo il valore esadecimale (metodo preferito dall’autore).
  2. specificando i valori RGB;
  3. inserendo il nome del colore (l’autore non lo usa mai);

Il metodo numero 1 rappresenta il metodo maggiormente diffuso e quello che a modesto parere dell’autore andrebbe usato. Per ogni canale RGB (rosso, verde, blu) vengono indicati due valori. Immaginate di avere due+due+due LED. La sequenza di 6 crea il colore. Ci sono ben 16,777,216 colori. Per capire come funziona, iniziamo dalle basi.

Per capire i colori esadecimali sul web

ColoreValore esadecimale
#000000 (ovvero: LED spenti)
#ffffff (ovvero: LED accesi al massimo)
#666666 (ovvero: LED accesi allo stesso modo, quindi grigio uniforme)
#ff0000 (ovvero: solo i LED rossi sono accesi)

E via dicendo. Ogni programma di web design e di grafica offre una paletta di colori che permette di ottenere subito ogni colore esadecimale che si vuole. L’autore tende a scrivere i colori esadecimali in minuscolo, per praticità e coerenza con la sintassi CSS. Cosa succede allorquando il valore esadecimale è composto da valori identici? Easy! Si può abbreviare la sintassi e utilizzare soltanto tre valori. Per capirci, #000000 diventa #000.

Il metodo numero 2 permette di esprimere un colore attraverso i valori numerici RGB, da 0 a 255. Ad esempio, rgb(255,0,0)indica il rosso.

Il terzo e ultimo metodo permette di scrivere veramente il nome del colore in inglese, ad esempio “orange” o “blue”. L’autore non si serve mai di questo metodo, in quanto non permette un controllo raffinato del colore.

Colori, psicologia e palette

Tolta di mezzo la tecnica, veniamo ad alcuni aspetti psicologici e percettivi di base. I colori suscitano emozioni nelle persone, i colori si percepiscono con i sensi. Colori troppo accesi danno fastidio. I colori detti caldi (giallo, arancione, rosso) vengono sentiti come positivi e decisi. I colori più sul pastello, invece, ispirano fiducia. Per un approfondimento, si consiglia la lettura dell’ottimo articolo “Grafica web e psicologia del colore: come i colori comunicano con l’inconscio”.

I colori che vengono scelti per un progetto web creano una vera e propria paletta cromatica (a partire da quelli della corporate identity). Un utilizzo ragionato del colore permette di creare gerarchie visive e di controllare quali elementi si desidera evidenziare. Un sito pieno di colori confonde l’utente. Al contrario, un progetto con una paletta di base omogenea, consente di giocare sull’attenzione dell’utente grazie a un colore unico. Un bottone che emerge, un link, un riquadro (effetto isolamento). Esatto: se da un lato i consumatori preferiscono combinazioni di colori con tonalità simili, proprio le combinazioni ad alto contrasto sono le più efficaci ai fini della comunicazione web. Pertanto, i colori sul web non sono un elemento decorativo.

Prendiamo il sito di Mailchimp, una fantastica piattaforma, per analizzare l’aspetto legato ai colori web e comprovare quanto esposto. Già il logo ispira gioco e divertimento: una scimmia addetta all’invio newsletter. Non male come approccio, non è per nulla tecnico. Vediamo navigazione, header, contenuto e footer. Il sito è molto pulito: sfondo bianco, testi in nero. L’intestazione presenta un colore di sfondo azzurro (#bde7ec) molto soft e calmante, che e invita a provare il servizio: semplice, elegante, creativo e immediato. Osservando meglio, Mailchimp mette l’accento sulle azioni (“call to action”) attraverso il colore arancione (#db3a1b). Quasi a voler associare il servizio al morso di un frutto saporito.

colori_screenshot-mailchimp

Avete altri siti web che desiderate analizzare dal punto di vista cromatico? Scrivete un commento!

Link interessanti

RGB color model
sRGB vs. Adobe RGB
Colors Tutorial
Color Hex Color Codes
HTML Color Codes
Psicologia del colore in un Infografica: guida per Web Designer

Post recenti
Showing 2 comments
  • Michele Bugliaro Goggia

    Ho dato un’occhiata al sito Xbox: trattandosi di intrattenimento, le immagini hanno un forte significato. Il logo contiene del verde, difatti le call to action contengono spesso questo colore. Navigazione per prima. Il footer resta neutro.

  • Alessia Missiaglia

    Ciao Michele, grazie mille per la citazione! Articolo molto interessante…condivido 😉

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca