Come scegliere lo schema colori per il sito

Ma prima di avventurarci alla scoperta dei migliori colori per le diverse tipologie di business è opportuno considerare che per prima cosa il tuo sito deve:

• rispettare regole di leggibilità,
• evitare colori poco contrastanti tra testo e il resto della struttura,
• comunicare esattamente il tuo brand,
• non generare confusione nell’utente.

Questi principi saranno alla base di qualunque scelta più specifica.

Iniziamo subito.

Come scegliere lo schema colori per il sito? Ecco la regola d’oro

I colori sono molto importanti e se non li scegli con cura rischi di avere una esperienza utente fastidiosa e poco gratificante che non può essere migliorata con nessun trucco di SEO.

La prima e più importante regola per sapere come scegliere il migliore schema colori per il sito è per questo: non esagerare.

Ti servono solo tre colori:

• un colore principale, che sarà usato per la maggior parte del sito
• un secondo colore, in armonia con quello principale, da usare per le aree secondarie
• un terzo colore a contrasto, da usare con moderazione per mettere in evidenza alcuni elementi, come bottoni, link, eccetera.

Quando si lavora con i colori è facile farsi prendere la mano. Seguire una regola come questa ti aiuterà a non esagerare e a mantenere un aspetto professionale per il tuo sito.

La ruota dei colori

Ci sono tanti modi per scegliere uno schema di colori, uno strumento molto utile è la “ruota dei colori”. Questo diagramma mette in mostra la relazione tra differenti sfumature di colori collocandole su di uno spettro posto sulla ruota.

Sulla ruota dei colori trovano posto, in una formazione a triangolo i colori primari (rosso, blu e giallo). I vari anelli della ruota mostrano le sfumature che si generano spostandosi da uno all’altro di questo tre colori.

Partendo dal rosso, per esempio, puoi spostarti verso il giallo producendo toni di arancione via via più tendenti al giallo e, continuando, dal giallo verso il blu incontrerai tutti i verdi. Da ultimo, tornando dal blu verso il rosso incontri i magenta e i viola. A prescindere dalla visualizzazione che viene scelta questa è la progressione di qualunque ruota cromatica.

Una ruota che aiuta a visualizzare anche le relazioni tra i diversi colori:

• complementare,
• triadica,
• complementare divisa,
• analoga.

Relazione complementare

Costruire uno schema con colori complementari è il modo più semplice per creare uno stile che è vibrante, vivo ed accattivante. I colori complementari sono facili da trovare sulla ruota dei colori perché sono perfettamente opposti: blu e arancione, rosso e verde, giallo e viola.

I colori complementari fanno risaltare gli elementi della pagina grazie al forte contrasto ma attenzione a trovare il giusto equilibrio per evitare di strafare. Il contrasto è solo uno degli elementi che devi valutare.

Molti brand famosi, anche nella vita reale, usano i colori complementari: Visa, Ikea, Fanta, Mozilla, FedEx…

Relazione triadica

La relazione triadica prende in considerazione tre colori anziché due. Scelto il tuo colore principale puoi trovare i suoi opposti nel triangolo equilatero (ma non necessariamente equilatero) ideale che si apre nella zona opposta ad esso. La relazione complementare e triadica si somigliano a volte ma con l’apertura degli opposti hai più spazio di manovra.

Schemi di colore triadici sono molto accesi e di forte impatto. Bisogna fare attenzione ad usarli in maniera armoniosa e ad utilizzare il colore base come dominante egli altri come semplici accenti.

Un esempio di schema di colore triadico è il logo di Burger King.

Relazione complementare divisa

Sapere come scegliere lo schema colori per il sito può sembrare complesso ma una soluzione che funziona spesso è usare una relazione complementare divisa. Con la complementare divisa hai già tre colori che sono in armonia tra loro ma creano contrasto e due di questi colori sono vicini ma non facili da confondere.

Per prima cosa scegli il tuo colore principale. Trova ora il suo complementare e anzichè prendere esattamente quel colore, scegli due sfumature ai suoi lati.

Di nuovo il marchio di Fanta è un esempio di complementare diviso, come pure Taco Bell.

Relazione analoga

Non tutti gli schemi colori devono essere ad altissimo contrasto però. Se vuoi comunicare un messaggio più soft la soluzione migliore potrebbe essere quella di uno schema di colori analoghi.

Il rischio è di non avere abbastanza contrasto ma se prendi il bianco (o il nero) come riferimento principale puoi creare bellissimi ed efficaci schemi di colori analoghi che funzionano. Un esempio di brand con uno schema analogo che funziona è Mastercard.

Da dove iniziare per scegliere i colori?

Finora abbiamo visto la teoria dei colori e le loro possibili relazioni. Ma la scelta di uno schema colori deve partire un passo indietro. Devi farti infatti alcune domande fondamentali prima di cominciare a prendere appunti e lavorare con i tool online per costruire la tua tavolozza.

