Armonie di colori: complementari, analoghi, triadici e altro

Che cos’è un’armonia di colori

Un’armonia è una regola per scegliere colori che stanno bene insieme. Parti da un colore base, mantieni la sua luminosità e la sua intensità e ruoti solo la tonalità di angoli prestabiliti sulla ruota dei colori.

Gli angoli sono la parte facile. Conta altrettanto quale ruota usi, perché la classica ruota HSL e una ruota percettiva come OKLCH danno risultati ben diversi con lo stesso angolo. Tutti gli esempi qui sotto partono da #2a7fbf, un blu medio.

Complementari, complementari divisi, analoghi, triadici, tetradici, quadrati

Ogni riga mantiene la luminosità OKLCH del colore base, 0,577, e la sua croma, 0,127. Cambia solo la tonalità, degli angoli indicati. Quando un colore ruotato esce da sRGB, la croma viene abbassata un po’ per farlo rientrare: per questo un paio di colori sono leggermente meno vivaci. Il monocromatico fa eccezione: mantiene la tonalità e varia la luminosità a passi di 0,12.

• Complementare: la tensione più forte. Usa il secondo colore solo per piccoli accenti, come il pulsante di invito all’azione.
• Complementare divisa: la stessa energia della complementare ma più facile da bilanciare, perché l’accento si divide tra i due vicini della tonalità opposta.
• Analoga: calma e coesa. Ottima per illustrazioni e sfondi, debole quando un elemento deve spiccare.
• Triadica, tetradica e quadrata: vivaci e difficili da gestire. Lascia che un colore guidi e tieni gli altri in piccolo.
• Monocromatica: una sola tonalità in più livelli di luminosità. La scelta più sicura per le interfacce, perché il contrasto nasce comunque dalla luminosità.

Perché la ruota dei colori HSL crea armonie sbilanciate

Quasi tutte le ruote dei colori negli strumenti di design sono HSL: ruotano la tonalità e mantengono i valori di saturazione e luminosità HSL. Ma la luminosità HSL è una formula, non quello che vedi. Ruota di 180° in HSL un giallo oro e ottieni un blu profondo che appare molto più scuro del giallo.

Ruotare in OKLCH mantiene uguale la luminosità percepita. Ecco #f4b400 ruotato nei due modi, con la luminosità OKLCH di ogni risultato.

Il set HSL va da 0,489 a 0,857 di luminosità: il blu e il viola sprofondano e il verde menta brilla. Il set OKLCH resta tra 0,802 e 0,817. Lo stesso succede con i primari RGB puri: #ff0000, #00ff00 e #0000ff sono una triade HSL perfetta, eppure la loro luminosità OKLCH è 0,628, 0,866 e 0,452.

C’è un compromesso. Un blu chiaro quanto questo giallo non può essere molto vivace su uno schermo sRGB, quindi il complementare OKLCH #97c0ff ha croma 0,10 invece di 0,166. Devi scegliere tra luminosità uguale e vivacità uguale: con giallo e blu non puoi avere entrambe.

Ruota RYB dei pittori e ruota RGB degli schermi

La ruota che si impara a scuola è RYB: rosso, giallo e blu come primari, come quando si mescolano i pigmenti. Lì il complementare del rosso è il verde e quello del blu è l’arancione. Gli schermi mescolano luce, quindi gli strumenti digitali usano una ruota RGB, dove il complementare del rosso è il ciano e quello del blu è il giallo.

Nessuna delle due è sbagliata: rispondono a domande diverse. RYB segue la tradizione pittorica, RGB e OKLCH seguono il funzionamento di schermi e occhi. Se uno strumento di design ti dà il ciano dove ti aspettavi il verde, sta usando la ruota RGB.

La colonna OKLCH mostra cosa fa la luminosità uguale ai colori estremi. Il complementare del blu puro diventa un ocra scuro con la stessa luminosità, 0,45, e quello del giallo puro diventa un lavanda quasi bianco a 0,96.

La regola 60-30-10 applicata a un’armonia

Un’armonia ti dice quali colori usare, non in che quantità. La regola 60-30-10 colma questa lacuna: circa il 60% della superficie va a un colore dominante, il 30% a un colore secondario e il 10% a un accento. Quote uguali rendono confusa anche una buona armonia.

In un’interfaccia il 60% è di solito un quasi neutro tinto con la tonalità base, il 30% è il colore base e il 10% è l’accento complementare. Ecco un set pronto da copiare costruito da #2a7fbf.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

Come verificare il contrasto di un’armonia

Non è la differenza di tonalità a rendere leggibile il testo, ma la differenza di luminosità. La coppia complementare qui sopra è lontanissima in tonalità, eppure #2a7fbf su #ab6708 ha un rapporto WCAG di 1,05:1 e un Lc APCA di 0: come testo è praticamente invisibile.

La luminosità uguale ha anche un vantaggio. Il testo bianco su ogni colore delle armonie OKLCH qui sopra sta tra 4,04:1 e 4,62:1. Sulla versione HSL delle stesse armonie oscilla da 2,15:1 a 8,90:1. Per il set OKLCH basta quindi una sola correzione: abbassa la luminosità a 0,52 e il testo bianco supera 4,5:1 su qualsiasi tonalità con croma 0,127, da 5,00:1 a 5,91:1.

Per usare due colori dell’armonia come testo e sfondo, allontanali in luminosità: mantieni le tonalità e porta uno verso 0,35 e l’altro verso 0,93. Poi verifica la coppia reale con un controllo del contrasto e passa la palette in un simulatore di daltonismo se l’accento ha un significato.

Domande e risposte