Scegliere la palette di colori per un sito web

Dai forma alla brand identity del sito web con lo schema colori

creativecode avatar Giulio Tiseo

22 Feb, 2021

~15 min.

Il momento della selezione della palette di colori di un sito web non va preso sotto gamba. Pur essendo un aspetto estremamente affine al graphic design, non va ignorato il fatto che il sistema dei colori influenza in modo sostanziale l'efficacia della navigazione in rete.

Scegliere la palette di colori per un sito web
Requisiti

La scelta della palette di colori o schema colori del tuo sito web richiederebbe una conoscenza approfondita della teoria dei colori. Tuttavia ho scritto questo articolo per aiutarti a definire una palette di colori coerente e armonica a prescindere dal tuo livello di conoscenze. Basterà avere un buon pattern benchmark replicabile in ogni progetto e sarai in grado di creare una palette di colori super efficace. Prima di procedere però assicurati di aver letto l’articolo precedente dove ti parlo dello sviluppo di un buon design process

Quando progettiamo interfacce abbiamo bisogno di svolgere un attento studio di user experience ed è importante trovare un buon pattern benchmark da avere come riferimento. Per “pattern benchmark” intendo una soluzione rodata, sistematica e funzionale. Non dobbiamo partire sempre dal foglio bianco, ma avere una scaletta di cose ben chiara e una serie di riferimenti fondamentali. Quindi non sarà richiesta la sensibilità di Van Gogh, non preoccuparti. Occorrerà solo un po’ di tempo, tutto qua.

# Premesse prima di capire come selezionare la giusta palette di colori

In questo articolo entriamo nel vivo della progettazione e iniziamo a riflettere sugli atomi del design, partendo dagli elementi più astratti che comporranno il sito web. Il mio scopo è quello di ottenere uno schema di colori significativo e coerente. I colori che selezioneremo oltre all’essere armonici fra loro, dovranno garantire un eccellente standard di accessibilità, così che gli elementi dell’interfaccia siano distinguibili.

Per raggiungere questo obiettivo selezionerò un colore primario, uno secondario e le relative variazioni.

La scelta della palette di colori è uno dei punti dolenti con il quale dovrai scontrarti nella tua carriera di designer.

Ho avuto esperienze di vario tipo nel corso del mio lavoro: dai clienti che portavano in ufficio studi scientifici su quanto un colore potesse influenzare il subconscio, a quello che semplicemente affermava: “Fallo tutto blu perché è bello. Punto.“.

Se non vuoi che la scelta della palette di colori diventi un vero e proprio incubo e non ti convincono le richieste avanzate dal cliente (cerca di valutare il suo punto di vista nel modo più oggettivo possibile e con estrema umiltà), dovrai trovare le giustificazioni adatte per fargli cambiare idea.

Esempio di color palette
Esempio di color palette

Il colore brutto non esiste

Mettiamoci tutti in testa una cosa: quando lavoriamo ad un progetto di design dobbiamo essere coscienti del fatto che i colori sono tutti belli.

Non si sceglie un colore perché “ci piace“. Capirai che se la mettiamo su questo piano, il lavoro terminerà ancor prima di cominciare. Fare design ponendo le basi del proprio lavoro su valori prettamente soggettivi, è una cosa molto sbagliata.

Non confondere il design con l’arte! Il nostro lavoro non sarà ispirato dal vento, dal tempo o dal periodo dell’anno. Devi costruire un’immagine coerente e funzionale per un brand, ovvero qualcosa che non arriva in nessun modo a concetti artistici elevati come la percezione del mondo dal punto di vista dell’artista.

Nel mio caso, il mio cliente sarei io (quindi il peggiore cliente dell’universo for sure) tuttavia farò in modo che il discorso possa essere valido anche per te che magari starai combattendo con i clienti o pensando alla tua brand identity.

Da dove cominciare?

Ho visto designer selezionare la palette di colori del loro siti web aprendo la ruota colore e cavandosela con qualche click buttato apparentemente a caso. C’è chi invece ha studiato qua e la da manuali esoterici sulla psicologia dei colori e si affida completamente a quel tipo di informazioni. Infine altri preferiscono semplicemente delegare l’incarico a graphic designer con più esperienza. Personalmente utilizzo un modo più “casereccio” e articolato. Aprire il libro o fare click sulla ruota colore non sono le soluzioni al problema, ma rappresentano due delle azioni più importanti che svolgeremo nella nostra ricerca.

