Come realizzare uno schema colori professionale per un sito web.
Ovvero adatto al prodotto/servizio di cui si occupa la tua interfaccia, accessibile a tutti e in grado di condizionare le conversioni e le scelte dei tuoi utenti

Html e css

Autore: Sanchini Mirco

Ogni volta che ci troviamo a realizzare un sito web, o un’applicazione, o una qualsivoglia interfaccia grafica, arriva sempre il momento in cui dobbiamo fare i conti con i colori. È un passaggio obbligato! Un nuovo progetto, un nuovo schema colori e sempre le stesse domande: Quali colori scelgo? Come posso abbinarli? Come li applico?

In questo articolo ti fornirò tutti gli strumenti necessari a risolvere queste domande. Ti aiuterò a creare schemi di colori attraenti, che risultino quindi piacevoli e armoniosi, coerenti con il prodotto o il servizio di cui si occupa la tua interfaccia ed efficaci, ossia in grado di condizionare delle conversioni. Nello specifico ti guiderò a capire:

i giusti accordi cromatici;

il significato dei colori;

gli standard di accessibilità 508 e WGAG 2.0.

i modelli di colore più usati per il web.

come colorare i vari elementi HTML con i CSS.

come programmare un sistema di assegnazione automatico dei giusti accordi cromatici con LESS.

Non sai da dove iniziare? Partiamo dal logo aziendale e da tre considerazioni.

I primi colori che andremo a mettere nella nostra tavolozza li peschiamo direttamente dal logo aziendale. Questo sarà l’inizio del nostro schema, che svilupperemo su tre considerazioni.

1^a considerazione: Il logo aziendale deve emergere sugli altri elementi del sito. La collocazione può aiutarci in tal senso, per esempio in alto a sinistra, ma a mio avviso non è sufficiente. Meglio distinguerlo anche cromaticamente.

2^aconsiderazione: Se i colori del logo aziendale si discostano troppo dalle convenzioni cromatiche associate al servizio/prodotto di cui si occupa il tuo sito web, potrebbe essere il caso di applicare tali convenzioni cromatiche agli altri elementi del sito, ma stando bene attenti a scegliere delle tonalità che si armonizzino con il brand aziendale. Nel dubbio è sempre meglio usare delle gradazioni del colore del logo (analoghe o monocromatiche).

3^a considerazione: Evidenzia gli elementi del sito che generano conversioni con un colore contrastante. Potremmo applicarlo ai pulsanti, a un’offerta, o addirittura ad un’intera area del sito. Senza esagerare però e stando attenti a non utilizzare quei colori che per convenzione vengono utilizzati per segnalare un errore o un’azione di arresto, come per esempio il rosso.

Accordi cromatici per il web

Come individuo i corretti accordi cromatici?

Nel paragrafo precedente ho usato termini come colori analoghi e complementari, accordi tonali e monocromatici, ma di cosa si tratta? Se hai letto qualcosa sulla teoria del colore è molto probabile che tu conosca già le risposte. Se invece non hai mai letto niente su questo argomento non preoccuparti, esistono alcuni siti web davvero ben fatti in grado di estrarre tutti questi accordi cromatici da un singolo colore, dal tuo logo per esempio.

Ho scelto di approfondire la teoria del colore in un altro articolo, che insegna a programmare un sistema di colori generato da un colore primario. In quel caso ho ritenuto che la conoscenza di questa teoria fosse propedeutica alla programmazione. Se sei interessato alla teoria del colore forse potrebbe interessarti questo mio precedente articolo che puoi leggere cliccando qui.

Questi sono i miei siti web preferiti per trovare le giuste combinazioni di colori partendo da un colore principale:

ColourCo;

Color Scheme Designer;

Coolors.

Se invece sei alla ricerca di armonie ispirate alle emozioni provocate da un’immagine, un paesaggio, un’architettura, o un ritratto, ti consiglio queste due splendide applicazioni:

Canva;

Color Palette Generator.

100 combinazioni di colori ispirate ad altrettante immagini.

significato dei colori e convenzioni cromatiche per il web

Quali convenzioni cromatiche posso associare al servizio o al prodotto di cui si occupa il mio sito web? Breve guida al significato e all’uso dei colori.

Una volta trovate le corrette combinazioni cromatiche da associare ad un logo aziendale potrebbe essere il caso di confrontarle con le convenzioni cromatiche. Perché? Perché la teoria del colore riguarda le armonie tra i vari colori, ma non si occupa direttamente dell’interazione energetica tra il colore e l’individuo. La conoscenza del significato dei colori completa il messaggio che il colore trasmette alla nostra parte animale, o inconscia.

