La scelta dei colori di un sito web è uno step importante perché influisce direttamente sulla percezione del brand e sull’esperienza di navigazione dell’utente all’interno del sito.
I colori dei siti web vanno scelti con cura proprio perché sono in grado di evocare emozioni specifiche, dirigere l’attenzione degli utenti verso alcuni elementi, determinando la leggibilità dei contenuti e contribuendo alla creazione di un’identità visiva coerente che rafforza il messaggio del brand.
La scelta dei colori va effettuata prima di creare il sito web.
Durante la realizzazione dei siti web dei miei clienti, l’attività di branding è proprio quella che si trova in cima alla lista e su cui mi focalizzo maggiormente. Prima di procedere con la progettazione del sito credo che sia imprescindibile creare un’identità visiva con cui definire i valori, la personalità del brand e le emozioni che desidera suscitare.
Saper scegliere il giusto abbinamento dei colori di un sito è un’arte.
Grazie a numerosi studi condotti sulla psicologia dei colori (vedi Johann Wolfgang Goethe nel “La Teoria dei Colori”), sappiamo che questi agiscono sull’umore e – a livello inconscio – sul piano decisionale di una persona.
Infatti, scegliendo i colori giusti per il proprio brand è possibile comunicare un determinato messaggio all’utente che visita il nostro sito web, convincendolo a compiere un’azione specifica come cliccare su un bottone, approfondire l’argomento leggendo un altro articolo, contattare il professionista per ricevere maggiori informazioni.
Prima di aiutarti a selezionare i colori del tuo sito vorrei mostrarti come funzionano i colori e quali significati nascondono. Alla fine ti parlerò del metodo che personalmente utilizzo per scegliere i colori di un brand.
- Significato dei colori nel marketing
- Modelli di colori
- La ruota dei colori
- Schemi di colori
- Codifica dei colori
- Tabella dei colori per il CSS
- Come scegliere i colori del sito
- Esempi palette colori per siti web
- La regola 60-30-10 applicata al web design
- La regola del contrasto sui colori
- Strumenti per creare un abbinamento di colori per il web
Significato dei colori nel marketing
La psicologia dei colori è un aspetto fondamentale nel marketing e nel design, poiché i colori influenzano le emozioni, i comportamenti e le decisioni degli utenti.
Ogni colore è in grado di evocare sensazioni diverse e veicolare messaggi specifici. I colori sono uno strumento potente per creare un’identità di brand incisiva, attrarre l’attenzione delle persone che ti somigliano e guidare le loro azioni all’interno di un contenuto.
Nella tabella seguente ho raccolto i significati principali dei colori e ho suggerito per quali tipi di siti web potrebbero essere più adatti. Queste indicazioni non sono definitive: la scelta dei colori dipende strettamente dal loro significato e dalle emozioni che desideri evocare nelle persone che interagiscono con te e il tuo brand.
Tabella dei colori
| Colore | Significato | Adatto a… |
|---|---|---|
| Giallo | Energia, movimento, ottimismo, attenzione, felicità, determinazione, immateriale, condivisione, organizzazione, sicurezza, attenzione. | Promozione di servizi, siti di viaggi, intrattenimento, cibo. |
| Rosso | Passione, materiale, impulsivo, bramoso di potere, annuncia festività, intenso, forza, divieto, ambizione, pericolo, amore. | Bottoni con sconti, ristoranti, siti con allusioni al pericolo o a qualcosa di forte. |
| Blu | Pace, moderazione, equilibrio, nostalgia, razionale, chiusura, solidità, sensibilità, creatività, immobile, razionalità, professionalità. | Prodotti/servizi per la pulizia, siti medici, banche, istituzioni, tecnologia. |
| Arancione | Vivace, sereno, ottimista, ispirazione, stimola la concentrazione, competenza, praticità, creatività, avventura, entusiasmo. | Prodotti o servizi di divertimento, di avventura, siti per i giovani, call-to-action, marketing. |
| Verde | Libertà, ecologia, costanza, perseveranza, fertilità, speranza, ciclicità, giovinezza, crescita, salute, tranquillità. | Siti sull’ecologia, salute e benessere, escursionismo, natura, prodotti bio, finanza. |
| Viola | Spiritualità, lusso, immateriale, anticonformismo, ricchezza, regalità, mistero, inaccessibilità, malinconia, intellettualità, intelligenza profonda, creatività. | Prodotti di lusso, bellezza, siti creativi, esoterismo. |
| Nero | Eleganza, oscurità, paura, autorità, costanza, realtà, concretezza, sofisticatezza, potere. | Siti di marketing, comunicazione, moda, lusso, tecnologia. |
| Grigio | Neutralità, equilibrio, professionalità, modernità, serietà. | Siti per la burocrazia, tecnologia, design moderno, corporate. |
| Marrone | Stabile, materno, relax, terra, sicurezza, tranquillità, affidabilità, avvolgente. | Siti di crescita personale, prodotti naturali, arredamento. |
| Rosa | Femminilità, bellezza, dolcezza, ingenuità, purezza, romanticismo. | Siti sulla gravidanza, infanzia, cosmetici, prodotti per bambini. |
Ognuno di questi colori può variare nel significato, migliorando o peggiorando a seconda delle sfumature o delle combinazioni con altri colori.
Ogni colore ha un lato positivo e uno negativo. Queste caratteristiche possono essere accentuate o mitigate attraverso l’uso di diverse tonalità, saturazioni e luminosità.
Giallo e varianti
Il giallo è un colore luminoso e energico che evoca gioia e vitalità. Utilizzato per condividere, per richiamare all’attenzione e spesso utilizzato per esprimere organizzazione. È colore estremamente stimolante.
Il lato negativo del giallo provoca sentimenti di irritazione nel caso venga utilizzato impropriamente e in eccesso. È un colore vivace e per questo motivo va smorzato nei toni. Associato al bianco, viene visto come un urlo a squarciagola.
Limone: un colore molto gioioso e allo stesso tempo fresco. Trasmette un senso di chiarezza e energia positiva. È adatto per siti web e brand che vogliono comunicare dinamicità e innovazione, come startup tecnologiche e servizi di energia rinnovabile.
Senape: con il suo tono profondo e caldo, si distingue dal giallo per evocare un senso di comfort e richiamare l’atmosfera autunnale, spesso associato a uno stile vintage.
Oro: identifica la ricchezza e l’abbondanza per antonomasia, dona calore e saggezza. È ideale per brand che vogliono rappresentare il lusso e rivolgersi a persone di una classe sociale elevata.
Arancione e varianti
L’arancione è un colore entusiasmante e vivace, utilizzato per indurre all’azione. Spesso utilizzato per evidenziare bottoni e call to action nei siti web e nelle campagne pubblicitarie. È il colore ideale per brand e siti web che desiderano trasmettere dinamicità o che si rivolgono al pubblico infantile; rappresenta un pilastro nel settore del marketing.
Il lato negativo del colore arancione è associato all’aggressività. È un colore che indica tutt’altro che sobrietà, infatti se non utilizzato con moderazione potrebbe generare un sentimento di ingordigia e sregolatezza. Per smorzarne i toni viene combinato con il colore completamentare blu.
Pesca: è una tonalità così tenue e morbida che tende ad essere utilizzato da quei brand e siti web che desiderano trasmettere delicatezza, comprensione, gentilezza e cordialità.
Corallo: evoca immediatamente l’energia e la vitalità sprigionata dalla visione dei coralli marini, trasmette un senso di gioia e dinamicità e spesso viene associato alla moda estiva. È particolarmente indicato per terapisti e counselor che desiderano trasmettere rassicurazione e accoglienza.
Rosso e varianti
Prendiamo in esempio il colore rosso. Di per sé, questo colore è passionale e provocatorio; spinge all’azione immediata e crea un senso di urgenza, associato spesso a un countdown, un’offerta a tempo che sta per scadere per sempre. Stimola un impulso.
Il lato negativo del rosso è associato a ostilità, violenza e divieto. Per smorzarne i toni, si possono utilizzare varianti che virano verso l’arancione.
Bordeaux: trasmette lusso, eleganza e raffinatezza, ideale per un brand sofisticato, che desidera trasmettere alta qualità.
Granata: risulta più elegante, intrigante e meno autoritario.
Marrone e varianti
Il colore marrone rappresenta tutto ciò che è terreno e materno, dona relax e invita dolcemente ad abbandonarsi. Utilizzato da brand che hanno come valori l’accoglienza e desiderano essere avvolgenti come un caldo abbraccio. Adatto a siti web di coach, fotografi e interior design.
È un colore concreto, solido, accogliente e materno; può trasformarsi in negativo quando viene utilizzato in tonalità troppo scure, risultando pesante e deprimente.
Ocra: nato dalla mescolanza tra il marrone e il colore oro, si avvicina più al giallo e – proprio per questo motivo – dona ottimismo e positività. Potrebbe simboleggiare un sentimento che brucia dall’interno.
Beige: un colore neutro di tendenza, soprattutto nell’arredamento e nel coaching. È elegante e versatile.
Viola e varianti
Il colore viola è spesso associato all’immaterialità ed è utilizzato da brand con personalità eccentrica e originale.
Il lato negativo del viola può indicare tensione e infelicità. Il viola non è un colore facile da utilizzare e sicuramente non è adatto a tutti i brand o mercati.
Porpora: simboleggia regalità, ricchezza e potere, ma può risultare arrogante se non gestito correttamente.
Indaco: rappresenta intuizione, meditazione e spiritualità, ma può apparire troppo cupo o enigmatico.
Lilla: simboleggia giovinezza, leggerezza e romanticismo, utilizzato per dare un’immagine fresca e talvolta affettuosa. Evoca dei ricordi.
Rosa e varianti
Il rosa è spesso associato alla femminilità, alla dolcezza, all’eleganza e alla gentilezza. È un colore che può evocare sentimenti di romanticismo, giovinezza e calma.
Il lato negativo del rosa può essere percepito come eccessivamente dolce, infantile o poco serio poiché non trasmette autorità o leadership, e questo può essere interpretato erroneamente come debolezza o mancanza di determinazione. Essendo che il rosa è associato alla femminilità, questo può portare a stereotipi di genere limitanti, come limitare il pubblico di un servizio solo alle donne. Per declinare il lato negativo, bisogna evitare la tonalità pastello e combinarlo con altri colori come il giallo/oro, il blu navy oppure il verde.
Magenta: evoca la creatività e l’innovazione. È un colore che attira l’attenzione e comunica originalità e modernità. Spesso utilizzato come colore d’accento, accostato al nero; utilizzato in brand del settore tecnologico e comunicativo.
Flamingo: in italiano conosciuto come rosa fenicottero, è una tonalità di rosa aranciato molto vibrante, positivo, che dona una sensazione di freschezza, spensieratezza e dinamismo. Adatto a brand del settore benessere, legati all’Estate o al tempo libero.
Champagne: è un colore sofisticato che richiama il vino spumante, per tale motivo rappresenta l’esclusività e la raffinatezza. Indicato per siti web nel settore della moda, celebrazioni di matrimoni e party esclusivi.
Blu e varianti
Il blu è un colore freddo che dona pace, un senso di infinito, calma e tranquillità.
Il lato negativo del colore blu è spesso associato alla chiusura, all’introversità e al distacco.
Blu scuro: è adatto per trasmettere un’impressione di responsabilità e intelligenza. Adatto a brand che vogliono esprimere maturità, stabilità e competenza.
Blu tiffany: raffinato e allo stesso tempo luminoso. Associato alla giovinezza, esprime uno stato di esclusività. Utilizzato da brand che vogliono distinguersi e rappresentare il prestigio. Spesso abbinato al colore oro.
Turchese: è un colore più spirituale, che indica una rinascita. In base ai valori di luminosità e saturazione può indicare un senso di calma e tranquillità, ma variando verso un colore più scuro e intenso dona un senso di protezione, sicurezza, formalità e professionalità. Indicato per brand e siti web di crescita personale, psicologi e terapeuti, arredamenti sofisticati.
Verde e varianti
Il colore verde generalmente evoca sentimenti di calma, equilibrio e rinascita. È indicato per quei brand che vogliono lasciar trasparire armonia, crescita e prosperità, ma anche sostenibilità.
Il lato negativo del verde può essere associato all’invidia e, se usato in eccesso soprattutto nella variante più scura, può trasmettere un senso di monotonia, immobilità e ristagno.
Smeraldo: è un colore ricco, brillante e affascinante, noto come il “Gioiello del Re” per la sua associazione con l’autenticità e la lungimiranza. Simboleggia superiorità, leadership, lealtà e compassione. Ideale come colore principale per siti web di coach e mentori che intendono guidare i propri clienti.
Menta: è un colore riposante e fresco, simbolo di salute, rinascita e rinnovo. Adatto a brand di interior design, nutrizionismo e yoga.
Oliva: descrive un senso di equilibrio e pacatezza. Spesso associato all’ambito sportivo, alla natura e ai prodotti biologici.
Nero e varianti
Il colore nero indica solennità ed eleganza. Dona raffinatezza e stile; è un colore molto concreto, soprattutto se associato al bianco o ad altri colori ad alto contrasto. Utilizzato molto nel design.
Il lato negativo rappresenta sentimenti di dolore, angoscia e stati depressivi. Indica l’ignoto e l’oscurità perenne.
Nero corvino: ha una leggera sfumatura tendente al viola e rende il colore più intenso, estremamente elegante e intrigante. Questa tonalità è meglio visibile se rappresentata in un bottone, sfondo di un contenitore del sito. Adatti per siti web di avvocati, professionisti nel settore finanziario.
Nero antracite: è un colore che assomiglia al grigio scuro ma è più tendente al blu. Può evocare modernità, solidità e affidabilità. Nell’arredamento viene utilizzato al posto del nero puro, per rendere meno cupo l’ambiente.
Grigio e varianti
Nel web design, il grigio è spesso utilizzato come colore neutro per sfondi e testi. Indica neutralità, serietà e adattabilità. Viene utilizzato per accentuare la sobrietà e l’eleganza, ma suggerisco di non utilizzarlo come colore principale.
Il lato negativo del grigio rende l’aspetto grafico noioso e ripetitivo. Manca di originalità, non attira l’attenzione. Spesso viene associato alla tristezza, alla monotonia, depressione e malinconia.
Grigio perla: associato proprio alle perle come simbolo di eleganza e sofisticatezza.
Ardesia: è un colore piuttosto stabile che rievoca ambienti industriali. Utilizzato in architettura e siti di tecnologia all’avanguardia.
Bianco e varianti
La maggior parte delle pagine web hanno uno sfondo bianco (#FFFFFF). Il bianco rappresenta nascita e morte, purezza, onestà, onnipresenza e rappresenta la luce.
Per via del suo lato negativo, è necessario fare attenzione al suo utilizzo poiché evoca solitudine, vuoto e sconforto. Uno spazio completamente vuoto e bianco potrebbe annullare il messaggio che vogliamo veicolare. È importante abbinarlo ai giusti colori per bilanciare l’effetto visivo.
Per gli sfondi della pagina o di alcuni elementi, prediligi il colore bianco o le sue sfumature. Per testi e pulsanti, utilizzali solo se lo sfondo offre un contrasto elevato.
Bianco panna: è una tonalità leggermente tendente alla crema. È soffice, rassicura ed è grazioso. Ideale da abbinare a colori caldi.
Ghiaccio: dà una sensazione di freschezza e pulizia. Associato a colori freddi come il blu, indica modernità e innovazione.
Vaniglia: nel web design è un colore indicato per lo sfondo di pagine retrò o brand cozy che vogliono donare una sensazione di calore e accoglienza. Da abbinare a colori caldi come il cioccolato, il caramello e la terracotta.
Modelli di colori
Nel mondo del design esistono diversi modelli di colore che differiscono per il loro campo di utilizzo e per i colori primari utilizzati.
- RYB (Red Yellow Blue): è un modello di colore utilizzato nell’arte che prevede l’uso di vernici e pigmenti. Viene rappresentato in una ruota cromatica dove il giallo è il primo e il suo complementare è il viola. Wiki
- CMYK (Cyan Yellow Magenta Key/Black): è comunemente utilizzato nella stampa, dove i colori sono creati combinando inchiostri di ciano, magenta, giallo e nero.
- RGB (Red, Green, Blue): è il modello di colore utilizzato per gli schermi digitali come TV, monitor del computer e smartphone.
- HSL (Hue Saturation Lightness): è un modello di colore basato sulla percezione umana, dove vengono presi in cosiderazione la tonalità, la saturazione e la luminosità. È un sistema a coordinate cilindriche, basato sul modello RGB, ed è spesso utilizzato nel web design per via dell’intuitività nella manipolazione dei colori.
Esistono tanti altri modelli di colore, ma ci concentreremo su quelli principalmente utilizzati nel web design: RGB e HSL.
La ruota dei colori
Nel web design, la ruota dei colori si basa sul modello RGB.
Perché è importante comprendere il funzionamento della ruota dei colori
Sapendo come funziona la più comunemente chiamata Color Wheel, sarà più semplice per te combinare i colori in maniera armoniosa.
Scegliere i colori del tuo sito potrebbe sembrare la cosa più facile al mondo, ma ti assicuro che i tuoi colori potrebbero cozzare tra di loro, ecco perché ti parlerò di colori analoghi e complementari, e approfondirò l’argomento tirando fuori la saturazione e la luminosità per aiutarti a scegliere l’abbinamento perfetto. Keep reading!
La ruota dei colori è formata dai colori primari, secondari e terziari.
Colori primari
Rosso, verde, blu
Sono i colori base che non sono ottenuti mescolandoli con altri colori.
Colori secondari
Giallo, ciano, magenta
Si ottengono mescolando due colori primari.
Colori terziari
Rosso-arancio, giallo-verde, verde-ciano, ciano-blu, blu-magenta, magenta-rosso
Si ottengono mescolando un colore primario con uno secondario adiacente.
Schemi di colori
Le relazioni tra i colori ci aiutano a comprendere meglio come i colori interagiscono tra loro e come si influenzano a vicenda. Comprendere il funzionamento degli schemi ci permette di capire come possiamo combinare i colori per creare delle palette con abbinamenti di colori armoniosi o contrastanti.
Colori monocromatici
In una paletta formata da colori monocromatici troviamo la stessa tonalità di colore (hue) con differenti valori di saturazione e luminosità. È una scelta indicata per siti web dal design minimalista e sofisticato. Indicato per creare uno schema di colori semplice ma al 100% gradevole (non puoi sbagliare!).
Colori complementari
Questi colori si trovano nella posizione opposta della ruota come ad esempio giallo e blu. Creano un forte contrasto e si esaltano a vicenda. I complementari sono composti da un colore caldo (rosso, arancione, giallo) e uno freddo (blu, verde, viola). Nella ruota dei colori, il colore complementare si trova a +180° dal colore base scelto.
Colori analoghi
Chiamati anche adiacenti, si trovano uno accanto all’altro sulla ruota dei colori come ad esempio giallo, giallo-arancione e arancione. Esistono anche i colori analoghi estesi che ampliano la scelta delle tinte (es. verde, verde-giallo, giallo, giallo-arancio, arancione).
Colori complementari divergenti
Dopo aver scelto il colore principale, prendiamo i colori adiacenti a quello complementare. Se il colore predominante è il giallo, i due colori complementari divergenti saranno il blu scuro e il rosso-viola (proprio perché si trovano accanto al viola). I colori divergenti si trovano a +150° e -150° rispetto al colore base.
Triade dei colori
È formata da 3 colori equidistanti tra di loro all’interno del cerchio. Come puoi notare, i colori si trovano a diverse latitudini un po’ come la nostra Terra. Nella triade è importante scegliere dei colori che si trovano all’interno dello stesso cerchio, quindi stesse saturazione e luminosità. Nella ruota, i colori divergenti si trovano a 120° di distanza tra loro.
Per creare uno schema di colori armonioso, utilizzo il modello HSL.
Codifica dei colori
I modelli dei colori di cui abbiamo parlato possono essere rappresentati nel web design e codificati; significa che il colore bianco potrà essere rappresentato in un codice.
Per rappresentare il colore, utilizziamo delle regole CSS (foglio di stile).
Esistono 4 sistemi di codifica:
- Color name
- HEX
- RGB
- HSL
Color name
È un modo di rappresentare i colori attraverso dei nomi perché, a differenza dei codici come HEX, RGB e HSL, è un modo per richiamare il colore in maniera più pratica e veloce.
Ad esempio il bianco equivale a white, il nero viene rappresentato dal nome black, mentre il blu dal nome blu. Su encycolorpedia trovi tantissimi nomi di colore che puoi ordinare per tonalità, saturazione o luminosità.
È bene sapere che non tutti i colori hanno un nome corrispondente.
Nel CSS, i color name possono essere riportati in questo modo:
color: white;
background-color: white;
border-color: white;RGB
RGB non è altro che l’acronimo di Red, Green, Blue.
Il codice RGB è composto da 3 valori, ogni valore è composto da cifre che variano da 0 a 255.
Poi abbiamo anche il codice RGBA, che come avrai intuito cambia soltanto perché aggiungiamo una lettera finale. “A” sta per Alpha ed è un canale utilizzato nella grafica digitale per indicare la trasparenza o l’opacità. In pratica, con il codice RGBA rendiamo più o meno trasparente un colore.
Il codice Alpha varia da 0 a 1, dove 0 è totalmente trasparente mentre 1 è completamente opaco (cioè visibile al 100%). È però possibile esprimere una trasparenza in decimali. Se per esempio volessimo una trasparenza al 50%, utilizzeremo il valore 0.5 (ricordati di usare il punto e mai la virgola per esprimere i decimali).
Il colore bianco in RGBA avrà un codice simile a: 255, 255, 255, 0.5
Per completezza, all’interno della regola del CSS, il codice viene riportato in questo modo (racchiuso tra parentesi e preceduto da rgb o rgba):
rgb(255, 255, 255)
rgba(255, 255, 255, 0.5)Esempi di utilizzo del colore RGB nel CSS:
color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
border-color: rgb(255, 255, 255);HSL
È un modello a coordinate cilindriche e sta per Hue Saturation Lightness.
- La tonalità (hue) o tinta rappresenta la proprietà cromatica di un colore percepita dall’occhio umano come rosso, verde, giallo. È un valore espresso in gradi e varia da 0 a 360 sulla ruota dei colori.
- La saturazione (saturation) indica l’intensità o la purezza di un colore. È un valore che va da 0% (grigio) a 100% (colore pieno). Un colore altamente saturo risulta essere più brillante e intenso, mentre – al contrario – un colore con valori di saturazione bassi appare più grigio e attenuato.
- La luminosità (lightness) si riferisce alla chiarezza o oscurità di un colore. È un valore che varia da 0% (nero) a 100% (bianco). Un colore ad alta luminosità è più chiaro e luminoso, mentre un colore a bassa luminosità è più scuro e profondo.
Esempi di colori formattati in HSL:
HSL ( 0, 100, 50 )
HSL ( 120, 100, 50 )
HSL ( 240, 100, 50 )Perché usare il modello HSL
Utilizza il modello HSL per identificare i corretti abbinamenti dei colori del tuo sito web. Per evitare di creare accozzaglie di colori disarmonici, crea delle composizioni di colori utilizzando gli stessi valori di saturazione e luminosità, variando soltanto la tonalità.
Per creare una paletta di colori non è possibile scegliere dei colori a caso, devi tener conto della loro saturazione, luminosità e contrasto. Il modello HSL ci aiuta a selezionare dei colori che stanno bene tra di loro, variandone semplicemente i valori.
Per questo motivo, è sempre bene tenere come riferimento la ruota dei colori RGB e gli schemi di colori di cui ti ho parlato in precedenza, dove i colori complementari si trovano a una distanza di 180° dal colore base e gli analoghi a 30° tra di loro.
L’utilità del modello HSL si rivela ancora più chiaro quando parliamo di colori monocromatici o, semplicemente, quando vogliamo creare una versione più chiara o più scura dello stesso colore. Pensa ad esempio quando vuoi fare in modo che al passaggio del mouse sopra un bottone questo diventi più scuro mantenendone però la tonalità (es. da rosso a rosso scuro). In questo caso ti basterà semplicemente manipolare i valori della luminosità.
Dove trovo l’HSL
Per la selezione dei colori io preferisco utilizzare Figma, che però è un software online per la creazione di mockup di pagine web. Se invece preferisci utilizzare uno strumento più semplice e focalizzante, ho trovato PhotoColorPicker. È importante però che lo strumento utilizzato ti permetta facilmente di trasformare i valori HSL in HEX. Utilizza HTMLcolors come convertitore.
Esempi di utilizzo del colore HSL nel CSS:
color: hsl(0, 100%, 100%);
background-color: hsl(0, 100%, 100%);
border-color: hsl(0, 100%, 100%);HEX
Il codice HEX è preceduto dal prefisso # cancelletto e composto da sei cifre esadecimali, divise in tre coppie che si riferisco al sistema di colori RGB. Ogni coppia rappresenta l’intensità dei tre componenti di colore principali:
FF FF FF
RR GG BBLa prima coppia rappresenta l’intensità del colore rosso, la seconda coppia indica quanto verde è presente, l’ultima coppia specifica l’intensità del blu.
Nel caso in cui le cifre di ogni coppia (es. FF 00 00) siano uguali, è possibile abbreviare il codice in 3 cifre (es. F00).
#FF0000 -> #F00
#336699 -> #369
#000000 -> #000Nelle cifre del codice HEX troviamo lettere che vanno da A a F e numeri da 0 a 9. Proprio perché HEX sfrutta un sistema esadecimale formato da 16 simboli (0-9 / A-F).
Quando usare il codice HEX
Nel web design utilizziamo il codice HEX per colorare gli elementi presenti nelle pagine come titoli, sfondi, bottoni. Il codice HEX viene utilizzato nel CSS (foglio di stile) il quale viene richiamato tra le risorse presenti nella sorgente HTML.
Come ottengo il codice HEX di un colore
In tanti modi, uno fra tutti utilizzando lo strumento online Color Wheel di Canva. Scegli il colore dalla ruota e poi copia il relativo HEX.
Esempi di utilizzo del colore HEX nel CSS:
color: #fffff;
background-color: #fffff;
border-color: #fffff;Conversione dei colori
È possibile convertire un colore da un sistema di codica ad un altro. Per esempio possiamo ricavare il colore HEX conoscendo il corrispettivo RGB o HSL, e viceversa.
Tabella dei colori per il CSS
| Nome | HEX | RGB | HSL | |
|---|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | hsl(0, 0%, 100%) | |
| gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| blu | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
Come scegliere i colori del sito
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.
All’interno di questo sito parliamo di web design, io stessa sono una web designer, per cui questa guida è stata creata appositamente per imparare a scegliere i colori del sito. Però nulla ti vieta di utilizzare questa guida per creare la palette colori del tuo brand, da utilizzare sul sito, sui social, e su qualunque altro canale. Il metodo è sempre lo stesso, e i colori pure.
Per creare una paletta colori perfetta per il tuo sito web dovresti quantomeno identificare questi colori: testo, background, colore principale.
01. Scegli il colore principale
Il colore principale si riferisce al colore scelto per rappresentare l’identità visiva del brand e, nel web design, è quello che spicca maggiormente all’interno di una pagina web, ciò non significa che sia – a tutti i costi – il colore predominante, in termini di %, all’interno della pagina.
Utilizza il colore principale per mettere in risalto elementi chiave come titoli prinicipali, pulsanti, testi evidenziati, icone.
02. Aggiungi un secondo colore
È un colore che serve a creare contrasto. Se ad esempio hai scelto di utilizzare lo schema completamentare, il colore secondario potrebbe essere esattamente l’opposto a quello principale nella ruota dei colori. Altrimenti, utilizzando uno schema monocromatico, il colore d’accento potrebbe essere semplicemente un colore più chiaro (meno luminoso) del principale.
Il colore d’accento può essere utilizzato per i pulsanti secondari e di minore importanza, icone ed evidenziare alcune sezioni.
03. Scegli il colore per il background
Per far sì che i colori della pagina web abbiano un sufficiente contrasto, lo sfondo dell’intera pagina o delle singole sezioni devono essere neutre. Nel caso di un layout “light” (cioè chiaro), il colore neutro equivale al bianco puro o si avvicina di molto (ad esempio un color crema chiarissimo).
04. Scegli il colore del testo
Generalmente è un colore molto scuro, tendente al nero. Per semplicità e coerenza, potresti ricavarlo dal colore principale: ti basterà abbassare la luminosità. Ricordati sempre di fare un check di contrasto tra i colori di background e del testo.
Ecco il tool che utilizzo per controllare il contrasto: https://coolors.co/contrast-checker
Esempi palette colori per siti web
La regola 60-30-10 applicata al web design
La regola 60-30-10 è un principio di design utilizzato per garantire che i colori di un progetto siano armoniosi tra loro, ed è applicabile anche al web design.
- 60% – Colore dominante: è il colore maggiormente utilizzato nella pagina web. Generalmente richiama il colore di sfondo della pagina.
- 30% – Colore secondario: è utilizzato per creare contrasto al colore dominante. Può essere applicato ai titoli, allo sfondo dell’header e del footer.
- 10% – Colore d’accento: ha un grande livello di contrasto rispetto al dominante. Solitamente lo utilizziamo nei bottoni e nei link da evidenziare. È probabile che questo sia il colore che identifica il nostro brand.
Sebbene la regola suggerisca una suddivisione precisa delle percentuali (60% colore dominante, 30% colore secondario e 10% colore d’accento), nel web design queste proporzioni non sono poi così rigide.
La regola del contrasto sui colori
Nel web design, il contrasto è essenziale per assicurare la leggibilità del contenuto.
Fino ad ora, abbiamo visto come creare uno schema di colori armonioso utilizzando il modello HSL, che lavora su tonalità, saturazione e luminosità di un colore.
Limitazioni del Modello HSL
Sebbene il modello HSL sia utile per creare palette cromatiche armoniose, presenta una limitazione significativa: non riflette esattamente come l’occhio umano percepisce la luminosità.
Due colori con la stessa luminosità (L) possono apparire molto diversi in termini di leggibilità e contrasto. Questo può essere problematico quando si scelgono i colori per il testo e i pulsanti, che devono contrastare sufficientemente con lo sfondo per essere facilmente leggibili.
Sebbene il modello HSL sia utile per creare palette cromatiche armoniose, presenta una limitazione significativa: non tiene conto della percezione dell’occhio umano.
Due colori con la stessa luminosità (L) possono apparire molto diversi in termini di leggibilità e contrasto. Questo può essere problematico quando si scelgono i colori per il testo e i pulsanti, che devono contrastare sufficientemente con lo sfondo per essere facilmente leggibili.
Verifica del contrasto dei colori
I seguenti passaggi mi aiutano a verificare se i colori utilizzati hanno sufficiente contrasto:
- Il colore scelto per i titoli e i testi deve assolutamente superare la prova di contrasto. Per vedere come i colori si comportanto insieme in un layout realistico, creo sempre un mockup che include lo sfondo, i testi e i pulsanti.
- Per ogni colore presente nella paletta, ricavo una scala di sfumature che schiariscono o scuriscono il colore di partendo. Facendo così, avrò delle varianti da poter utilizzare in ogni occasione o elemento e che mi permetta di superare la prova contrasto.
- Faccio sempre la prova del 9 utilizzando il tool online di coolors.co
Strumenti per creare un abbinamento di colori per il web
Nei segnalibri del mio browser ho decine e decine di tools relative ai colori. Per te ho selezionato quelli che potrebbero fare la differenza durante la scelta dei colori del tuo design.
- Encycolorpedia: ti fornisce il nome del colore e diversi schemi per aiutarti a generare una paletta armoniosa.
- Material 3 Design Kit: plugin di Figma che aiuta a gestire i colori nella UI. Utile per web designer e sviluppatori.
- Material Tool for picking color: un tool sempre di material.io che ci aiuta a creare uno schema di colori facendo attenzione ai contrasti
- Canva: è un tool molto semplice da utilizzare e da comprendere. Dopo aver scelto il colore primario potrai ricavare i colori da abbinare. Indicato per i principianti.
- Coolors: per verificare che i colori passino la prova del contrasto.
- Realtime Colors: per creare una paletta colori e applicarli in realtime nel template di una pagina web.
Conclusione
Spero che questa guida ti sia stata d’aiuto per conoscere cosa si nasconde dietro alla scelta dei colori, come ogni colore possa incidere a livello subconscio nella decisione degli utenti, ma soprattutto come creare uno schema di colori che si abbinino tra di loro armoniosamente utilizzando dei metodi alla portata di tutti e, perché no, imparando a utilizzare degli strumenti online che ne facilitano nella scelta.
Per scrivere questa guida sono state necessarie ore e giorni di ricerca online, decine di libri letti, per non parlare di una cinquantina di tool online testati, 20 anni di esperienza e tanta tanta pazienza nel rendere più accessibile il contenuto anche ai neofiti e non addetti ai lavori.
Dopo diverse ricerche posso asserire che sul web c’è moltissima confusione, ti basti cercare la ruota dei colori tra le immagini e vedere come anche i più grandi brand esperti confondano le ruote RGB e RYB e non ne menzionino le differenze. Per non parlare del fatto che le ricerche in italiano variano assolutamente rispetto a quelle inglesi; ti basti cercare “HSL” sul Wikipedia EN dove trovi una definizione corretta e esaustiva, e poi ripetere la stessa ricerca in Wikipedia italiana, dove otterrai un redirect verso la definizione di “HSB/HSV” che è sempre un modello di colori, ma con significato e applicazione differente, e quindi assolutamente non equivalente.
Con questa guida ho voluto, a modo mio, riportare l’ordine delle cose, concentrandomi sui colori utilizzati nel digitale e, più precisamente, nel web design. Ci sono errori? Scrivimi e sistemiamo per il bene dell’informazione. Vorresti trattare l’argomento sul tuo blog? Linka la pagina.
Fonti
My 2 cents.
