Ricordiamo la teoria dei colori durante le lezioni di arte: il significato della ruota dei colori, la temperatura e il croma. Come web designer, lavori ogni giorno con la teoria dei colori, sia inconsciamente che consapevolmente. In questo articolo ti mostrerò come utilizzare i principi e gli strumenti giusti per creare buone combinazioni di colori per il tuo prossimo progetto web.

Teoria dei colori: l'ordine dei colori

Le prime testimonianze della teoria del colore e della ruota dei colori risalgono almeno all'inizio del XVII secolo. L'origine dei colori, la riflessione della luce, il processo nell'occhio umano - tutto questo ha occupato l'umanità per molto tempo.

Spesso noi designer siamo soprattutto tipi visivi. La creazione di combinazioni di colori spesso viene dall'istinto. Vediamo e analizziamo costantemente i colori che ci circondano. Il risultato è un modo intuitivo di trattare i colori. 

Tuttavia, la conoscenza fattuale dei colori e dei loro effetti non è solo indispensabile per spiegare la scelta e la disposizione dei colori. È anche importante per prendere decisioni che si discostano dalla norma.

Per trovare le combinazioni di colori ottimali per i tuoi clienti e i tuoi siti web, è indispensabile una solida conoscenza della teoria dei colori.

Rispetto alla stampa, noi come designer per le superfici digitali abbiamo un vantaggio decisivo: quanti colori si usano alla fine e su quali tonalità si decide non ha alcun effetto sul costo del prodotto. Tuttavia, questo vale solo finché il vostro progetto rimane digitale.

Inoltre, non sei soggetto alle limitazioni tecniche che abbiamo con la stampa. Questo ti dà, come designer, la meravigliosa libertà di sviluppare tutto il tuo potenziale.

Colori primari, secondari e terziari

I nostri schermi sono di solito basati su RGB (Red, Green, Blue) - conosciuto anche come sistema di colore additivo. Come regola generale, tutto ciò che riflette la luce è basato sul sistema di colore additivo. In questa struttura, usiamo i colori primari come punto di partenza. Il bianco è creato dalla combinazione di tutti i colori, mentre il nero qui rappresenta l'assenza dei colori.

Spiegato con l'esempio di una semplice ruota dei colori: i colori primari sono il giallo, il rosso e il blu. I colori secondari si creano quando si mescolano i colori primari. I colori terziari sono creati da miscele che contengono colori primari e secondari.

Tonalità, tinte, sfumature e croma

Le tonalità, o tinta, descrivono i sei colori primari e secondari non mescolati:

• Tints descrive la tinta che si verifica quando si aggiunge il bianco a un colore.
• Shades utilizza lo stesso principio di Tints, ma in questo caso mescoliamo il nero.
• Ilcroma, chiamato anche saturazione o tono, è quello che chiamiamo mescolando le tinte con i grigi o i colori neutri come il bianco e il nero. Se seguiamo questa definizione, allora anche le sfumature e le tinte appartengono al croma.

Temperatura e contrasto

Si possono anche classificare i colori in temperature. Qui si applicano alcune regole empiriche:

I colori caldi sono più dominanti se abbinati a colori freddi.

In questo modo puoi anche trasmettere la sensazione di profondità. I colori freddi sembrano quindi più lontani di quelli caldi. Anche i colori di intenso calore possono far sembrare i colori freddi ancora più freddi.

Il grigio e le sfumature di grigio, il bianco e il nero appartengono al gruppo dei colori neutri. Anche il beige e il marrone sono spesso assegnati ai colori neutri. Per cui personalmente sono d'accordo solo in parte, perché una tonalità di grigio può sicuramente sembrare calda o fredda. Tendo anche a considerare il beige e il marrone come toni caldi. I colori neutri sono definiti per me come il bianco e il nero e tutte le sfumature di grigio in mezzo, a cui non è stato aggiunto nessun altro colore.

I colori neutri tendono a sembrare poco interessanti da soli, per questo hanno bisogno di almeno un colore che li faccia risaltare. 

In questo caso le eccezioni confermano la regola, perché ci sono alcuni layout minimalisti in bianco e nero che riescono a fare a meno di altri colori. Il marrone e il beige possono essere molto attraenti anche come colore dominante, ad esempio in un design monocromatico.

I colori primari contrastano tra loro.

C'è un altro modo per creare contrasto. Osservando i colori che si trovano a circa tre caselle di distanza sulla ruota dei colori. Questi abbinamenti possono facilmente creare disarmonia. Perché si mordono a vicenda. Tuttavia, se usati correttamente, ad esempio come call-to-action, possono dare al tuo design un contrasto interessante.

8 principi per palette di colori armoniose

Colori complementari

I colori complementari sono due colori che sono direttamente opposti l'uno all'altro sono combinati in questo concetto, come nell'esempio di Youtube Culture & Trends Report.