Rosso: Il colore rosso è il simbolo del fuoco, del sangue e dell’energia vitale sia mentale che fisica. Infonde una straordinaria forza sia psichica che motoria. Può assumere caratteristiche di pericolo (uscita di sangue) soprattutto se combinato con forme di fuoco (triangolari), ma anche di grande stabilità nelle sue tonalità più calde, come il rosso mattone. L’abbinamento al fuoco e al sangue lo rendono adatto per il mondo della ristorazione, del resto anche per il Feng Shui il rosso è il colore da utilizzare in una sala da pranzo.

Rosa: Il colore rosa aumenta l’intuito nelle donne e mette gli uomini nella condizione di capirle al meglio. È associato all’infanzia femminile e per questo è ideale per quei siti web a tinte nostalgiche che si rivolgono ad un pubblico femminile.

Arancione: Il colore arancione è un colore vivace e accogliente ed è simbolo di armonia interiore, creatività, di fiducia in sé stessi e negli altri. Per questi motivi viene considerato il giusto colore da usare in tutti quegli ambienti dove è utile favorire la conversazione. Potrebbe essere utilizzato in un sito web a sfondo sociale, o dove l’interazione gioca un ruolo strategico.

Giallo: il colore giallo è simbolo della luce del sole ma anche della conoscenza e dell’energia intellettuale. Nelle sue tonalità più accese emana vibrazioni vivaci e allegre che lo rendono perfetto nei siti web rivolti ai bambini (anche per il Feng Shui è la scelta ideale per la camera dei bambini), mentre nelle sue tonalità più spente richiama alla carta invecchiata e alle pergamene, adatto quindi in siti web che vogliono trasmettere intelletto, conoscenza e autorità.

Verde: Il colore verde simboleggia la perseveranza e la conoscenza superiore. Per il Feng Shui è il colore del rinnovamento e della rigenerazione, non a caso si usa spesso in luoghi deputati alla salute come cliniche e ospedali. Essendo poi anche il colore dell’abbondanza, nelle tonalità più scure viene associato al denaro e per questo si usa quando si vuole suggerire ricchezza e opportunità finanziaria. Nelle tonalità più chiare è associato alla natura e all’ambiente, usalo senza pensarci su due volte se con il tuo sito miri a trasmettere i valori etici legati a questi concetti.

Blu: Il colore blu è il colore del cielo e dell’infinito. È armonioso e rilassante, ha la facoltà di riequilibrare la sfera emotiva e rappresenta l’etica, l’affidabilità e la sicurezza. Per il Feng Shui il blu è un colore che emana energia positiva e che trasmette una sensazione di concentrazione e serenità, adatto per ogni ambiente. Nelle sue tonalità più scure viene spesso utilizzato nei siti web aziendali e di business, proprio per rimarcare questi concetti di affidabilità e di potenza. Nelle tonalità più chiare l’etica, l’affidabilità e la positività assumono un aspetto più leggero e informale, di amicizia con l’utente, come dimostra l’uso frequente che ne fanno molti social.

Viola: Nello spettro luminoso il colore viola è posizionato agli antipodi del Rosso, stimola il desiderio di avere un legame, accresce la capacità creativa e la fantasia, inibendo però l’eccesso di razionalità. Nelle sue tonalità più scure trasmette ricchezza e lusso, in quelle più chiare evoca sentimenti romantici. Il Feng Shui consiglia di utilizzarlo all’interno degli ambienti più interni e preziosi della casa. È adatto per un sito web di un brand lussuoso e misterioso, o dove i contenuti hanno un forte impatto emozionale.

Marrone: Il colore marrone è simbolo di soddisfazione fisica. È un colore caldo e genuino, come la terra, il legno, il caffè. Trasmette accoglienza e calore e per questo è da tenere in forte considerazione se dobbiamo realizzare un sito web di una struttura ricettiva, o di una qualsiasi attività incentrata sull’ospitalità, sul comfort, o sulla tradizione. Per accentuare i toni caldi di questo colore possiamo associarlo alle sue tonalità più chiare, ad un colore crema per esempio, piuttosto che al bianco. Se invece vogliamo utilizzarlo in situazioni più dinamiche possiamo evocare l’energia nutriente del marrone, quella associata al caffè, o al cioccolato, abbinandolo al nero, al bianco e al rosso.

