Come creare una palette colori per il tuo sito web

La scelta del colore non è mai un fatto puramente estetico. Il colore parla della personalità e dei valori del brand ed è un elemento fondamentale della sua identità visiva. Non si tratta di scegliere i propri colori preferiti e di combinarli insieme in modo armonico, perché nella comunicazione con il pubblico il brand è solo uno dei due interlocutori. Si tratta di trovare una combinazione di colori che riesca sì ad esprimere la personalità del brand, ma che comunichi efficacemente con il proprio target.

Ma da un punto di vista pratico come si sceglie una palette colori per il sito web? Per chi come me ama il colore nelle sue varie tonalità, già scegliere un colore è dura, figuriamoci scegliere un’intera palette colori. Leggendo questo articolo scoprirai quante sono le variabili da considerare nella scelta, quanti colori usare e dove trovare ispirazione.

Cos’è la palette colori

La palette colori è letteralmente una tavolozza di colori, cioè una sequenza di colori che caratterizza e distingue visivamente il brand o il concept del progetto grafico. A seconda del progetto, le necessità grafiche saranno diverse e quindi anche per la scelta dei colori si imporranno scelte e strategie diverse.

Quando fare la palette colori?

La scelta della color palette è parte integrante del processo che porta alla definizione dell’identità visiva del brand, sia che si tratti di un nuovo marchio, sia che si stia affrontando un restyling. La scelta della palette colori va affrontata soltanto dopo aver concluso un’attenta analisi del target e dei competitor. Meglio ancora se è stato fatto uno studio della personalità del brand.

Quanti colori scegliere per il sito web?

Non c’è un numero massimo di colori, ma sicuramente la prima regola è quella di non esagerare. Bisogna inserire soltanto i colori necessari a comunicare esattamente le sensazioni e l’atmosfera che vogliamo. Nel caso di un sito web sarà opportuno scegliere almeno 1/2 colori primari, 1/2 colori secondari, 1/2 colori neutri. I colori neutri sono utilizzati solitamente per gli sfondi delle aree di testo, mentre i colori secondari richiamano di più l’attenzione su alcune aree o sezioni. Il colore primario viene dosato con attenzione per evidenziare chiaramente le aree più importanti, come link e bottoni.

Dove trovare l’ispirazione per la tua palette colori?

In molti progetti la scelta della palette è già determinata da scelte precedenti, come nel caso dei restyling, oppure da esigenze tecniche o caratteristiche peculiari del prodotto. In altri casi si parte da zero. Come selezionare allora i colori?

Fai una moodboard

Facendosi guidare dall’analisi di mercato e dallo studio della personalità di brand, si può inizialmente creare una moodboard a partire da una ricerca per immagini su Pinterest o direttamente su Google. La ricerca può partire da parole chiave attinenti i valori di brand o le caratteristiche del prodotto. Spesso già in questa prima fase di brainstorming emergono dei colori ricorrenti, che puoi selezionare e inserire in palette.

Trova la palette colori da un’immagine

Se durante la ricerca scopri un’immagine, la cui combinazione cromatica sarebbe perfetta per esprimere l’atmosfera che vorresti sul tuo sito, sei a cavallo! Ci sono alcuni tools online che permettono di ricavare una palette colori a partire da un’immagine.

• HD Rainbow è un tool free e semplicissimo da usare: basta caricare una fotografia e automaticamente vengono rilevati i colori dominanti della fotografia.
• Adobe Color è decisamente più completo e tra le altre funzioni permette anche di ricavare diverse palette da una stessa fotografia, a seconda della vivacità e della luminosità dei colori.
• Anche Coolors è un ottimo tools e ti permette di ricavare diverse palette a partire da una stessa immagine, a seconda della diversa posizione dei punti sorgente, e di scegliere il numero dei colori da selezionare. Se vuoi, puoi anche esportare il collage a partire dalla foto scelta.

Crea palette colori online

Se al contrario la tua ricerca non porta a niente, puoi farti ispirare da palette colori già pronte all’uso o divertirti con la ruota dei colori.

