Il tuo blog non decolla? Richiedi ReportBlog

Scelta dei colori di un sito web

Blogging

L’importanza della scelta dei colori di un sito

La scelta dei colori è uno degli step principali che si eseguono quando stai progettato un sito web.

I colori dei siti web (sito vetrina, blog o ecommerce) devono essere scelti con cura. I colori hanno un significato ben preciso ed hanno un grande potere

La scelta dei colori di un sito è un’arma potente che abbiamo a disposizione. Il motivo è che ogni colore ha un significato ben preciso, scaturiscono delle emozioni positivi o negative.

I colori agiscono sull’umore, sul livello decisionale e spingono l’utente ad una determinata azione.

Proprio per questo motivo è importante scegliere la giusta combinazione di colori per il sito web.

Grazie anche al corretto utilizzo dei colori, oltre che al contenuto ed allo stile generale del sito, è possibile coinvolgere l’utente e fargli prendere una decisione come quella di acquistare, cliccare su un bottone, fare una determinata a zione.

Con questo contenuto voglio condividere con te l’importanza della scelta dei colori giusti per un sito, mostrarti la definizione di ogni colore, ed aiutarti a scegliere i colori che più si adattano al tuo sito tramite un percorso di esercizi, esempi e tools.

La ruota dei colori

Cerchio cromatico di Itten – © artevigasio

Questa è il cerchio cromatico realizzato da Johannes Itten, un pittore e designer svizzero.

  • I colori primari sono giallo, magenta e ciano (giallo, rosso e blu) e si trovano nel triangolo centrale delle ruota.
  • I colori secondari si trovano ai lati del triangolo principale e sono arancione, viola e verde. Si ricavano dalla mescolanza tra i due colori primari lungo il lato del triangolo.
  • I colori terziari sono quelli che si trovano nel cerchio esterno e nascono dalla miscela tra i colori primari e quelli secondari.
  • I colori adiacenti sono quei colori che hanno un colore in comune e si trovano uno accanto all’altro nella ruota dei colori. Esempio: giallo, arancione e rosso.
  • I colori complementari sono una coppia di colori che si trovano all’opposto nella ruota dei colori (vedi cerchio di Itten). I complementari sono composti da un colore primario e da uno secondario. Esempio: giallo e viola, oppure verde e mangenta.
  • La triade di colore è formata da 3 colori che nel cerchio si trovano ad una distanza uguale.

Quando andiamo a creare un sito web dobbiamo porre attenzione alla scelta dei colori, andando a scegliere i colori primari, secondari e terziari, avendo cura di scegliere un giusto abbinamento.

Psicologia dei colori

Ogni colore ha il suo significato, genera un’emozione, dona una sensazione. Nella tabella seguente ho raccolto le definizioni dei colori principali ed a quali tipologie di siti si adattano maggiormente.

Tabella dei colori

ColoreSignificatoAdatto a…
GialloEnergia, movimento, ottimismo, è un grido, determinato, immateriale, di condivisione, organizzazione, sicurezza, calma.Promozione di servizi, siti di viaggi.
RossoMateriale, impulsivo, bramoso di potere, annuncia festività, passionale, intenso, violento, forza, divieto, ambizione.Bottoni con sconti, siti con allusioni al pericolo o a qualcosa di forte.
BluPace, moderazione, equilibrio, nostalgico, razionale, chiuso, solidità, sensibilità, creatività, immobile.Prodotti/servizi per la pulizia, siti per medici.
ArancioneVivace, sereno, ottimista, di grande ispirazione, stimola la concentrazione, comptenza, praticità, buona organizzazione.Prodotti o servizi di divertimento, di avventura.
VerdeLibertà, ecologia, costanza, perseveranza, medicina, fertilità, fede, speranza, un ciclo, speranza di guadagno, giovinezza.Siti sull’ecologia, medicina, escursionismo, campagne, natura, prodotti bio.
ViolaSpiritualità, immateriale, anticonformista, ricchezza, regalità, ansia, rifiuto, inaccessibilità, malinconia, intellettualità, intelligenza profonda.Consulenze di astrologia, esoterismo.
NeroOscurità, dolore, paura, depressione, bloccante, costanza, eleganza, reale, concreto.Siti di marketing, comunicazione.
GrigioMonotono, fermo, senza personalità, noioso, Siti per la burocrazia.
MarroneStabile, materno, relax, terra, dona sicurezza, tranquillità.Siti di crescita personale.
RosaFemminilità, bellezza, ingenuità, purezza.Siti sulla gravidanza, infanzia.

