Colori per il sito web: come scegliere le giuste combinazioni

Colori per il sito web: come scegliere le giuste combinazioni

Combinazioni di colori e Web Design

Quando si sceglie una combinazione di colori per un sito web è importante farlo bene, guidati dai principi fondamentali della teoria del colore e, naturalmente, seguire i consigli dei professionisti.

In questo articolo ho intenzione di descrivere gli aspetti più importanti, i principi fondamentali che ne regolano l'utilizzo, il loro significato nel web design ed anche quello simbolico. Inoltre, mostrerò alcuni buoni esempi (secondo me) di siti web ben progettati suddivisi per colore dominante: l'obiettivo è acquisire familiarità con queste dinamiche, in modo da utilizzare in modo efficace i colori durante la creazione di un sito.

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

Imparare a combinare i colori

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 ciò 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 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

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).

Ruota dei Colori

Nella ruota cromatica i colori sono divisi in caldi e freddi: i primi sono costituiti da gialli, rossi e arancioni, i secondi comprendono azzurri, verdi e viola. Quelli secondari, formati da parti di colore caldo e parti di colore freddo, corrispondono alla gamma dell'uno o dell'altro, in base alla percentuale maggiore di essi presente nella miscela. 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

Ci sono tre colori primari: 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 quelli secondari, che sono appunto ottenuti grazie alla cominazione dei colori primari.

  • Colori Secondari (o combinazione colori primari)

I colori secondari sono quelli ottenuti 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

Sono quelli 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.

  • 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, 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 per il simbolismo può essere molto forte, quindi 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

Siti web: una vetrina...multicolore!

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: se la combinazione scelta è giusta per attirare il tuo pubblico, allora gran parte del lavoro è stato fatto.

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.

colori siti web

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.

combinazioni di colori

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).

consigli web design

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

Il giallo è il colore che viene maggiormente associato alla vivacità. È energico e dà una sensazione di felicità. Inoltre, si associa con la curiosità, il divertimento, la gioia, l'intelligenza, la luminosità, l'attenzione, ecc.

combinazioni web design

https://www.sweetpunk.com/

Arancione significa allegria e creatività. Può essere associato all'amicizia, alla fiducia, al coraggio, alla fermezza.

combinazioni di colori per il web

http://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.

combinazioni di colori siti 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 con il denaro.

colore sito marrone complementare

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. 

colore bianco sito web

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 anche associato per delinare la tristezza, la noia e la malinconia. In combinazione con l'arancio, il grigio sembra perfetto e risveglia il senso della perfezione.

colore sito web

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

Il rosa esprime la tenerezza, il romanticismo, la femminilità, la verità, la passività, la guarigione emotiva, la cura, la pace. Ha un effetto calmante, affettuoso, emotivo. Simboleggia anche il nutrimento, il gusto, il profumo, la delicatezza ecc.

combinazioni per sito web

http://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.

nero sito web colore

http://2016.makemepulse.com/

Il nero è un colore elegante e raffinato, associata al potere, alla raffinatezza, alla formalità e contribuisce ad aggiungere un po' di mistero al vostro design. Ma se non volete che il vostro sito web provochi sentimenti deprimenti, evita l'uso del nero su una vasta area. D'altra parte, se si opta per uno sfondo nero, si può aumentare la prospettiva e la profondità. Il nero è ottimo da utilizzare per siti web d'arte e di fotografia in quanto aiuta gli altri a vibrare.

Per concludere: alcuni consigli sulle combinazioni di colori per il web

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 (compresi noi di Medea!).

  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 usarne troppi: 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 la combinazione di 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/

Vota:
10
Come ridurre il tasso di abbandono del carrello
Le attività fondamentali per promuovere un evento

Forse potrebbero interessarti anche questi articoli