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

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag:

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

18 commenti

  1. mex
  2. Veronica
    • Giovanni

Trackback e pingback

  1. 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 …
  2. Grafica web e psicologia del colore: come i colori comunicano con l’inconscio | Your Inspiration Web
    [...] Le basi della teoria del colore [...]
  3. Grafica web: dare equilibrio e ritmo ai nostri layout | Your Inspiration Web
    [...] Le basi della teoria del colore [...]
  4. Corso grafica web: utilizzare le griglie | Your Inspiration Web
    [...] Le basi della teoria del colore [...]
  5. I principi della progettazione grafica: la sezione aurea nel web design | Your Inspiration Web
    [...] Le basi della teoria del colore [...]

Lascia un Commento

Current day month ye@r *