Ognuno di questi colori può migliorare o peggiorare il suo significato, sfumandolo od accostandolo ad altri colori. Ogni colore ha un lato positivo ed uno negativo.

Per capire meglio, ritorna a dare un’occhiata al cerchio di Itten.

Prendiamo in esempio il colore rosso. Di per sè questo colore è passionale, provocatorio, ti spinge a fare un’azione immediata, senti il ticchettio del tempo che sta scadendo, hai un’impulso.

Rosso e varianti

La parte negativa del rosso è l’ostilità, la violenza ed il divieto. Volendone smorzare i toni, bisogna utilizzarne delle varianti che si dirigono verso l’arancione, dando vita a colori come bordeaux, corallo, granata. Sono dei colori più eleganti, più intriganti e meno autoritari.

Blu e varianti

Il blu è un colore freddo, che dona pace ma che allos tesso tempo risulta essere chiuso ed introverso. Il blu è il colore con il quale viene identificato l’infinito. Dona calma, tranquillità, ma anche distacco.

Il blu scuro è adatto per dare un’impressione di responsabilità, di dimostrare intelligenza.

Il turchese è un colore più spirituale, indica una rinascita.

Viola e varianti

Il colore viola è indicato per argomenti immateriali, che mostrano eccentricità, originalità. Il lato negativo del viola indica tensione, infelicità. Il viola è un colore difficile da utilizzare, non si adatta facilmente.

Le sue varianti sono il porpora e l’indaco.

Marrone e varianti

Il colore marrone rappresenta tutto ciò che è terreno, materno, dona relax ed invita dolcemente ad abbandonarsi. È un colore concreto, solido, ma allo stesso tempo assorbe l’energia nel caso in cui sia troppo scuro.

Il colore ocra nasce dalla mescolanza tra il marrore ed il colore oro. Si avvicina più al colore giallo e proprio per questo motivo dona ottimisimo, è un colore positivo.

Il colore beige è uno di quelli colori “neutri” molto di moda (soprattutto nell’arredamento). È un colore elegante.

Il colore oro identifica la ricchezza, l’abbondanza per antonomasia, dona calore, saggezza.

Nero

Da un sentimento di dolore, angoscia, depressione. Ma significa anche solennità, eleganza. È un colore che dona raffinatezza e stile, ed è molto concreto.

Il colore nero è, insieme al bianco, il colore più utilizzato in un sito web. Generalmente viene utilizzato di default per il testo. Non utilizzo mai il colore #000 (cioè il nero più nero che ci sia), ma cerco di smorzarlo con un colore più chiaro come #222 o #333.

È un colore che va utilizzato con molta attenzione. Lo utilizzerei come colore terziario e non come colore primario. Va bene evidenziare alcune parti del sito (header, footer, testo), ma farei attenzione ad utilizzarlo come sfondo poiché è un colore pesante e stancante per gli occhi.

Bianco

La maggior parte delle pagine web hanno un colore di sfondo bianco #fff. Il significato del colore bianco è nascita/morte. È un colore freddo, glaciale che rappresenta purezza, onestà e dona molta energia. Ma è anche un colore che vira verso la solitudine, verso il vuoto.

Per via del suo lato negativo, è necessario fare attenzione al suo utilizzo. Uno spazio completamente vuoto, bianco, potrebbe annullare il messaggio che vogliamo veicolare. Per questo motivo è importante abbinargli i giusti colori.

