Grafica web: la teoria del colore nel web design
Adesso che sei un po’ più ferrato sulla teoria della progettazione grafica, rivolgiamo la nostra attenzione verso un altro argomento, per certi versi molto più stimolante: in questa parte del nostro corso completo di grafica parleremo infatti di quell’affascinante universo che è il colore, della sua teoria di base e di come una perfetta armonia cromatica, in combinazione con un pizzico di “psicologia del colore”, possa aiutarci nella scelta della palette più efficace per la pagina web che stiamo progettando.
Il modello RGB
I colori visualizzati sullo schermo del nostro computer (quelli quindi che dobbiamo utilizzare nella progettazione grafica di un layout) si basano su un modello di colore additivo, in cui i colori vengono visualizzati – e misurati- in percentuali di rosso, verde e blu (a questo dobbiamo l’acronimo RGB).
Figura 01 – Modello di colore additivo (RGB)
Dato che i colori sul web vengono visualizzati secondo il modello RGB, nelle prossime pagine e negli esempi che seguiranno prenderemo come riferimento sempre tale modello; chi proviene dalla grafica cartacea – o chi è solito armeggiare con una qualsiasi stampante a cartucce – avrà senz’altro più confidenza con un altro acronimo, il CMYK. Tuttavia questo modello non ha niente a che fare con il web, perciò lo metteremo da parte.
La ruota dei colori
La ruota dei colori (o “cerchio del colore”) è uno strumento fondamentale per comprendere come abbinare due o più colori in modo efficace. Esistono diverse versioni di ruota, più o meno complesse, anche se la più comune – e utilizzata da sempre nell’arte – è quella classica, che rappresenta i 12 colori fondamentali.
Figura 02 – Ruota dei colori
Questa ruota ci permette di avere una panoramica abbastanza chiara su quelli che sono i colori primari, secondari e terziari della nostra scala cromatica.
I colori primari sono il rosso, il giallo e il blu, mentre i colori secondari, ottenuti mescolando due colori primari adiacenti, sono il verde, l’arancione e il viola.
I rimanenti colori, i cosiddetti terziari, sono ottenuti mescolando tra loro un colore primario e un colore secondario (sempre adiacenti nella scala dei colori).
Un esempio di colore terziario? Pensiamo al colore “acquamarina” (nato da una combinazione di blu e verde) o al magenta, ottenuto mescolando il rosso e il viola.
Figura 03 – Schema dei colori primari, secondari e terziari
E i colori bianco, nero, grigio?
Quest’ultimi sono definiti colori “neutri” in quanto sono ottenuti mescolando parti uguali di ciascuno dei tre colori primari.
Colori freddi e colori caldi
Sempre prendendo come riferimento la nostra ruota dei colori, possiamo parlare di colori caldi e colori freddi: cosa significa?
L’insieme dei colori caldi racchiude i colori dal rosso al giallo, incluso l’arancione, il marrone e il bordeaux. Sono i colori della terra, del sole e del fuoco, e come tali racchiudono una potente capacità energetica. Sono i colori perfetti per creare enfasi su un particolare elemento di una composizione grafica e per attirare l’attenzione.
I colori freddi, invece, sono i colori che vanno dal verde al blu (includendo anche alcune tonalità di viola). Si tratta di colori che – come vedremo nel capitolo dedicato alla psicologia dei colori – infondono sensazioni positive e rassicuranti, riducono la tensione e sono estremamente riposanti per l’occhio.
Valore e saturazione
La misura della luminosità o dell’oscurità di un colore prende il nome di valore.
Il modo più semplice per modificare la luminosità di un colore è quello di aggiungere allo stesso una percentuale di colore bianco o di colore nero. Nel primo caso avremo una tonalità più luminosa (il colore diviene quasi pastello) che prende il nome di “tinta”, nel secondo caso avremo un colore più scuro che prende il nome di “ombra”.
La saturazione, invece, misura l’intensità, la pienezza di un colore. Con una saturazione piena il colore sarà vivido, puro. Abbassando la saturazione avremo un colore sempre più opaco, fino ad ottenere un grigio.
Nelle prossime settimane vedremo come mettere in pratica queste nozioni, quali sono gli schemi di colore più comuni che possiamo utilizzare nei nostri progetti di web design e come creare una palette durante un’esercitazione pratica. Il colore gioca un ruolo veramente fondamentale nella fase di progettazione visiva…vedremo il perchè più avanti ;)
Indice del corso
- Dalla carta al web: i diversi modi di concepire la grafica
- I principi della progettazione grafica:
- La teoria del colore
- Comunicare con i font: la tipografia sul web
- Giocare con le immagini in un design emozionale
- Mockup e…to sketch
- Let’s design: progettiamo il nostro layout
- Analisi ed esercitazione: i design più comuni
- Dalla grafica al codice: è ora di ottimizzare
- I dettagli che fanno la differenza? vediamoli insieme
- Gli errori (e orrori) grafici più comuni
- Appendice: alla ricerca delle risorse giuste
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
18 commenti
Trackback e pingback
-
Corso di grafica web: gli schemi colore | Your Inspiration Web
[...] settimana siamo entrati nel “vivo” della progettazione grafica, con un piccolo accenno alla teoria del colore. Nella lezione di… -
Grafica web e psicologia del colore: come i colori comunicano con l’inconscio | Your Inspiration Web
[...] Le basi della teoria del colore [...] -
Grafica web: dare equilibrio e ritmo ai nostri layout | Your Inspiration Web
[...] Le basi della teoria del colore [...] -
Corso grafica web: utilizzare le griglie | Your Inspiration Web
[...] Le basi della teoria del colore [...] -
I principi della progettazione grafica: la sezione aurea nel web design | Your Inspiration Web
[...] Le basi della teoria del colore [...]
Che dire… siete una risorsa inestimabile per me.
Grazie Francesco. Sono commenti come questo che ci danno la motivazione per migliorarci e continuare a lavorare sodo dietro le quinte di YIW :)
vorrei sapere, ma non so se già esiste un articolo che ne parla, come accoppiare bene i colori tra loro e come ottenere le diverse tonalità. Ad es. nel CMYK se “aggiungendo il K avremo un’ombra”, ecc.
grazie
Non so se ho capito bene…per quanto riguarda l’accoppiare i colori, abbi pazienza..nei prossimi articoli parleremo proprio di questo! ;)
Ottimo articolo, potresti fare un libro con tutte queste belle lezioni! :)
…Touchè!
L’idea iniziale era quella, ma alla fine abbiamo deciso di mettere tutto su YIW, per la gioia di tutti coloro che da anni mi chiedono un corso di grafica ;)
Una serie di articoli molto interessanti :) una precisazione però:
i colori primari in realtà sono ciano, magenta e giallo, mentre invece il magenta è stato inserito da te tra i colori terziari (come da te giustamente citato all’inizio dell’articolo, la sigla della quadricromia è CMYK cioè i 3 colori primari più il nero)
Penso che i colori primari dovrebbero restare sempre giallo, blu e rosso. Poi in ogni caso, trattandosi di RGB dovrebbero essere Rosso Verde e Blu! :)
…Perchè tu Veronica ragioni in CMYK e io in RGB, perciò il tuo ciano è il mio blu, e il tuo magenta è il mio rosso. Nell’RGB i colori primari sono verde, blu e rosso. Non esiste un “ciano” nell’RGB. ;)
@Emmanuele: proprio cosi :)
Ops, a me risultava che RGB fosse Rosso (Red), Verde (Green) e Blu (Blu) adesso mi state confondendo le basi. loool
Ahhahahah, no, hai ragione…infatti l’immagine con i tre colori primari ha il verde, non il giallo. Ci siamo un po’ incartati mi sa :D
Non riesco a scaricare il pdf dell’articolo