• Quali sono le caratteristiche del tuo brand?
• A quale pubblico ti rivolgi?
• Che prodotti (e quali esperienze) offri a questo pubblico?

Immagina un brand che vende cibo vegano e usa il rosso sangue o un sito per bambini tutto bianco e nero. Ogni colore trasmette, soprattutto a livello inconscio, una sensazione e tu devi sapere quali sono le sensazioni che vuoi trasmettere:

• il blu trasmette professionalità
• tra i colori meno popolari, ci sono l’arancione ed il marrone
  • se puoi, evita quindi di usarli come colore principale per il tuo sito (anche se con Burger King funzionano!)
• il nero è spesso usato per comunicare un’idea di lusso (ma attento all’effetto lutto)
• il rosa, molto usato nei siti che trattano argomenti di carattere femminile, (e dalla Gazzetta dello Sport)
  • è di fatto molto amato dalle donne
• non sottovalutare il bianco. Usare il bianco non è affatto una scelta pigra, tutt’altro! (senza dimenticare di valutare una versione con sfondo nero per chi vuole risparmiarsi gli occhi e la batteria)
  • Soprattutto se il tuo sito è ricco di testi, uno sfondo bianco è probabilmente la scelta migliore per garantire una leggibilità ottimale.

Impara a sfruttare il verde, il giallo ed il rosso

Alcuni colori, come il verde, il giallo ed il rosso sono tradizionalmente (ed inconsciamente) associati a determinati tipi di messaggi ed azioni.

Il verde è solitamente utilizzato per trasmettere sicurezza e successo.

Usa quindi il verde per bottoni di conferma.

Il giallo è invece usato per comunicare agli utenti di prestare particolare attenzione a qualcosa (non a caso, il giallo è usato anche nei cartelli stradali)

Infine, il rosso è usato per evidenziare errori.

Cerca di integrare questi colori nelle cosiddette “call-to-action” del tuo sito (per esempio, in form e bottoni).

Tieni però presente che tutte queste informazioni sulla psicologia del colore si basano sulle consuetudini e le credenze europee e occidentali.

Se il tuo sito deve parlare a Paesi legati a culture molto diverse, imparare come scegliere lo schema colori del sito significherà fare anche una ricerca approfondita riguardo i colori all’interno di quella cultura.

Sai che il Giallo è spesso associato al potere in Cina mentre in India è sinonimo di concentrazione?

Scegli lo schema colori del tuo sito

Ora che conosci alcune regole di base, vediamo come puoi creare uno schema di colori professionale.

Esistono tanti strumenti che ti aiutano. Se hai già in mente un colore da cui partire, puoi usare una delle tantissime applicazioni disponibili online per generare schemi di colore.

Tra le mie preferite ci sono:

• Coolors
• Paletton
• ColourCo

Usando questi strumenti potrai creare combinazioni di colori e ricavarne i codici HEX (necessari per usare i colori all’interno del tuo sito WordPress).

Un altro strumento molto interessante che ti consiglio è Color Palette Generator, che puoi usare per creare schemi colori partendo da una fotografia o un’immagine.

Non sai da dove iniziare?

Non disperare. Sul web ci sono moltissime risorse ricche di esempi di schemi di colori.

La prima cosa che ti consiglio di fare è ovviamente di visitare altri siti e prestare attenzione a come usano il colore.

Se sei alla ricerca di ispirazione, ti suggerisco anche di visitare questa pagina sul blog di Canva.

Canva è uno strumento sensazionale per creare grafiche online, e qui sono elencate – con tanto di immagine, swatch di colori e codici hex, ben 100 combinazioni colori!

Sono tutte veramente molto belle, non esitare quindi ad usarle come punto di partenza per creare la tua personalizzata.

A questo proposito, sono sicuro che troverai l’ispirazione anche nei casi di successo dei nostri utenti, come il sito di Fabio, un bellissimo esempio di equilibrio tra colori con il giusto dosaggio di contrasto per mettere in evidenza gli elementi più rilevanti.

O ancora nell’esempio di Daniele, che grazie all’uso dei colori riesce a trasmettere quel senso di calma e ordine, fondamentale per l’argomento di cui tratta il suo sito.

Conclusione

In questa guida ti ho fornito alcuni consigli per imparare come scegliere lo schema colori per il sito.

Tutti i siti sono diversi, ed i colori che sono perfetti per uno potrebbero essere completamente fuori luogo per un altro – l’importante è trovare quelli che rispecchiano le aspettative ed i gusti dei tuoi utenti.

Tu quali colori usi per il tuo sito?

Come sei arrivato alla scelta? Hai cercato ispirazione online, o ti sei forse fatto aiutare da un grafico?

Come sempre, ne parliamo nei commenti!