Esempio di colori per il web

Il verde viene spesso associato a siti web che trattano l’argomento dell’ecologia, oppure per ecommerce di prodotti bio e naturali.

Il rosso viene associato a siti in cui è previsto un guadagno, che ti fanno guadagnare oppure che ti promettono di aiutarti a guadagnare, come ad esempio i siti di trading.

Il blu viene utilizzato nei siti di medicina, per esempio per siti vetrina di professionisti che operano in quel campo, oppure nei siti che propongono pulizia e decluttering.

#5 passi per creare uno schema dei colori

Nel capitolo sulla #Psicologia dei colori abbiamo affrontato il tema del significato dei colori, delle emozioni che donano o sottraggono, di come una persona può esserne influenzata sia positivamente che negativamente.

Dopo aver fatto un reseconto delle emozioni che vuoi trasmettere, puoi iniziare a comporre lo schema dei colori più adatto al tuo sito web.

#1 Scegli un massimo di 3 colori

Il numero di colori da utilizzare in un sito web non dovrebbe mai superare il tre: il colore principale, il colore secondario ed il colore neutrale.

Ci sono alcuni siti web (per esempio quelli che utilizzano colori pastello) che vanno oltre la soglia consigliata dei 3 colori. Ci sono modi e modi per farlo, non sempre ne esce fuori un capolavoro.

Per cui, se non vuoi sbagliare e non vuoi creare un pasticcio di colori, ti consiglio di non andare mai oltre l’utilizzo di 3 colori.

#2 Scegli il colore primario

La scelta del colore primario è fondamentale, una volta scelto questo potrai proseguire con l’abbinamento degli altri colori.

Il colore primario dà l’accento giusto alla pagina web. Si tratta di un colore forte, che pone un distacco netto con gli altri colori della pagina.

Il colore primario deve catturare l’attenzione dell’utente che sta navigando tra le pagine del sito, deve veicolare la sua attenzione e farlo agire.

L’elemento che viene “dipinto” dal colore primario deve essere distinguibile nella pagina.

Dove utilizzare il colore primario?
Viene utilizzato nei bottoni (per esempio nei pulsanti delle call to action “acquista ora”), nelle icone presenti nel menu o negli elenchi, ed in tutti quegli elementi che vorresti mettere in evidenza per portarli ad un’azione.

#3 Scegli il colore secondario

Dopo aver scelto il colore principale, dovrai scegliere quale colore abbinargli.

Il colore secondario è un colore che va a mettere in risalto il colore primario e gli da sostegno.

Un sito web non può avere meno di 2 colori (per esempio il bianco ed il nero). Il colore secondario è meno efficace di quello principale, infatti non dovrebbe mai essere più “forte” del primo.

Dove utilizzare il colore secondario?
Viene utilizzato per evidenziare degli elementi meno importanti come per esempio gli link, i bottoni secondari, le voci del menu dell’header, colori nella sidebar. Può essere utilizzato anche come sfondo di un elemento come un box.

#4 Scegli il colore neutrale

Come sappiamo il numero perfetto è il 3. In un sito web possiamo utilizzare la triade dei colori.

Il colore neutrale ha il compito di equilibrare la pagina, di renderla più aromoniosa, di renderla più neutrale al cospetto degli altri due colori, aiuta a dare riposo agli occhi.

Generalmente i colori neutrali sono il bianco, il grigio oppure varie sfumature dei colori della ruota che tendono verso il bianco (per esempio il beige chiaro). Tra i colori neutrali vediamo anche il nero che però viene utilizzato maggiormente per i testi.

Dove utilizzare il colore neutrale?
Il terzo colore viene utilizzato per il testo dei contenuti, oppure per lo sfondo di una sezione od anche per lo sfondo della pagina.

#5 Segui la regola 60-30-10

Abbiamo capito che durante la progettazione di un sito web possiamo scegliere fino a 3 colori e abbiamo compreso come e dove utilizzarli.