Bianco e nero: Il bianco e il nero sono i colori contrastanti per antonomasia, il bianco contiene tutti i colori dello spettro luminoso e simboleggia l’inizio della fase vitale, il nero è la negazione del colore e simboleggia la conclusione della fase vitale. In editoria sono la carta e l’inchiostro, nel web sono i contrasti più usati tra sfondo e testo. Tuttavia questi due colori evocano molte connessioni, il nero è associato alla trasgressione, alla ribellione, ma anche alla classicità, alla raffinatezza e al potere (a seconda dell’ordine dell’impaginato e della capacità di contenerlo o di esserne “offuscati”), mentre il bianco rappresenta il futuro, l’innocenza, la purezza. I siti web a tinte bianche e nere sono di grande impatto visivo. Se il vostro sito web è incentrato sulla forza dei contenuti il bianco e il nero gli daranno un aspetto credibile e neutrale, non a caso sono i colori più usati nei siti di news.

accessibilita dei colori per il web

Test di accessibilità: Un ultimo sforzo prima di chiamare tutti a vedere il tuo schema colori.

Cosa significa? Significa che se il web è progettato per arrivare a qualsiasi persona, indipendentemente dall’hardware, dal software, lingua, cultura, o abilità fisica o mentale, anche il nostro sito web (e quindi anche il nostro schema dei colori) deve essere progettato per essere accessibile ad una vasta gamma di capacità cognitive. Questa accessibilità viene definita da due standard: 508, che si applica al settore pubblico (tutti i siti web .gov sono stati legalmente obbligati a rispettare la Sezione 508 dal 1998) e WGAG 2.0, che si applica al settore privato.
Lo standard WGAG 2.0 ha tre livelli di conformità A (minimo), AA (medio) e AAA (massimo). Il livello AA è un po’ lo standard del settore. Il rapporto del contrasto di livello AA fra il colore del testo e quello dello sfondo è 4,5: 1. E può essere verificato con un paio di strumenti di controllo:

Colorable;

Contrast Ratio;

Griglia di contrasto EightShapes.

Dopo avere realizzato lo schema dei colori si passa alla tinteggiatura.

Dentro un sito web i colori vengono dati con i CSS. Il colore viene definito dalla proprietà “color” e ci permette di tinteggiare almeno tre caratteristiche di ogni elemento HTML: il colore in primo piano, ovvero quello del testo (color), il colore di sfondo (background-color) e il colore del bordo (text-color).

css web color

Definiamo i valori dei colori tramite CSS.

I colori possono essere espressi in vari modi nel contesto di una regola CSS. Questi sono i modelli di colore più diffusi sul web:

RGB: modello della tricromia additiva basato sull’addizione dei colori primari (Red, Gree, Blue) per ottenere tutti gli altri, in percentuale o in una scala numerica che va da 0 a 255;
h1 { color: rgb(255, 255, 255) }

HSL: modello additivo definito dalla tonalità del colore (Hue), dalla Saturazione e dalla Luminosità.
h1 { color: hsl(0, 0%, 100%)}

