Quando si sceglie una combinazione di colori per un sito web è importante seguire i princìpi della teoria del colore e, naturalmente, evitare inutili PACCHIANATE.

Trovare il giusto abbinamento di colori è qualcosa che richiede tempo e studio, ma il più delle volte non si spende tempo a sufficienza per lo studio del colore e del suo significato.

Quella del colore principale e dei colori secondari è una scelta più importante di quanto si possa pensare: combinazioni di colori differenti, infatti, comunicano messaggi ed evocano sensazioni che possono favorire (o ostacolare!) il tuo progetto.

Occhio quindi a fare la scelta giusta!

Combinazione colori per il web design: significati e simbolismo

I colori non vanno scelti soltanto in base a quanto ci piacciono.

Evocano anche simboli, immagini, sensazioni che interferiscono a vari livelli nella fruizione di un prodotto o servizio: insomma, la scelta del colore giusto è un’importante fattore a livello strategico.

In questo articolo non ti parlerò soltanto della teoria del colore o dei vari significati che un colore può assumere in base alle diverse culture che lo utilizzano: ti farò anche vedere (in modo pratico e reale) alcuni siti web che fanno dell’uso del colore la loro arma vincente.

E allora via, iniziamo a scoprire la magia del colore…

Abbinamento colori web: le basi

Molto spesso le persone, specialmente quelle che non operano in internet e non hano familiarità con i principi del web design, scelgono i colori del proprio sito basandosi sul proprio gusto, e si accontentano di ottenere un risultato in cui i colori “stanno bene insieme“.

Alcune volte basta e avanza (purchè si abbia un buon occhio e si riesca ad intuire qual è lo schema di colore migliore per quel determinato sito).

Ma, purtroppo, non tutti riescono nell’intento e i risultati sono quasi sempre scadenti: pulsanti che non emergono, testi che non si leggono bene, distrazioni inutili…quindi, a tutti coloro che ne hanno voglia e curiosità, consiglio di imparare le basi della teoria del colore – che, comunque, è molto chiara e facile da capire….

Uno degli aspetti più utili da cui partire è la ruota dei colori.

La ruota dei colori

Ruota dei colori
Facciamo un po’ di storia: la ruota dei colori (o ruota cromatica) è stata inventata da Isaac Newton nel 1666.

I fasci creati dal passaggio della luce attraverso un prisma vennero da lui trasformati in un cerchio segmentato, in cui la dimensione di ogni spicchio varia in funzione del rapporto tra la sua lunghezza d’onda e la sua corrispondente larghezza nello spettro.

È uno strumento indispensabile per molti designers e artisti in tutto il mondo (oltre ad essere la prova che il genio, spesso, si nasconde dietro la semplicità!).

Questo strumento permette di individuare i colori che possono essere utilizzati in maniera armonica e coerente.

La ruota consiste di 6 colori principali: rosso, arancione, giallo, verde, blu e viola.

Oltre a questi, ne esistono altri ottenuti dall’unione di colori principali. Così, per trovare uno schema di colori equilibrati, è necessario utilizzare i due colori opposti l’uno all’altro nella ruota cromatica, oppure i tre che formano un triangolo sulla ruota stessa o ancora i 4 che vanno a formare un rettangolo (due coppie di colori ognuna speculare rispetto all’altra).

Nella ruota cromatica i colori sono divisi in colori caldi e colori freddi: i primi sono costituiti da gialli, rossi e arancioni, i secondi comprendono azzurri, verdi e viola.

I colori secondari, invece, sono quelli formati da parti di colore caldo e parti di colore freddo. A livello di percezione visiva i colori caldi sono detti “uscenti“, perchè sembrano dare l’impressione di avvicinamento a chi li guarda. Quelli freddi, al contrario, sono definiti “rientranti“, in quanto creano l’effetto di allontanamento rispetto all’osservatore.

Colori primari e secondari

Colori Primari quali sono