Due colori complementari si distinguono l'uno dall'altro al massimo. Questo crea una combinazione di colori contrastante, ma armoniosa. Questi disegni si prestano a design dinamici e che attirano l'attenzione. Pertanto, dovreste assicurarvi che questo rifletta anche il prodotto che volete comunicare.

Combinazione di triangoli

La combinazione di triangoli descrive tre colori equidistanti tra loro sulla ruota dei colori.

Simile alle combinazioni precedenti, anche questa è abbastanza semplice e facile da usare. Offre una maggiore diversità, eppure con essa si va sul sicuro. Difficilmente c'è una composizione armoniosa dal principio di base. Queste palette di colori sono particolarmente adatte per i siti web che devono piacere a una vasta gamma di utenti.

Dovreste comunque scegliere un colore che domini il design. Questo assicura un design chiaro e più armonia. Questo mostra anche l'esempio di Slaveryfootprint.org.

Dividi i colori complementari

I colori complementari spezzati descrivono un concetto simile a quello dei colori complementari. In questo caso, solo un lato si divide. Invece del colore primario complementare, ora si utilizzano i colori terziari circostanti. Questa tavolozza offre maggiori possibilità di combinazione.

L'aggiunta di un terzo colore allo schema complementare aggiunge un po' di equilibrio al layout. Questa combinazione è utilizzata molto spesso sul web. In questo modo la combinazione di colori non deve essere così forte come in questo esempio. 

Il terzo colore è spesso usato dai designer come colore d'accento e usato con molta parsimonia. Con questo principio puoi dare ai tuoi siti web un contrasto morbido.

Combinazione di colori quadrati

Simile al concetto di tre lati, la combinazione di colori quadrati combina quattro colori. Di tutte le combinazioni presentate finora, questa è quella che è più difficile da padroneggiare. 

Anche in questo caso, combiniamo due coppie di colori complementari. Tuttavia, è necessaria una certa sensibilità nella distribuzione della gerarchia. In questo sito web, la tonalità rossa è usata con parsimonia per evitare che il rosso domini gli altri colori. Al contrario, sono stati utilizzati un blu freddo e un beige neutro come colori dominanti.

Quando usi questo principio, assicurati di utilizzare colori caldi e freddi in armonia tra loro.

Quadrato diviso colori complementari

Consiste in due colori adiacenti e nei loro colori complementari.

Con questi colori, puoi creare una tavolozza di colori che ti dà il contrasto accattivante dei colori complementari pur essendo più vario, come in questo esempio.

Analogico

Le palette di colori analogici sono due o più colori che si trovano uno accanto all'altro sulla ruota dei colori. Le tavolozze di colori analogici appaiono meno contrastate rispetto alle composizioni precedentemente descritte, ma non per questo mancano di effetto. 

Per il tuo sito web, è una buona idea elaborare una gerarchia e usare i colori di conseguenza. Nell'esempio qui sotto, Crips Studios ha scelto il viola come colore dominante. Questo colore è poi anche quello che stabilisce l'atmosfera sul tuo sito web.

Monocromatico

La monocromia descrive diversi toni e/o croma dello stesso colore. Questo è il modo più semplice per ottenere una combinazione di colori armoniosa. Se usato bene, può comunque far risaltare la tua pagina rispetto alle altre.

L'uso di colori monocromatici aumenta inoltre l'impatto emotivo del colore di partenza e crea anche eleganza. I design minimali beneficiano di palette di colori monocromatici. Dovresti anche sapere che i siti monocromatici sono a basso contrasto.

Croma e tinta

L'uso di colori con valori di croma o tinta simili. Nell'esempio di Bliss, l'armonia è stata creata dall'uso costante di toni pastello.

Ispirazione e strumenti per la teoria del colore

Più di un classico ormai e ancora uno dei miei strumenti preferiti per creare tavolozze di colori: Ruota dei colori Adobe.

Come nuova caratteristica, si può anche controllare la selezione per vedere se sarà ancora visualizzata con abbastanza contrasto per gli utenti che soffrono di daltonismo.

• Eggradients fornisce una serie di ispirazioni per i gradienti e gli stili CSS per accompagnarli.
• Khroma è un'applicazione per browser basata sull'intelligenza artificiale che impara quali colori ti piacciono particolarmente e crea le combinazioni corrispondenti. Sicuramente consigliato come ispirazione rapida per i colori e le combinazioni.
• Coolors è una piattaforma dove puoi ispirarti e creare le tue palette di colori. Offre anche estensioni per Chrome e Adobe.

Colourco funziona in modo simile a Adobe Color Wheel. Puoi impostare il principio in base al quale creare la tua tavolozza di colori. Semplicemente passandoci sopra il mouse, puoi testare e creare combinazioni di colori. Puoi scaricare la tua selezione come foglio di stile Sass o .png.

Emotive Feels offre anche un sito web dal design accattivante per esplorare una vasta gamma di colori e i loro effetti.