Quel che ti consiglio di fare è di fissare questa regola: partire da un colore scelto dopo un’analisi del contesto, per poi approfondire uno studio sui giusti modelli concettuali cercando in rete e sui libri quante più informazioni possibili. Se reputi che le informazioni ricercate siano convincenti, allora probabilmente è la scelta giusta. Una volta messo tutto nero su bianco, potrai presentare il tuo studio al cliente.

Ma adesso arriviamo al dunque: come si costruisce praticamente la palette di colori?

# La scelta del Primary Color

Un buon design e soprattutto una palette di colori coerente, necessita innanzi tutto di un base da cui partire. Il primary color è il colore che identifica il brand. Spesso si parte selezionando il colore dominante del logo e poi si procede con i colori secondari e le variazioni.

È fondamentale dunque avere una chiara idea di cosa sia il brand che vogliamo mostrare sul sito, quali soluzioni offre, a chi si rivolge, in che toni porsi nei confronti degli utenti, ecc.

Nel mio caso voglio fare tutto da zero, quindi per semplicità andrò a scegliere il mio primary color partendo da una base di 4 tonalità: rosso, verde, blu e il giallo. Se vuoi cimentarti nello stesso esercizio, ti consiglio di lasciar stare per il momento le varie sfumature o tonalità. Fa finta che l’arancione, il viola, il ciano, ecc. non esistano. Per il momento scegli uno fra questi quattro, poi ci sarà il tempo di lavorarci su.

Scelta dei colori rosso giallo verde e blu
È troppo complesso iniziare un lavoro di ricerca sulla palette pensando di avere a disposizione 16 milioni di colori. Per semplificare gli step iniziali, scegli fra uno di questi quattro secondo una logica derivata dagli obiettivi, dal target e dal carattere del brand

Analizzare il contesto: la palette di colori dei siti competitors e siti affini

Da questo momento in poi mi occuperò di descriverti quelle che sono state le mie riflessioni e i miei approfondimenti sul progetto che andrò a sviluppare, ovvero la selezione di una palette per il nuovo creativecode.it. Sappi che non voglio fare l’antipatico che vuol parlare solo di sé e del suo sito, piuttosto mi auguro che le mie riflessioni possano aiutarti a trovare ispirazione per i lavori che svolgerai d’ora in avanti.

Vediamo rapidamente di fare una piccola analisi sulle quattro tonalità.

Scegliere il blu

Scegliendo tonalità come il blu sentirei il bisogno di creare attorno al mio sito una forte sensazione di fiducia e di stabilità. È un colore molto calmo che da l’idea di affidabilità e professionalità, basti pensare ad alcuni famosi brand sanitari che smarmellano blu in ogni dove.

Questo dato l’ho riscontrato anche nel corso dell’analisi dei siti affini al mio blog. Si tratta infatti di professionisti che offrono consulenza e formazione on the job sulle tecnologie web e il loro target sono principalmente aziende e altri professionisti.

Scegliere il verde

Chi ha scelto il verde come primary color probabilmente si aspetta che l’utente percepisca l’idea di progresso e di crescita. Il verde è un colore tanto associato alla natura quanto al denaro o al lavoro. In tutti i casi mette in risalto valori come il “crescere bene e in salute”.

Dall’analisi fatta sui siti affini al mio blog, coloro che hanno usato il verde sono principalmente blog e community che si interessano alle evoluzioni delle web design. Si tratta di realtà estremamente future-proof e quindi anche piuttosto avanzate in termini di contenuto.

Scegliere il rosso

La scelta del rosso come primary color dovrebbe attrarre l’attenzione di chi sta cercando un colore estremamente energico e carico di entusiasmo. È un colore decisamente coraggioso ed estroverso e lo vedo particolarmente indicato ad un pubblico giovanile.

In base a ciò che ho potuto verificare in rete sui siti affini al mio blog, le tonalità di rosso o vicine al rosso sono utilizzate da siti di e-learning che si rivolgono principalmente a ragazzi interessati al coding e al design.

Scegliere il giallo

Il giallo è un colore che allude ad un forte sentimento di ottimismo e modernità. È il colore della positività e spesso l’ho visto applicare in ambito tecnico.

Su quella che è stata la mia analisi, il giallo l’ho incontrato sui blog di programmatori e sviluppatori. Anche in questo caso, come nel caso del verde, il livello dei contenuti è molto alto a livello tecnico ed è esclusivamente rivolto a chi nella vita programma.