Quali sono i colori primari? Facile, sono quei 3 colori fondamentali alla base di tutti gli altri: rosso (#FF0000 in HTML o #F00 nei CSS), giallo (#FFFF00 in HTML o #ff0 nei CSS) e blu (#0000FF in HTML o #00F nei CSS). Non è possibile ottenerli mescolando gli altri colori (a differenza di ciò che accade con i colori secondari, che sono appunto ottenuti grazie alla combinazione dei colori primari).

Colori Secondari quali sono (combinazione colori primari)

Come si ottengono i colori secondari? Semplice, dalla combinazione dei colori primari. Mescolati insieme, infatti, i 3 colori principali danno vita ad altrettanti colori secondari: arancione (#FF9900 in HTML o # 90 nei CSS), verde (#00FF00 in HTML o #0F0 nei CSS) e Viola (#FF00FF in HTML o #f0f nei CSS).

È possibile ottenerli mescolando rosso e giallo (si avrà l’arancione), giallo e blu (otterremo il verde) e blu e rosso (il risultato sarà il viola). Naturalmente l’intensità della tonalità ottenuta deriverà dalla quantità di colore primario inserito nel mix.

Colori Terziari

Per ottenere uno dei colori terziari è necessario mescolare un colore primario e uno secondario. Le opportunità e le variazioni che è possibile ottenere sono infinite.

Colori Complementari

Quali sono i colori complementari? Sono quei colori che si trovano di fronte l’uno all’altro nella ruota cromatica: rosso e verde, blu e arancione, viola e giallo. In combinazione con l’altro compongono un forte contrasto. Tali combinazioni di colore sono di solito utilizzate per far emergere nettamente alcuni elementi del sito web. Ad esempio, se il sito ha uno sfondo arancione con alcuni elementi blu, questi ultimi emergeranno tantissimo rispetto al resto.

Potrebbe interessarti:  Come prepararsi al meglio per il lancio di un sito web

Una volta che sai i colori complementari quali sono, diventerà abbastanza facile capire quali colori stanno bene insieme e applicarli alla tua strategia.

Colori Analoghi

Si trovano uno accanto all’altro sulla ruota dei colori. Di solito la loro combinazione è ottimale, anche se un po’ fiacca. Il consiglio è utilizzare queste combinazioni quando si vuole trasmettere serenità e tranquillità ai visitatori mentre guardano le pagine del sito.

Come combinare il colore marrone?

Perché un paragrafo dedicato al marrone? Semplice: perché nonostante sia facile crearlo (è possibile seguire diverse strade che mixano tra loro i vari colori primari), nel web design invece riuscire a combinare adeguatamente il colore marrone può essere difficoltoso. Anche il marrone però ha i suoi colori complementari, ed è possibile abbinarlo in vari modi all’interno di un sito. Ti consiglio di utilizzare questo formidabile strumento di Adobehttps://color.adobe.com/it/explore/newest/ che ti suggerisce tutte le varie combinazioni colori, tenendo conto di tutte le regole fin qui descritte.

I colori nelle diverse culture: simbolismo e significato

Quando si sceglie una combinazione di colori per un sito web, si dovrebbe necessariamente tener conto del fatto che l’uno o l’altro possono avere significati diversi nelle diverse culture.

L’aspetto culturale quando si parla di “simboli” è molto forte, per questo risulta fondamentale conoscere come il colore può essere percepito dal nostro potenziale pubblico.

Capire “che cosa stai dicendo” con lo schema di colori del tuo sito ti permetterà di non essere frainteso o, peggio, di urtare la sensibilità di qualcuno!

Scopriamo cosa significano nelle diverse culture:

Rosso

  • Cina: le spose, la fortuna, le cerimonie
  • Nativi americani: il trionfo, il successo
  • India: la purezza
  • Sud Africa: il lutto
  • Estremo oriente: indossato dalle spose, gioia (in combinazione con il bianco)
  • Occidente: emozione, amore, passione, stop
  • USA: Natale (con il verde), il giorno di San Valentino (con il bianco)
  • Ebraismo: il sacrificio, il peccato
  • Giappone: la vita
  • Cristianesimo: il sacrificio, la passione, l’amore
  • Feng Shui: il fuoco, la fortuna, il rispetto, la protezione, la vitalità, il denaro, il riconoscimento

Blu

  • Cina: l’immortalità
  • Nativi americani: sconfitta, problemi
  • Iran: il lutto, il cielo e della spiritualità
  • Induismo: Krishna
  • Ebraismo: la santità
  • Cristianesimo: Cristo
  • Cattolicesimo: la veste di Maria
  • Medio Oriente: la protezione
  • Feng Shui: acqua, calma, l’amore, la guarigione, il rilassamento, la pace, la fiducia, avventura, esplorazione
  • Occidente: tristezza, depressione, conservatore, aziendale, professionale

Giallo

  • Europa: la felicità, la speranza, la gioia, la codardia, debolezza, calore
  • Asia: imperiale, sacro
  • Cina: re, nutrimento
  • Egitto: il lutto
  • Giappone: il coraggio
  • India: i commercianti
  • Buddismo: la saggezza
  • Feng Shui: la terra, il buon auspicio, i raggi del sole, calore, movimento

Arancione

  • Europa: l’autunno, la raccolta, la creatività
  • Paesi Bassi: colore preferito (House of Orange)
  • Irlanda: protestanti (connotazione religiosa)
  • USA: Halloween (con il nero), merci a basso costo
  • Induismo: lo zafferano (l’arancione è un colore sacro)
  • Feng Shui: lo scopo, rafforza la concentrazione

Marrone

  • Colombia: scoraggia le vendite
  • Aborigeni australiani: la terra, l’ocra cerimoniale
  • Feng Shui: l’industria, la terra

Verde

  • Cina: l’esorcismo
  • Giappone: la vita
  • Islam: la speranza – il mantello del profeta è stato pensato per essere verde, la virtù – solo quelli di fede perfetta possono indossare il verde
  • Irlanda: il simbolo di tutto il paese, i cattolici (connotazione religiosa)
  • Europa/USA: primavera, nuova nascita, sicurezza, ambiente, ecologia, il giorno di San Patrizio, Natale (con il rosso)
  • USA: denaro
  • Feng Shui: Yin, il legno, l’energia, rinfrescante, il nutrimento, il bilanciamento, l’armonia, la guarigione, la salute

Viola

  • Thailandia: lutto (vedove)
  • Europa: regalità
  • Cattolicesimo: la morte, il lutto, la crocifissione
  • Feng Shui: Yin, la guarigione fisica e mentale, la consapevolezza spirituale

Bianco

  • Europa: il matrimonio, gli angeli, i medici, gli ospedali, la pace
  • Giappone: lutto, garofano bianco simboleggia la morte
  • Cina: il lutto, la morte
  • India: l’infelicità
  • Oriente: funerali
  • Feng Shui: Yang, metallo, la morte, i fantasmi, il lutto, spiriti ancestrali, equilibrio

Nero

  • Europa: il lutto, i funerali, la morte, la ribellione, la rinuncia
  • Cina: colore dei giovani ragazzi
  • Thailandia: sfortuna, il male, l’infelicità
  • Ebraismo: l’infelicità, la sfortuna, il male
  • Aborigeni australiani: il colore del popolo, ocra cerimoniale
  • Feng Shui: Yin, acqua, denaro, successo di carriera, il reddito, la stabilità, la protezione emotiva, il potere, le contusioni, il male

Abbinamento colori sito web: esempi e casi studio

Molto spesso la prima opinione è quella che conta: sono tante le persone che basano la propria fiducia verso un sito dal look che ha, e questo ovviamente comprende anche lo schema dei colori utilizzati.

Ancor prima di valutare la validità delle tue offerte o dalla qualità dei tuoi prodotti, i tuoi visitatori ti giudicheranno in base all’aspetto grafico.

Quando una pagina compare ad un utente, i colori utilizzati stimolano il suo subconscio. Tutti reagiamo positivamente o negativamente in base ad alcuni colori: combinare i colori in modo da attirare il pubblico, significa aver fatto gran parte del lavoro.

Colori per siti web – Vediamo quali sentimenti ogni colore può evocare e diamo un’occhiata ad alcune soluzioni web che ritengo d’esempio quando parliamo di corretto utilizzo del colore.

Potrebbe interessarti:  La storia (vera) di un sito web SBAGLIATO - e di migliaia di Euro persi...

Sito web rosso

http://outmonsterthemonster.com/

Il rosso è principalmente associato al coraggio, all’entusiasmo e al desiderio. Il rosso è il colore dell’amore, della forza, della potenza, dell’energia, della leadership e dell’eccitazione. Si tratta di un colore forte, da utilizzare tenendo a mente alcune sue associazioni negative, vale a dire il senso di pericolo e di allarme.


Sito web blu

http://riiotlabs.com/fr/accueil

Blu significa pazienza, pace, tranquillità, affidabilità, amore, stabilità. Si tratta di uno dei colori più amati, soprattutto dagli uomini. Spesso viene associato alla stabilità e alla profondità, ed è molto utilizzato in ambito professionale (rappresenta anche la fiducia e l’onore). Quasi tutti i siti corporate o i social network hanno almeno un elemento blu.


Sito web giallo

http://tset.arte.tv/fr/

Il giallo è il colore che viene maggiormente associato alla vivacità. È energico e dà una sensazione di felicità. Inoltre, si abbina molto bene a elementi come la curiosità, il divertimento, la gioia, l’intelligenza, la luminosità, l’attenzione, ecc.


Sito web arancione

https://www.sweetpunk.com/

Arancione significa allegria e creatività. Può essere associato all’amicizia, alla fiducia, al coraggio, alla fermezza. È ottimo per conferire informalità al tuo progetto. Se vuoi dare un tocco di estrosità al tuo sito web, l’arancione è il colore perfetto.


Sito web violahttp://silversoundentertainment.net/

Il viola è tradizionalmente associato al potere, alla nobiltà e alla ricchezza. Connotati del viola sono: saggezza, regalità, indipendenza, nobiltà, lusso, ambizione, dignità, magia e mistero.


Uso del verde nel sito web

http://www.peoplefirm.com/

Il verde è il colore dell’armonia, della natura, della guarigione, della vita, del cibo e della salute. È il colore dell’ambiente e dell’ecologia per eccellenza. Inoltre, è spesso associato al denaro.


Sito web marrone

Il marrone è il colore del relax e della fiducia. Marrone significa terra, ed è il colore della natura, del comfort e dell’affidabilità. Può essere utilizzato in ambiti sofisticati, solidi e convenzionali. Di solito il marrone può essere usato in combinazione con il rosso, il giallo, l’arancione, il bianco.

Colori complementari marrone? Dipende dal tipo di marrone! Il colore primario o secondario che domina il marrone ti guiderà al colore complementare. La maggior parte dei marroni è una specie di arancione scuro e tenue (l’arancione è un colore secondario – rosso e giallo misti) e il complementare sarebbe quindi un blu. Il colore complementare di un marrone rossastro sarà un verde, il colore complementare di un marrone violaceo sarà un giallo.


Sito web grigio

http://www.doyoustillbelieve.com/

Il grigio dà un senso di serietà, di conservatorismo e tradizionalismo. Può provocare una sensazione di purezza e di innocenza. Può essere associato alla sicurezza, all’affidabilità, all’intelligenza, alla modestia, alla dignità, alla maturità. È un colore solido, pratico, ma viene anche associato per delineare la tristezza, la noia e la malinconia. In combinazione con l’arancio, il grigio sembra perfetto e risveglia il senso della perfezione.


Sito web rosa

http://12dishes.com/recipe/pig-cheeks-with-polenta

Il rosa esprime tenerezza, romanticismo, femminilità, verità, passività, guarigione emotiva, cura, pace.

Ha un effetto calmante, affettuoso, emotivo. Simboleggia anche il nutrimento, il gusto, il profumo, la delicatezza ecc.

Non a caso quasi tutti i siti web di wedding planner, matrimoni e cerimonie utilizzano il rosa come colore primario.


Sito web colore biancohttp://www.doudoublues.com/

Il colore bianco è associato alla purezza, alla semplicità, alla freschezza e alla bontà. Viene connesso all’innocenza e alla pulizia. Questo colore è ideale da utilizzare come sfondo, perché mette in luce gli altri colori. Non aver paura dello spazio bianco: nel web design, è un elemento fondamentale.


Sito web nero

http://2016.makemepulse.com/

Il nero è un colore elegante e raffinato, associato al potere, alla raffinatezza, alla formalità e contribuisce ad aggiungere un po’ di “mistero” al tuo design.

Ma se non vuoi che il tuo sito web provochi depressione e angoscia, evita l’uso del nero su aree vaste o come colore principale. D’altra parte, se opti per uno sfondo nero, puoi aumentare la prospettiva e la profondità in caso di immagini ben fatte. Il nero è ottimo da utilizzare per siti web d’arte e di fotografia, in quanto rende più vibranti gli altri colori complementari.


Combinazioni di colori per il web: alcuni consigli utili

In conclusione, ci sono alcuni consigli utili che ti aiuteranno nella scelta di una buona combinazione di colori per il tuo sito. Questi piccoli consigli sono ampiamente utilizzati da web designer professionisti.

  1. Se desideri che il contenuto del testo sia facilmente leggibile, scegli colori contrastanti. È importante un buon contrasto tra il testo e lo sfondo.
  2. Non usare troppi colori: non rendere il tuo sito colorato come un circo (a meno che…non sia il sito di un circo!). Per ottenere un impatto positivo, utilizza un colore per i titoli ed un altro (quello complementare) per il testo.
  3. Non essere noioso: va bene non usare troppi colori, ma anche usarne pochissimi può essere sbagliato. Rischi di rendere il tuo sito noioso e ripetitivo. Utilizza pochi colori principali ma evidenzia gli elementi del caso con colori complementari e secondari.
  4. Se vuoi catturare l’attenzione del visitatore, utilizza colori intensi. Ma attenzione, se le combinazioni colori è troppo intensa, l’occhio sarà attirato in troppe direzioni e la tecnica perderà la sua efficacia.
  5. Trai ispirazione dalla natura: in questo modo puoi davvero trovare grandi combinazioni di colori complementari!

Per ora è tutto! Mi auguro che questo articolo ti sia utile e…non dimenticare di condividere e commentare 🙂

Per saperne di più sulle combinazioni e la teoria del colore:

http://en.wikipedia.org/wiki/Color_theory
http://www.awwwards.com/

http://joehallock.com/edu/COM498/index.html
http://www.sibagraphics.com/colour.php
http://webdesign.about.com/od/color/Designing_With_Color.htm
http://www.webdesign.org/web-design-basics/color-theory/

[Voti: 59    Media Voto: 4.7/5]