Succede spesso che tu stia lavorando in Divi, abbia davanti il selettore colore, e qualcosa non torni.

Magari il blu del brand è giusto in un modulo, ma appena provi a creare una variante per lo sfondo o per il testo devi andare a occhio, copiare codici, ritoccare valori e sperare che tutto resti coerente.

E quando il cliente cambia il colore principale a progetto avviato, ricomincia il giro: controlli, correzioni, piccoli aggiustamenti sparsi ovunque.

È proprio qui che entrano in gioco i colori relativi di Divi 5, insieme al nuovo supporto HSL e al sistema di colori globali.

Sono, di fatto, il pezzo di soluzione che ti permette di lavorare in modo più ordinato, più preciso e molto meno stressante.

Il nuovo sistema si articola attorno a tre aree di miglioramento:

1. Globale (colori globali, condivisi su tutto il sito)
2. Relativo (colori relativi, calcolati in rapporto ad altri colori)
3. HSL (sistema di definizione dei colori basato su tonalità, saturazione e luminosità)

Principali utilizzi di questo nuovo sistema di colori

Il nuovo sistema di colori relativi e HSL di Divi si presta a diversi scenari pratici.

Qui sotto trovi i casi d'uso più comuni: dalla creazione di varianti di un colore base alla gestione del tema scuro, fino agli stati interattivi e alle palette coerenti costruite a partire da un solo colore.

Il Sistema Colore di Divi

Il sistema dei colori di Divi 5 va oltre la semplice scelta di un codice esadecimale.

Ti mette a disposizione variabili di colore globali, trasformazioni cromatiche relative e una modalità di modifica basata sul modello HSL, cioè tonalità, saturazione e luminosità.

Tradotto in pratica?

Hai strumenti molto più comodi per gestire palette coerenti, scalabili e facili da aggiornare su tutto il sito.

1. Sfumature di Colore

Vuoi creare una tavolozza che includa il tuo colore base insieme a varianti più chiare e più scure? Ecco, questo è proprio il caso ideale per i Colori Relativi.

Puoi regolare saturazione e luminosità HSL in modo coerente per costruire sfumature da Rosso-100 a Rosso-900.

Per esempio, Rosso-100 avrà una luminosità molto alta, quindi sarà un colore tenue e quasi bianco, mentre Rosso-900 avrà una luminosità molto bassa e sarà più scuro e intenso. Ti basta modificare quel singolo valore per ottenere l'intera scala.

Una volta definite, queste tonalità possono essere usate nel progetto per bordi, ombre, sfondi o varianti cromatiche che restano comunque coerenti tra loro.

È una soluzione ideale per i sistemi di design che usano nomi di colore con un significato preciso, come Primario, Secondario, Accento o Avviso, e che hanno bisogno di varianti diverse per gli stati interattivi.

Per esempio: quando un pulsante viene sorvolato con il mouse, quando riceve il focus da tastiera o quando è disattivato.

Con i Colori Relativi puoi definire tutte queste versioni in modo coerente partendo da un solo colore base.

Tipo: il colore di sfondo di un pulsante “Primario” può diventare leggermente più scuro al passaggio del cursore semplicemente abbassando la luminosità HSL del colore originale.

Colori Globali e Variabili di Design

Un sistema di colori globali fatto bene porta vantaggi immediati.

Il primo è banalissimo, ma conta tantissimo: lavori più veloce. Non devi più tenere i codici colore appuntati da qualche parte per poi copiarli e incollarli ogni volta.

Quando ti serve un colore, apri il selettore e trovi subito quelli che hai già salvato.

I colori globali sono particolarmente utili all'inizio di un progetto, quando la palette cambia spesso.

Ma tornano comodissimi anche quando lavori su brand già strutturati, che magari richiedono aggiornamenti periodici o piccoli adattamenti nel tempo.

Con il gestore delle variabili hai tutti i colori raccolti in un'unica schermata centrale.

E questo, molto semplicemente, ti aiuta a mantenere coerenza visiva senza perdere pezzi per strada.

In più, lavorando con i colori relativi, puoi costruire scale cromatiche con sfumature progressive a partire da un solo colore base.

Un po' come succede nei framework CSS moderni.

Ad esempio, partendo da un blu principale puoi generare automaticamente una versione più chiara per i fondali e una più scura per testi o bordi, senza dover calcolare ogni sfumatura a mano.

Un dettaglio da non trascurare è il nome che dai alle variabili.

Se usi etichette chiare e descrittive, come primario-chiaro o accento-attenuato, eviti un sacco di confusione quando la palette cresce o quando qualcuno ci rimette mano dopo settimane.