• Coolors offre molteplici funzioni: puoi esplorare palette colori già pronte grazie ad una ricerca per parole chiave, ma puoi anche divertirti a generarle casualmente e per ciascun colore cambiare la luminosità.
• Oltre a esplorare le palette colori di tendenza, Adobe Color permette anche di creare una palette a partire dalla ruota dei colori sulla base delle armonie: colori analoghi, monocromatici, triade, ecc.
• Anche Canva offre la possibilità di generare una color palette utilizzando la ruota dei colori e le armonie, ma il numero dei colori è al momento limitato a 3.

Come combinare i colori?

Qui viene in soccorso la teoria dei colori. Ebbene sì, esiste una teoria dei colori e il suo studio affonda le radici nell’antichità. Per lo scopo di questo articolo basta sapere alcune cose fondamentali.

Nella grafica digitale i colori sono prodotti da fonti luminose e in questo caso interagiscono tra loro attraverso un metodo di colore additivo, il metodo RGB (Red-Green-Blue), a partire da 3 colori primari: il rosso, il verde e il blu. La loro somma produce quindi il colore bianco, per questo si dice additivo (diversamente dalla grafica su stampa che utilizza un metodo sottrativo, il CYMK).

Ogni colore è determinato dalla tonalità (il tono cromatico o la tinta, cioè la famiglia cromatica, es. rosso, verde, ecc.), dalla luminanza (la luminosità di un colore) e dalla saturazione (la purezza di una certa tinta, la sua intensità).

Le armonie

La ruota dei colori è una rappresentazione grafica dei colori introdotta da Newton nel 1666 e poi ulteriormente sviluppata. Permette di visualizzare in modo semplice alcune combinazioni o armonie di colori. Ogni armonia esprime una diversa atmosfera. Esserne consapevoli è fondamentale nel momento in cui si lavora a una palette. Qui riporto brevemente le principali armonie:

• colori monocromatici: un’unica tonalità di colore, ma declinata e sfumata con diversi livelli di saturazione e luminosità. Ne emerge un’estetica minimale e semplice.
• colori analoghi:i colori sono uno accanto all’altro nella ruota dei colori. Esprime calma e uniformità, ma un maggiore dinamismo rispetto alla combinazione monocromatica.
• colori complementari: si trovano all’opposto della ruota dei colori. Rivelano un contrasto evidente e attirano maggiormente l’attenzione
• split complementari: si scelgono due colori a fianco a quello opposto al colore di base. Il contrasto è ancora più evidente e aggressivo.
• triade: Si scelgono 3 colori equidistanti nella ruota cromatica. Cattura l’attenzione senza creare quel contrasto netto dei colori complementari.
• tetrade: coinvolge 4 colori, 2 colori adiacenti e due opposti

Occhio all’accessibilità

Sia Adobe Color che Coolors ci permettono di verificare come la palette venga percepita in casi di disabilità visiva, ma Coolors permette di esplorare diverse tipologie di disturbi e comprendere appieno come le nostre scelte possano impattare l’impressione complessiva del design sulle persone che soffrono di disturbi visivi.

La psicologia dei colori e i significati culturali

I colori ispirano sentimenti ed emozioni. Esistono anche terapie psicologiche che si basano sull’uso dei colori, come la cromoterapia. Agli stimoli emotivi si affiancano anche valori e caratteristiche che associamo a determinati colori per tradizione culturale. Nella scelta dei colori per un progetto, dobbiamo tenere conto sia dei significati emotivi, sia delle accezioni culturali, che possono valere per un’area geografica, ma non per un’altra. Un classico esempio è il colore bianco, associato alla purezza e all’innocenza nella cultura occidentale, mentre nella cultura cinese è legato anche al lutto e al funerale.

Nella cultura occidentale questi sono i principali significati associati ai colori:

• Bianco: purezza, calma, innocenza.
• Verde: natura, equilibrio, salute.
• Giallo: ottimismo, attenzione, gelosia.
• Arancione: energia, salute, felicità.
• Rosso: coraggio, pericolo, desiderio.
• Rosa: sensualità, femminilità.
• Blu: sincerità, sicurezza, malinconia.
• Viola: creatività, spiritualità, mistero.
• Nero: eleganza, lusso, autorità.

Considera il tuo target anche nella scelta dei colori