Cosa ho scelto?

Alla fine la mia scelta è ricaduta sul rosso.

Questo perché il mio target è un pubblico di ragazzi e di appassionati che si stanno approcciando a questo mondo e che vogliono sperimentare negli antri del design e del coding.

Sulla base dei valori che vi ho indicato, il rosso è decisamente più incline al mio modo di essere ed è più affine al progetto per il nuovo creative code.

Inoltre, uno dei valori essenziali che voglio attribuire al mio progetto è quello di essere riconoscibile rispetto ai competitors. Quel che ho riscontrato è un certa carenza di siti web che si occupano di coding e design che abbiano costruito la loro immagine su una base di rosso. Può essere ancor più stimolante provare questa strada, che mi permetterebbe di creare un’immagine molto più facile da distinguere.

Attenzione: non confondere i competitors con le aziende leader di settore. Difficilmente queste ultime sono in concorrenza con noi e da loro è possibile estrarre numerosi benchmark pattern utili. I leader non sono i nostri competitors, possono essere al contrario la nostra fonte di ispirazione! Sarebbe assurdo altrimenti, come chiedere ad un chitarrista Hard Rock di non essere influenzato dai pezzi dei Led Zeppelin.

Mi è venuta una voglia matta di ascoltarli. Facciamo una piccola pausa?

🎵 Whole Lotta Love 🎵

Ok, torniamo a noi. Adesso che ho capito qual è il mio colore di riferimento, occorre trovare la sfumatura giusta.

# Comprendere il carattere del brand

Quando iniziamo a parlare di sfumature, parliamo del carattere che il nostro brand deve trasmettere. In questa fase occorre quindi psicanalizzare in un certo senso il cliente, in modo da percepire quali sono le sue sensibilità e quali di queste verrebbero trasmettere nel suo progetto.

Ogni brand è figlio di chi lo pensa, la comprensione del cliente darà una forma a ciò che il brand sarà. Se tu sei il cliente di te stesso, il discorso non cambia affatto. La sola differenza è che dovrai sottoporti all’analisi da te.

Trovare le parole giuste

Un modo per iniziare può essere quello di scrivere su un foglio di carta tutte le parole, frasi o sensazioni che ritieni pertinenti al progetto. Vai a ruota libera, cercando di non cadere nella trappola di uscire dal perimetro dei tuoi obiettivi: si sta parlando del brand, di nient’altro. Questo è il momento del brainstorming, alimenta la tua creatività anche con vere e proprie frasi su quello che vorresti essere. Pensa a degli slogan e perché no, anche dei neologismi!

Non mi interessa se tifi Roma o Lazio, non è questo un buon motivo per fare il sito giallo-rosso o bianco-celeste. Metti da parte qualsiasi contesto esterno per il momento e focalizzati solo sul progetto a cui stai dedicando il tuo tempo.

Nel mio caso ad esempio ho pensato a parole e frasi di questo tipo: “futuristico“, “avvincente“, “divertente“, “alla mano“, “contenuti per ragazzi e giovani professionisti“, “scoperta“, “voglia di imparare“, “modernità“, “coraggio“, “sorpresa“, “avanguardia“, ecc.

Da quest’idea possiamo iniziare a capire quale sarà la tendenza del colore scelto.

Vorrei creare qualcosa di futuristico, ovvero un colore che dia l’idea di un tizio che ti viene vicino e dice:”Ehy, su questo sito ci occupiamo del futuro delle tecnologie web, ti va di imparare?“.

Il tono lo immagino brillante, leggermente saturato. Sarebbe bello poter ottenere qualcosa che dia l’idea di “incandescente”, che porti con sé anche un alone di magia vagamente futuristica.

Non pensate che le mie siano pippe mentali. Questo tipo di riflessioni aiutano a ragionare e fantasticare allo stesso tempo. È un esercizio creativo molto utile e stimolante! Prova!

Trovare l’ispirazione giusta

Ok, diciamo che io sono orientato su un rosso ciliegia . Se anche tu sei pronto, non ci resta che andare su una qualsiasi ruota colore e cercare il tono giusto.

Personalmente, sulla scelta del colore singolo, trovo molto simpatico il tool name that color, perché oltre ad avere la ruota di colori, mostra il nome attribuito a quella tonalità. Sembra una sciocchezza ma può essere una buona fonte di ispirazione. Il colore che ho scelto si chiama per l’appunto “Torch red” ed è un #F5003E.