Vuoi un rosso chiaro e un rosso scuro?

Parti dal tuo rosso base, crea le varianti più chiare e più scure usando i Colori Relativi, cioè la funzione che genera sfumature a partire da un colore di riferimento, e poi usale ovunque nel sito.

2. Tutti i Colori Sono Globali

In Divi, tutti i colori sono globali per impostazione predefinita. E questa è una scelta molto sensata.

Scegliere un colore richiede lo stesso sforzo sia che tu lo salvi come variabile globale sia che lo applichi come valore fisso non riutilizzabile.

Però solo il primo approccio è davvero scalabile.

Per eliminare questa ambiguità, l'esperienza predefinita dei colori è completamente basata sulle variabili globali.

Quindi, se vuoi riutilizzare lo stesso colore in più punti del sito, ti basta definirlo una volta sola nel gestore delle variabili di design invece di andarlo a selezionare ogni volta manualmente, senza alcun collegamento dinamico.

Supporto HSL

HSL significa Tonalità, Saturazione e Luminosità.

Invece di modificare un colore un po' a occhio, puoi intervenire su un parametro alla volta con valori precisi.

Quindi:

• la tonalità è il colore vero e proprio
• la saturazione controlla quanto è intenso
• la luminosità regola quanto è chiaro o scuro

Lavorare separando questi tre valori rende tutto molto più controllabile.

• Tonalità – Accetta valori in gradi (0-360), sia negativi che positivi. Funziona come una ruota dei colori, quindi 0, 360 e -360 indicano lo stesso colore. Questo torna utile, per esempio, quando vuoi trovare un colore complementare: ti basta impostare la tonalità a 180 gradi.
• Saturazione – Accetta valori percentuali (0%-100%). Controlla quanto il colore è vivido. Il 100% corrisponde alla massima intensità, mentre lo 0% porta a un grigio neutro. È utile quando vuoi smorzare un colore senza spostarlo sulla ruota cromatica.
• Luminosità – Anche qui si usano percentuali (0%-100%). Lo 0% è nero, il 100% è bianco, mentre il 50% rappresenta la forma più “pura” della tonalità. Questo parametro è perfetto per creare varianti più chiare o più scure partendo da un solo colore base, cosa molto utile per sfondi, testi e bordi.

Puoi comunque inserire manualmente anche valori esadecimali, RGB o persino il nome del colore.

Però, quando vuoi lavorare con colori relativi o costruire varianti cromatiche accessibili, il formato HSL è decisamente lo strumento più adatto.

Ti semplifica la progettazione, soprattutto quando devi ragionare sul contrasto.

E tra i metodi disponibili in CSS per manipolare i colori è anche uno dei più intuitivi da capire e usare.

3. Varianti di Colore Accessibili e Modalità Scura

I colori relativi ti permettono di generare varianti cromatiche accessibili a partire da un colore che già esiste nel progetto.

Puoi ridurne la saturazione per sezioni a basso contrasto, oppure schiarirlo quanto basta per rendere leggibile il testo su sfondi colorati.

Per esempio, se il colore del brand è un blu scuro, puoi creare automaticamente una versione più chiara da usare come testo su sfondi scuri, senza dover definire un nuovo colore a mano.

Essendo collegati ai colori principali, questi valori restano coerenti con il brand anche quando in futuro fai modifiche o aggiornamenti.

Colori Relativi

I colori relativi ti permettono di generare un nuovo colore partendo da uno che esiste già.

Lo fai modificandone singole componenti come tonalità, saturazione o luminosità.

Il punto di partenza è sempre un colore base.

Su quel colore applichi filtri di tonalità, saturazione e luminosità per ottenere una variante derivata. In questo esempio, il colore base viene usato come colore di sfondo solo per mostrare meglio il meccanismo.

Per creare un colore relativo, apri il pannello delle variabili di design di Divi, aggiungi un nuovo colore e scegli un colore globale già esistente come base.

Da lì, usi i filtri HSL per modificarlo e ottenere la variante che ti serve.

Per esempio, se il colore globale principale è un blu scuro, puoi creare una versione più chiara semplicemente aumentando la luminosità, senza toccare il colore originale.

Puoi anche annidare più livelli di colori: Colore Primario, Colore Relativo 1 basato sul Primario, Colore Relativo 2 basato sul Relativo 1, e così via.

Chiaro, nella maggior parte dei siti spingersi troppo in profondità non è la scelta più pratica.

Però la possibilità c'è, e significa che cambiando un solo colore base tutti quelli derivati si aggiornano a cascata.

Modificando il colore primario, anche i due livelli di colori relativi collegati si aggiornano di conseguenza.