Il motivo per cui la scelta dei colori dovrebbe arrivare soltanto dopo aver compiuto un’attenta analisi del target, è perché dobbiamo conoscerlo bene per capire se ha delle aspettative rispetto al mercato dove ti muovi. Dall’analisi dei competitor inoltre possiamo capire se ci sono dei colori consueti per un determinato prodotto o servizio. Non c’è nulla di male nell’adattarsi al proprio mercato e andare incontro alle aspettative dei nostri clienti.

Questo non vuol dire che bisogna necessariamente uniformarsi. L’obiettivo è essere consapevoli delle nostre scelte comunicative, perché le nostre scelte in ambito visivo dovranno essere coerenti con il tono di voce dei testi e l’atmosfera delle immagini. Se la tua strategia di brand è di rottura con le tradizioni, allora una palette colori originale e spiazzante può essere molto efficace.

Fai un check alla tua palette: contrasto e leggibilità

I colori donano al design della pagina il potere di esprimere sensazioni, emozioni, ma anche valori e intenzioni. Ma mai dovrebbero compromettere la leggibilità dei testi! Se è vero che i contrasti deboli rendono un testo poco leggibile, i contrasti netti affaticano troppo l’occhio. Proprio per questo motivo è sconsigliato l’uso del nero puro.

Mi capita spesso di trovarmi di fronte a palette originali, ma accecanti e applicate in modo non equilibrato. Come verificare allora che la palette che abbiamo scelto sia effettivamente a prova di lettura?

Coolors mette a disposizione un ottimo tool il Contrast checker per verificare il contrasto tra il colore del testo e il colore di sfondo. Basta inserire il colore del testo e il colore dello sfondo e ci verrà restituito un valore di contrasto e un giudizio sulla leggibilità. Secondo il  Web Content Accessibility Guidelines (WCAG), si ammette un contrasto minimo di 4,5 per il testo principale e di 3 per il testo in caratteri grandi (oltre i 18 pixel o 14 pixel in grassetto). Questa differenza dipende dal fatto che nelle piccole dimensioni occorre un contrasto maggiore per favorire la lettura, al contrario le icone sono facilmente leggibili anche a un livello di contrasto minore. Non basta sapere se il contrasto è sufficiente, ma anche in quali condizioni. Adobe Color mette a disposizione un contrast checker, che offre molti spunti e suggerimenti su come migliorare il contrasto e a quali situazioni limitarlo.

Un modo semplice per capire se la palette offre una buona leggibilità è quella di trasformarla in scala di grigi. La palette è sufficientemente leggibile, se mantiene il contrasto e una gerarchia visiva anche in scala di grigi. Per verificarlo è possibile utilizzare un programma di grafica o usare la mappa della luminanza offerta da Coolors, che trasforma automaticamente in scala di grigi la propria palette.

Generalmente per i testi andrebbero evitate le armonie complementari, come il rosso e il verde, il rosso o il blu o il verde e il violetto, perché ne ostacolano la leggibilità. Questo non significa necessariamente che occorre cambiare i colori della palette, ma sarà sufficiente avvalersi per i testi dei toni neutri, il bianco o il nero, oppure puoi sfruttare il contrasto sulla luminanza, cioè si usa la stessa tonalità ma con una luminanza diversa: un verde molto chiaro su uno sfondo verde scuro, ad esempio.

La leggibilità non è data soltanto dalla leggibilità del testo, ma dall’esperienza di lettura nel suo complesso. Il colore è in grado di creare una gerarchia visiva, un ordine di lettura del messaggio e renderlo più comprensibile. I colori più accesi dovranno quindi essere utilizzati per condurre l’attenzione del visitatore verso le aree o sezioni più importanti.

Vuoi approfondire?

Se sei affascinato dal mondo del colore, ti consiglio (i link sono affiliati Amazon):

• Cromorama, di Riccardo Falcinelli
• Colorama, di Crushiform
• Il piccolo libro dei colori, di M. Pastoreau

Se stai ridisegnando la tua identità visiva e vuoi un consiglio professionale sulla tua palette colori, non esitare a contattarmi. Sarò felice di aiutarti e collaborare con te!