Se non riesci a trovare qualcosa di soddisfacente, hai bisogno di un po’ di ispirazione. Prova: Pinterest, Behance, Dribbble. Approfitta di questo tempo per seguire artisti o pagine di Instagram che parlano di UX Design. In particolare queste ultime presentano una quantità spropositata di interfacce che ti suggeriranno anche alcune delle tendenze di design che vanno per la maggiore. Salvale in un archivio, campionale e provale sulla tua ruota colore, magari apportando qualche miglioria.

Trovare ispirazione palette su Pinterest
In cerca di ispirazione su Pinterest

Attenzione, c’è un rischio. Quando si visitano pagine di questo tipo, la tua attenzione potrebbe spostarsi su qualcosa di diverso dal colore che hai scelto con così tanta cura. Non cedere per ora, se hai riflettuto così a lungo e hai stabilito che la tua tonalità è quella, non prendere in considerazione altro e mantieni il focus sui tuoi obiettivi!

# La gerarchia dei colori e la leggibilità

I colori indicano all’utente quelli che sono gli elementi interattivi della pagina, come sono relazionati rispetto al resto dei contenuti e il loro livello di importanza. Chiaramente gli elementi più importanti, quelli che generalmente richiedono l’interazione dell’utente come ad esempio le classiche call to action, meritano un livello di prominenza superiore rispetto al resto del contenuto. Il colore in questo senso gioca un ruolo essenziale.

Gerarchia Colori

Inoltre, per far sì che non sorgano inefficienze dal punto di vista di UX è fondamentale che il colore scelto sia leggibile e che ci sia un contrasto sufficiente a garantire un’ottima accessibilità dei contenuti testuali.

A questo punto, non mi resta che valutare se il mio primary color raggiunge uno standard di accessibilità sufficiente. Per farlo, di solito vado sul color tool di Google che mi permette di verificare il livello di contrasto del colore.

Una volta aperto il link, clicco sul pulsante `Custom` a destra e incollo l’hex del colore nell’apposito campo.

Clicca sul pulsante custom del color tool
Sulla destra della pagina del color tool, fai click sul pulsante “Custom”