4. Adatto agli sviluppatori, senza scrivere codice

Questo sistema riprende la logica delle variabili CSS, cioè quei valori riutilizzabili che gli sviluppatori definiscono nel codice per gestire colori, font e spaziature, e la porta dentro un ambiente completamente visivo.

Non serve scrivere istruzioni come var(--primary), che in CSS significa “usa il colore principale definito in precedenza”. Né calcolare a mano valori come hsl(200, 75%, 30%), cioè una formula che descrive un colore tramite tonalità, saturazione e luminosità.

Il sistema fa tutto tramite controlli visivi, senza passare dal codice.

Il vantaggio si capisce al volo nel confronto pratico: con un approccio tradizionale, uno sviluppatore deve scrivere e aggiornare manualmente ogni variante di colore nel foglio di stile.

Con Divi, lo stesso risultato si ottiene spostando un cursore o modificando un valore direttamente nell'editor.

Nessuna riga di codice. Nessun rischio di errori di sintassi.

E questo aiuta anche quando si lavora in team: se più designer mettono mano allo stesso progetto, tutti si appoggiano allo stesso sistema di colori centralizzato.

Le modifiche si propagano in modo coerente su tutto il sito, senza bisogno di coordinarsi attraverso il codice.

Avvio rapido: crea un colore base + 3 varianti relative

Uno degli usi più pratici dei colori relativi in Divi 5 è costruire una piccola palette coerente partendo da un solo colore base.

Il vantaggio vero è questo: se cambi il colore di riferimento, tutte le varianti si aggiornano da sole.

Niente ritocchi manuali sparsi qua e là.

Pronti? Via.

Ecco il flusso di lavoro consigliato, applicabile praticamente a qualsiasi progetto per clienti:

1. Definisci il colore base come variabile globale. Imposta il colore principale del brand, per esempio il blu primario, come colore globale nel sistema di design di Divi. Questo sarà il punto di partenza per tutte le varianti.
2. Crea una versione più chiara per gli sfondi. Usa la sintassi HSL relativa aumentando la luminosità, cioè il canale l, del colore base. Una luminosità intorno all'85–95% funziona bene per gli sfondi di sezioni o card.
3. Crea una versione più scura per il testo o i bordi. Riduci la luminosità per ottenere un tono che mantenga un contrasto sufficiente rispetto agli sfondi chiari. Controlla sempre il rapporto di contrasto: per il testo normale il minimo è 4.5:1 secondo WCAG AA.
4. Crea una versione desaturata per gli stati disabilitati o secondari. Abbassa la saturazione, quindi il canale s, per ottenere un grigio caldo coerente con il brand. È utile per elementi inattivi o per il testo secondario.

Il risultato è una micro-palette di 4 colori, cioè il colore base più 3 varianti, che si comporta come un piccolo sistema.

Modifichi il colore base e tutto il resto si adatta di conseguenza.

Checklist rapida prima di pubblicare:

• Il colore base è registrato come variabile globale?
• Le varianti sono definite tramite sintassi relativa e non come valori statici?
• Il contrasto del testo/sfondo è verificato per ciascuna combinazione?
• Il sistema funziona anche in modalità scura, se prevista?

Se vuoi applicare questo sistema a un progetto specifico, scrivimi.

Nota sull'Accessibilità: Il Controllo del Contrasto Rimane Fondamentale

Modificare i valori HSL per generare varianti cromatiche è comodo e veloce, ma non garantisce automaticamente che il risultato rispetti i requisiti di contrasto delle WCAG.

Un colore che a occhio sembra leggibile potrebbe comunque non raggiungere il rapporto minimo di 4,5:1 richiesto per il testo normale, livello AA.

Quindi occhio: questo è un punto da non sottovalutare, soprattutto quando lavori con colori relativi generati dinamicamente.

La logica visiva aiuta, ma non sostituisce una verifica fatta con gli strumenti giusti.

Cosa controllare prima di considerare il lavoro concluso

• Verifica il contrasto con uno strumento dedicato. Strumenti come WebAIM Contrast Checker o l'ispettore di accessibilità integrato nei browser ti permettono di misurare il rapporto reale tra testo e sfondo. Non affidarti solo all'occhio.
• Considera gli stati interattivi. I colori al passaggio del mouse e al focus vengono spesso dimenticati. Se la variante HSL usata per il passaggio del mouse abbassa luminosità o saturazione, il contrasto potrebbe peggiorare proprio quando l'utente sta interagendo con l'elemento.
• Testa su sfondi scuri. Un colore che funziona benissimo su sfondo chiaro può diventare illeggibile su sfondo scuro. Se il sito prevede una modalità scura o sezioni con sfondo scuro, ogni variante cromatica va verificata anche in quel contesto.
• Attenzione ai testi su immagini o gradienti. Le regole HSL non tengono conto di ciò che sta sotto al testo. In questi casi il contrasto va valutato manualmente.