Quello che fin’ora non sai è che i 3 colori (primario, secondario, neutrale) devono rispettare delle proporzioni e per farlo possiamo affidarci alla regola 60-30-10:

  • Il 60% della pagina deve essere affidato al colore neutrale
  • Il 30% del colore deve essere quello secondario
  • Il 10% rimanente può essere utilizzato da quello primario

Strumenti per creare lo schema dei colori

Avrai sicuramente bisogno di qualcosa in grado di aiutarti con la creazione dello schema dei colori.

Voglio condividere con te i tools online che utilizzo per la composizione della palette dei siti che progetto.

  • Paletton: il must have dei tool che un web design deve tenere tra i segnalibri. In base al colore principale scelto puoi ricavare i colori adiacenti, la triade, aggiungere quelli complementari.
  • Colormind: è un generatore di schemi di colori. Ad ogni refresh di pagina potrai rigenerare una palette composta da 5 colori. Scorrendo la pagina potrai visualizzare gli esempi dei colori applicati ai vari elementi (sfondi, testo, bottoni, …).
  • Material: con questa applicazione potrai creare una paletta da applicare alla UI. Scegliendo il colore primario e quello secondario vedrai gli esempi dei possibili effetti sul testo, sui bottoni, sull’header.
  • ColorSpace: dopo aver scelto un colore, questo strumento va a generare diverse tipologie di palette.
  • Canva: è un tool molto semplice da utilizzare e da comprendere. Dopo aver scelto il colore primario potrai ricavare i colori da abbinare.

Esempi di palette colori e template

Per creare degli esempi e delle palette di colori ho scelto volutamente degli esempi concreti, di siti web che puoi navigare, scrutarne i colori e gli effetti che hanno in tutte le pagine.

01. Blu-violastro e azzurro: tecnologia

Questo schema di colori si abbina perfettamente ad un sito web che tratta il tema della tecnologia. Il colore primario è il blu. È un colore formato al 92% dal blu, ma ha degli accenti di viola. Il secondo colore utilizzato in più parti del layout, come ad esempio nei bottoni, è l’azzurro che sfuma verso il turchese. Il terzo colore ha il compito di equilibrare la pagina.

02. Bianco e nero: infinito

Un design pulito e minimal come quello della capsula Dragon e delle nuove tute spaziali degli astronauti. Il colore predominante del sito è il nero, il colore del vuoto cosmico, il non colore dell’universo.

03. Grigio scuro e ramato: arredamento

Un colore nero o grigio scuro non pesante, non stancante per gli occhi, che non ha un contrasto deciso con il bianco. Accompagnato dal colore ramato e se vogliamo color legno, leggero, che si abbina perfettamento al tema dell’arredamento.

04. Turchese e pesca: matrimonio

Basta con il solito rosa, il sito Zankyou affronta il matrimonio con un colore primario d’eccellenza: un colore con una base verde e con le sfumature del turchese. Insieme al bianco (un colore che non stona mai nel matrimonio) ed un colore pescato. Il turchese ed il color pesca sono due colori molto armoniosi e delicati.

05. Rosa e verde acido: blog travel e lifestyle

Un blog dai colori esplosivi. È stato utilizzato un rosa acceso e ben definito, insieme ad un verde acido che movimenta la pagina web. Questo è il blog di travel, lifestyle e food di Manuela Vitulli.

Conclusione

In questo articolo ho voluto parlarti dell’importanza che hanno i colori sulla nostra vita e sulle nostre decisioni, di come è possibile sfruttare i colori per aiutare un utente a fare un’azione attraverso il significato dei colori. Ti ho mostrato passo dopo passo come creare uno schema di colori ed una paletta colori grazie all’utilizzo di strumenti online.

Adesso sta a te scegliere il giusto colore per il tuo sito web.

Scrivimi nei commenti o tramite email la paletta dei colori che hai scelto. Qual è il colore primario e secondario che utilizzerai? Hai già pensato anche al colore neutruale?

Articolografia

Post correlati

0%