Copiando e incollando l’hex del colore ottenuto in name that color (#F5173C) sul color tool di Google, puoi notare una prima anteprima mostrata in un bozza di interfaccia in stile Material.

Ciò che risulta dall’anteprima è che il primary color che ho selezionato ha un pessimo rapporto di contrasto e lo posso verificare dalla lettera “P” del sample mostrato in basso.

Test contrasto Primary Color
Il Check contrast è un aspetto molto importante in fase di definizione dello schema colori. In questo caso, il contrasto non mi soddisfa, quindi sono obbligato a correggere il colore definito all’inizio

La mia idea era di usare del testo bianco sul primary color, perché immaginavo di sfruttarlo per i pulsanti base del design. Tuttavia Google mi indica un contenuto nero, il che vuol dire che il colore merita uno step più scuro per far sì che il bianco contrasti in modo sufficiente. A questo punto non posso fare altro che scalare la tinta del colore con lo slider verticale presente nel color picker, e correggere il tiro fino a quando non vedo la ‘P’ del sample diventare bianca.

Miglioramento Contrasto primary color

Perfetto, ho finalmente trovato la tonalità giusta del primary color per il nuovo creativecode.it: #e20035

Se mi hai seguito e anche tu hai trovato il tuo primary color possiamo proseguire con il secondary color.

Strumenti per il contrast check

Esistono una miriade di tool online che permettono di effettuare il contrast check dei colori. Te ne elenco qualcuno qui sotto:

Anche Figma ha il suo plugin per il contrast check, ma approfondiremo il discorso in seguito quando ti parlerò di tipografia.

# La scelta del Secondary Color

La scelta del colore secondario non deve essere impegnativa come il colore primario, anche perché dipende in larga parte da quest’ultimo. Il nostro obiettivo deve essere sempre quello di realizzare uno schema di colori armonici, quindi nel mio caso dovrò scegliere qualcosa che “suoni bene” con il mio Torch red.

Nel paragrafo precedente ti ho parlato sommariamente di “gerarchia” dei colori. In questo contesto, il colore secondario fornisce una soluzione che permette di accentuare e distinguere maggiormente gli elementi dalla “monotonia” del colore primario. Proprio per questo motivo, il colore secondario va utilizzato con una certa parsimonia.

Colori monocromatici, analoghi e complementari

Per ricavare il colore secondario, possiamo percorre tre strade che vi elenco in ordine di complessità di abbinamento:

  1. Colori monocromatici: fornendo il primary color vengono ricavate delle tinte più chiare e più scure dello stesso colore. Questa è la scelta più sicura, ma anche quella meno efficace se stai cercando di costruire un sito dal design vivace. Inoltre ti annulla la possibilità di avere variazioni colore (che vedremo dopo);
  2. Colori analoghi: sono le tonalità che nella scala dei colori sono più vicine al primary color. In genere la scelta del secondary color fra i colori analoghi rappresenta la soluzione più equilibrata e armonica. Se cerchi però una palette “vibrante” devi andare al terzo punto;
  3. Colori complementari: è la tonalità opposta al colore primario. In genere è l’abbinamento più complesso e non è sempre possibile trovare una buona combinazione fra primario e complementare.
Teoria dei colori - Colori monocromatici, analoghi e complemetari
Colori monocromatici, analoghi e complementari sulla ruota colore

Puoi ricavare i colori monocromatici, analoghi e complementari da tantissimi siti online. Quello che uso io è color-hex, soluzione piuttosto completa e valida per qualsiasi studio del colore. Scorrendo la pagina in basso trovi tutte e tre le possibilità: monocromatici, analoghi e complementare.

Studio del colore su color hex
Studio del colore su color hex

Tornando al progetto del nuovo creative code, pur essendo attirato dal colore complementare questa volta vorrei andare più sul sicuro. Inoltre, i colori più vicini al magenta sono spesso associati a corsi online per ragazzi ed essendo questo un blog per l’apprendimento, il mio secondary potrà essere simile al #e200a6.

Miglioriamo il secondary color

Adesso non mi resta che tornare sul color tool di Google e rifare la stessa operazione fatta un istante fa col primary. Selezionate la seconda anteprima in basso a destra, cliccate sul pulsante “Custom” e incollate l’hex del secondary color.

Trovandomi nella stessa condizione vista con primary, noto che il mio secondary color non contrasterebbe abbastanza con un contenuto del testo bianco, quindi decido di scendere con lo slider verticale fino a quando non ottengo una leggibilità adeguata. Alla fine quel che ho ricavato è un #d900a2.

Ecco un esempio di pulsanti primary e secondary:

Non male, vero?

# Le variazioni colore

Perfetto, abbiamo primary e secondary color. Siamo vicinissimi alla definizione della nostro schema, non ci resta che selezionare le varianti colore. Le varianti sono in genere i colori ricavati dalla monocromia del primary e del secondary. Questi sono molto utili se vogliamo dare una certa varietà al nostro design perché permettono di fare uso di un set di colori molto vicini a primary e secondary, ma nello stesso tempo sono inferiori nell’ordine gerarchico dello schema. Di solito le variazioni colore rappresentano un’ottima soluzione per i bordi o come separatori di sezione e inoltre possono essere molto utili come elementi funzionali all’accessibilità.

Ricavare le variazioni colore è molto facile, in realtà lo stesso color tool di google ci indica nell’anteprima in basso a destra le due variazioni più light e più dark di ciascun colore. In genere mi accontento di quelli calcolati, anche perché applicare delle modifiche rischierebbe di compromettere l’armonia della nostra palette, soprattutto se non abbiamo molta esperienza.

Variazioni di colore

Perfetto, a questo punto se sei riuscito a comporre anche tu tutta la tua palette possiamo finalmente tornare su Figma e mettere nero su bianco le scelte di colore per il nostro progetto.

# Prepariamo il frame colors su Figma

Metto da parte il file Strumenti di base su cui abbiamo lavorato fino ad ora e ne creo un nuovo che chiamerò: Creative Code v1.0. In questo documento costruirò tutti gli elementi che andranno a comporre il design delle pagine web del nuovo creativecode.it.

Una volta creata la nuova area di lavoro, la prima cosa da fare è rinominare la pagina corrente in: ATOMS.

La pagina ATOMS presenterà tutti gli atomi del mio design. Gli atomi popoleranno la libreria di questo progetto. In questo modo potrò accedere facilmente ad una serie di campioni che comprenderanno colori, tipografia e icone. Il vantaggio di questo approccio è che, qualora dovessi variare la tonalità del mio primary color, tale modifica si propagherà automaticamente a tutti gli elementi ad esso associati.

Un buon progetto merita sempre una degna presentazione

Come prima cosa voglio inserire nel progetto una selezione di colori che ho scelto. Creo quindi un frame chiamato Colors partendo dal preset del MacBook Pro.

Perfetto, adesso non mi resta che disegnare la palette di colori che ho scelto. Realizziamo dei cerchi e in ciascuno di essi applichiamo il riempimento con i colori primary, secondary e variations.

A questa serie aggiungo anche il nero (#000) e il bianco (#FFF), che è buona prassi avere sempre a disposizione nella propria libreria.

Sotto ciascuna nuance scrivo l’hex e poi il nome del colore (Primary 1, Primary 2, ecc.). Questi passaggi naturalmente non sono obbligatori, ma se il tuo progetto andrà a finire su una presentazione, può essere importante trasmettere al cliente la cura che hai per i dettagli. Quando si affrontano studi di questo tipo, i particolari sono elementi che attraggono molto la clientela.

Disporre la palette di colori su Figma
Disporre la palette di colori su Figma

Allineo tutti gli elementi al centro e raggruppo la selezione con CTRL + G. Grazie a questo comando, posso raggruppare gli elementi così da poterli spostare in un colpo solo. A questo punto non mi resta che rinominare il gruppo in Colors.

# Creare una libreria di colori su Figma

L’ideale sarebbe poter avere i miei colori in una libreria da avere sempre a portata di mano su Figma, in modo da avere un accesso facilitato e limitato alle tonalità che ho selezionato.

Per poter aggiungere le singole nuance della mia palette alla libreria di Figma, mi basta selezionare il colore da uno dei cerchi che ho creato e dalla sidebar delle impostazioni a destra, nella sezione Fill potrò aggiungere un nuovo stile cliccando sull’icona accanto al +. Si aprirà la finestra dei Color styles, dove troviamo l’elenco dei colori selezionati nel nostro progetto. Facciamo click sul + per aggiungere un nuovo colore e chiamiamolo “Primary 1“.

Salvare colore in libreria
Fai click sul menu del riempimento nella barra delle impostazioni, dopodiché clicca sul pulsante `+` e poi dai un nome al nuovo colore

Eseguo la stessa operazione anche per le variazioni (Primary 2 e Primary 3,ecc.), per il colore secondario e per il bianco ed il nero.

Libreria colori figma
Libreria colori figma

# Completare la palette con i background neutri

Molto spesso nei design dei siti web moderni abbiamo a che fare con pagine piuttosto lunghe che devono necessariamente essere spezzate in qualche modo, allo scopo di rompere la monotonia del bianco.

Un sito come quello di Apple, che rappresenta una fonte di ispirazione eccezionale per tutti i designer, lavora molto sul ritmo della pagina alternando background di vario tipo. Nel nostro caso può essere utile avere dei colori neutri che ci permettano di rendere maggiormente visibili le sezioni della pagina, dando una sorta di ritmo allo scorrimento e impedendo l’appiattimento della pagina sul bianco.

I background neutri possono essere ricavati sempre dal primary color. Prova a creare due tipi di background: light e dark. Al primo, partendo dal primary color, aggiungi del bianco e riduci leggermente il livello di saturazione del colore. Il dark lo puoi ottenere aggiungendo il nero al primary e destaurandolo allo stesso modo.

Se vuoi applicare questo metodo, ti suggerisco di copiare il primary color in una nuova nuance e lavorare con il metodo HSL (hue, saturation, luminance) direttamente su Figma.

Per farlo, seleziona il livello di riempimento della nuance e poi modifica il metodo colore indicato al centro della finestra switchando hex con hsl.

Quando effettui la regolazione non toccare il canale della tonalità (il primo) e concentrati solo sui canali SL in modo da regolare luminanza e saturazione.

In questo modo ho ottenuto: #251317 (Dark Background) e #FEFBFC (Light Background).

Background neutrali
Background neutrali

Fantastico, abbiamo finalmente definito lo schema colori del sito. La palette di colori di un sito web o di un brand è per me uno degli aspetti più importanti e complessi del progetto. Non sottovalutare l’argomento, dedica il tempo giusto per osservare le cose con occhio critico.

Arrivati a questo punto possiamo procedere con la progettazione, passando a tipografia e bottoni.

Alla prossima!