Un approccio corretto non significa rinunciare alla flessibilità dei colori relativi.

Significa inserire la verifica del contrasto come passaggio standard del flusso di lavoro, non come controllo opzionale da fare alla fine.

Se definisci una palette accessibile fin dall'inizio, riduci parecchio i problemi nelle fasi successive dello sviluppo.

Errori Comuni

Lavorare con i Colori Relativi e HSL in Divi offre molta flessibilità, ma apre anche a errori abbastanza comuni, soprattutto nei progetti per clienti con strutture più articolate.

Vediamo quelli che capitano più spesso e come gestirli con un minimo di metodo.

Eccessiva annidatura delle variabili

Creare colori relativi che dipendono da altri colori relativi genera catene difficili da tracciare e da mantenere.

Se cambia un valore base, l'effetto a cascata può diventare poco prevedibile.

La regola pratica è semplice: limita a un solo livello di derivazione i colori destinati all'uso globale.

Nomi inconsistenti nel sistema di design

Assegnare nomi generici come colore-chiaro o variante-2 rende il sistema poco leggibile per chiunque debba lavorarci in un secondo momento, cliente compreso.

Molto meglio usare nomi semantici legati alla funzione, come testo-su-sfondo-scuro o accento-al-passaggio.

Così riduci gli errori quando arriva il momento di aggiornare qualcosa.

Modificare la luminosità senza verificare il contrasto

HSL rende molto più semplice creare varianti cromatiche, ma aumentare o ridurre la luminosità non garantisce automaticamente una buona leggibilità.

Un testo chiaro su sfondo chiaro può anche rispettare l'estetica del brand, ma fallire comunque i requisiti WCAG.

Prima di approvare qualsiasi variante derivata dalla componente luminosità, controlla sempre il rapporto di contrasto con uno strumento dedicato, come WebAIM Contrast Checker o gli strumenti di sviluppo del browser.

Creare troppe sfumature senza uno scopo semantico

La facilità con cui HSL permette di generare scale cromatiche può portare a creare troppe varianti inutilizzate o quasi identiche tra loro.

Ogni colore del sistema dovrebbe avere un ruolo preciso nell'interfaccia.

Se due sfumature fanno la stessa cosa, una delle due è di troppo e conviene eliminarla per mantenere il sistema ordinato.

Checklist rapida prima del rilascio

• Ogni colore relativo ha un nome semantico e un ruolo preciso?
• Le catene di derivazione sono al massimo di un livello?
• Tutte le combinazioni testo/sfondo superano il rapporto di contrasto minimo 4.5:1?
• I colori inutilizzati o duplicati sono stati rimossi dal sistema globale?

Colori Relativi e HSL: Come Usarli in Pratica

Se stai valutando di integrare i colori relativi e la sintassi basata su tonalità, saturazione e luminosità nei tuoi progetti, ecco un riepilogo pratico delle cose essenziali da tenere a mente prima di partire:

• Definisci le variabili di colore a monte. I colori relativi funzionano molto meglio quando esiste già un sistema di design coerente. Parti dai colori base e costruisci le varianti in modo ordinato e sistematico.
• Verifica il contrasto. Generare varianti cromatiche in automatico non significa avere accessibilità garantita. Controlla sempre il rapporto di contrasto tra testo e sfondo secondo le linee guida per l'accessibilità web, in particolare il minimo di 4,5:1 per il testo normale, soprattutto per le varianti più chiare o più scure.
• Testa su dispositivi reali. Le varianti cromatiche possono comportarsi in modo diverso a seconda del profilo colore del display. Una verifica visiva su più schermi resta importante.
• Non moltiplicare i colori base senza necessità. Più colori di partenza inserisci, più diventa complessa la gestione delle varianti. Meglio mantenere il sistema snello.

Ricapitolando: questo sistema ti permette di costruire palette più ordinate, più facili da aggiornare e più coerenti nel tempo, lavorando in modo visuale dentro Divi invece di rincorrere codici colore sparsi ovunque.

Se vuoi approfondire argomenti collegati, su questo stesso blog trovi anche guide dedicate alle variabili di design, all'accessibilità cromatica e all'implementazione della modalità scura.

Hai un progetto in corso e vuoi capire se questo approccio è adatto al tuo caso? Scrivimi per confrontarci sull'implementazione, oppure se vuoi una mano pratica nella costruzione del tuo sistema di design.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.