HEX: sistema di codifica dei colori RGB basato su 16 caratteri (10 numeri e 6 lettere) che si ottiene assegnando 2 caratteri a ciasun valore RGB ed è precedto dal simbolo #.
h1 { color: #ffffff}

CMYK: modello della quadricromia sottrattiva basato sulla sovrapposizione dei valori complementari dei colori primari (Cyan, Magenta, Yellow) e del nero (blacK);
h1 { color: cmyk(0%, 0%, 0%, 0%)}

NOME DEL COLORE: Tutti i browser moderni supportano 140 nomi di colori (ad es. red, black, white, ...) che potete vedere a questo link: www.w3schools.com
h1 {color: white}

TRASPARENZE: Aggiungendo un valore “a” (alfa) ai primi due modelli (RGB e HLS) si ottengono delle gradazioni di trasparenza.
Il valore “alfa” va da 0 a 1, dove 0 rende un colore totalmente trasparente e 1 completamente opaco.
h1 { color: rgba(255, 255, 255, 0.5)} - h1 {color: hsla(0, 0%, 100%, 0.5)}

SFUMATURE e GRADIENTI: Le gradazioni di colore consentono di visualizzare 2 o più colori all’interno di uno stesso elemento. Possono essere nette o sfumate (a seconda della percentuale del punto di arresto), lineari o radiali (linear-gradient / radial-gradient).
background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
background-image: linear-gradient(direction, color-stop1 punto di arresto%, color-stop2, ...);

Ecco tre siti web dove potrete divertirvi a trovare le corrispondenze dei vostri colori preferiti:

https://rgb.to/html-color-names/1

www.colorexplorer.com

www.w3schools.com

Come posso colorare i vari elementi HTML? Usi e sintassi della proprietà color.

Fortunatamente il controllo dei colori della tua pagina HTML è davvero molto semplice e puoi aggiungere colore a quasi ogni elemento. Tuttavia dato che gli elementi HTML sono davvero molti, in questa rubrica analizzerò solo alcuni elementi di tre macro categorie: Testi, Contenitori, Bordi e Immagini. Le proprietà di ciascuna macro categoria saranno analizzate in tre rubriche dedicate. Vediamo come fare!

Testi:

Lettere {color: white} è il colore del testo e, salvo altre assegnazioni, di ogni sua decorazione;

Decorazioni {text-decoration-color: red} per assegnare alle sottolineature, barrature ecc. di un testo un colore diverso da quello delle lettere;

Ombra {text-shadow: 5px 5px 5px #CCC} per definire l’ombra di un testo - distanza x, y, sfumatura, colore;

Spazi vuoti {text-emphasis: filled red} è il colore dei simboli assegnati agli spazi vuoti di un testo;

Cursore {caret-color: red} è il colore del cursore di immissione del testo.

Contenitori:

Sfondo {background-color: white} è il colore di sfondo di qualsiasi elemento;

Filetti {column-rule-color} è la linea che separa le colonne di testo;

Contorno {outline-color: red} è la linea che è disegnata attorno a un elemento, al di fuori del border.

Ombra {box-shadow: 5px 5px 5px #CCC} per definire l’ombra di un box - distanza x, y, sfumatura, colore;

Bordi:

Tutti {border-color: white} è il colore di ogni lato del bordo dell'elemento;

Singolo {border-left-color: white} è il colore del bordo sinistro dell’elemento. Il colore può essere assegnato ad ogni bordo in questo modo: border-right-color, border-top-color, border-bottom-color;

Singolo della linea di testo {border-block-start-color}; è il colore del bordo superiore della linea di testo. Il colore può essere assegnato ad ogni singolo bordo in questo modo: border-block-end-color (inferiore), border-inline-start-color (sinistro), border-block-inline-color (destro).

Immagini SWG:

Riempimento di un file SWG {fill: white}

Programmare un sistema automatico capace di assegnare i giusti accordi cromatici ai vari elementi HTML partendo da un colore principale.

Mettiamo il caso che dopo avere progettato il nostro schema di colori armonioso, avere ricevuto l’ok di tutti e averlo applicato ad ogni elemento del nostro sito arrivi il nostro capo, o magari la persona che ci ha commissionato il sito a dirci con tutto l’entusiasmo di questo mondo «Ehi perché non facciamo una prova?».
Queste semplici e apparentemente innocue paroline sai bene cosa significano. E infatti mentre cerchi di sostenere la situazione fingendo di ricambiare l’entusiasmo in realtà ti organizzi mentalmente per smontare ogni tipo prova «Un carattere meno rotondo? Vuoi dire un Serif? Tipo un Lora o un Bitter? Ma ne sei proprio sicuro?». Purtroppo questa strategia non porta mai niente di buono perché dentro di te sai bene che se non è il font è il colore.
Già il colore … come se esistesse un pulsante che lo schiacci ed è in grado di cambiare i colori, le tonalità, le trasparenze e i contrasti che hai appena finito di dare a tutti gli elementi di tutte le pagine del tuo sito web seguendo per filo e per segno quel progetto cromatico che ti era costato così tante fatiche e che adesso è appeso all’esito di quell’«Ehi perché non facciamo una prova?».

Se anche te sei soggetto a questo tipo di stress e non sai come venirne a capo posso darti una grande notizia: ti informo che quel pulsante esiste. Si, hai capito bene, esiste davvero. E come tutte le cose preziose e di una certa importanza è giusto dargli il suo spazio. Se sei interessato a realizzare un sistema automatico capace di assegnare i giusti accordi cromatici ai vari elementi HTML del tuo sito web partendo da un colore principale posso spiegartelo passo, passo in questo articolo.

Stampa

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Articoli in evidenza