In breve
- La teoria del colore è un insieme di idee pratiche su come i colori si relazionano, si combinano e influenzano ciò che le persone vedono per primo.
- Ogni colore si descrive con tre proprietà: tonalità, la famiglia del colore; saturazione, quanto è intenso; e luminosità, quanto è vicino al bianco o al nero.
- Il contrasto di luminosità conta più di quello di tonalità per la leggibilità, ed è per questo che un design dovrebbe funzionare anche in scala di grigi.
- Le armonie di colore come complementari, analoghe, triadiche e monocromatiche sono posizioni sul cerchio cromatico che sembrano equilibrate in modo affidabile.
- La maggior parte delle buone palette usa un colore dominante, uno o due colori di supporto e un piccolo accento.
In questa pagina
La teoria del colore è l’insieme di idee pratiche che i designer usano per scegliere colori che funzionano insieme e fanno ciò che devono fare. Si riduce a sei cose: tonalità, saturazione, luminosità, temperatura, armonia e contrasto. Se le capisci, puoi spiegare perché una palette sembra calma o rumorosa, perché un testo è difficile da leggere e perché due colori stonano.
Questa pagina è il punto di partenza di ogni articolo sul colore della Guida. Ogni sezione rimanda a una più approfondita quando ti serve.
Tonalità, saturazione e luminosità
Qualsiasi colore si può descrivere con tre proprietà. La tonalità è la famiglia del colore: rosso, arancione, verde, blu. La saturazione (detta anche croma) è quanto è intenso, dal grigio al vivido. La luminosità è quanto è vicino al nero o al bianco. Cambia una tenendo ferme le altre e vedrai cosa fa ciascuna.
Sono queste tre le grandezze con cui codici colore come HSL e OKLCH descrivono il colore, il che li rende facili da regolare nel codice. I codici colore spiegati copre esadecimale, RGB, HSL e OKLCH.
Colori caldi e freddi
I colori hanno anche una temperatura. Rossi, arancioni e gialli sembrano caldi; blu, verdi e viola sembrano freddi. I colori caldi tendono a sembrare più vicini e più energici, quelli freddi più lontani e più calmi. La temperatura però è relativa: un viola con molto rosso dentro può sembrare caldo accanto a un blu puro.
Colori caldi e freddi va oltre, compreso come mescolare le temperature in un solo gradiente.
Armonia dei colori e cerchio cromatico
Disponi le tonalità in un cerchio e certe relazioni sembrano equilibrate in modo affidabile. Sono le armonie di colore. Non sono regole, ma sono buoni punti di partenza quando hai dubbi. La guida al cerchio cromatico spiega come leggerle.
| Armonia | Dove stanno i colori | Che sensazione dà |
|---|---|---|
| Monocromatica | Una tonalità in più luminosità | Calma, unitaria, raffinata |
| Analoga | Vicini sul cerchio | Armoniosa, naturale, facile |
| Complementare | Uno di fronte all’altro | Alto contrasto, energica |
| Complementare divisa | Una tonalità più le due accanto alla sua opposta | Vivace ma meno tesa |
| Triadica | Tre tonalità equidistanti | Giocosa, equilibrata, audace |
Contrasto: perché alcuni colori si leggono male
Il contrasto è la differenza tra due colori. Per la lettura, la differenza che conta di più è la luminosità, non la tonalità. Il testo rosso su fondo verde può avere due tonalità molto diverse ed essere comunque difficile da leggere, perché i due possono avere luminosità simile. Molte persone con deficit della visione dei colori non riescono a distinguerli affatto.
Solo contrasto di tonalità
- Rosso su verde di luminosità simile
- Blu su viola
- Arancione su rosa
- Sparisce se convertito in scala di grigi
Contrasto di luminosità
- Quasi bianco su blu notte profondo
- Quasi nero su giallo pallido
- Inchiostro scuro su un pastello chiaro
- Si legge ancora in scala di grigi
Il test della scala di grigi è la verifica più rapida: rendi grigio il design e guarda se le parole risaltano ancora. Per il testo, le Web Content Accessibility Guidelines fissano rapporti di contrasto minimi, 4,5:1 per il testo corrente e 3:1 per il testo grande. Il contrasto dei colori spiega come misurarli.
Proporzione: quanto di ogni colore
Gli stessi cinque colori possono sembrare calmi o caotici a seconda di quanto ne usi di ciascuno. Un’impostazione utile è un colore dominante che copre gran parte dello spazio, uno o due colori di supporto e un piccolo accento per ciò che vuoi far notare. La regola 60-30-10 è la versione più comune di questa idea.
Cosa significano i colori
I colori portano associazioni, ma quelle associazioni sono apprese, non innate, e variano con cultura e contesto. Il verde può voler dire natura, denaro o via libera; il rosso pericolo, fortuna o saldi. Considera il significato una domanda sul tuo pubblico e sulla tua categoria, non un dizionario fisso. La psicologia del colore separa ciò che regge da ciò che no, e il significato dei colori nel mondo mostra quanto differiscono.
Mettere la teoria del colore al lavoro
- 1
Parti da un colore
Scegli il colore che conta di più: il colore del tuo brand o uno preso da una foto. Ricavare una palette da un’immagine ti aiuta.
- 2
Scegli un’armonia
Decidi se la palette deve essere calma (monocromatica o analoga) o energica (complementare o triadica).
- 3
Costruisci una gamma di luminosità
Aggiungi una versione molto scura e una molto chiara per testo e sfondi. La maggior parte delle palette fallisce per la mancanza di queste.
- 4
Assegna le proporzioni
Decidi quale colore domina, quale sostiene e quale è l’accento.
- 5
Verifica contrasto e contesto
Controlla il contrasto del testo, fai il test della scala di grigi e guarda la palette in un’impaginazione vera, non solo come campioni.
Per il lavoro sul brand, come scegliere i colori del brand trasforma questi passi in un metodo completo.
Le domande più frequenti
Cos’è la teoria del colore?
La teoria del colore è un insieme di idee pratiche su come i colori si relazionano tra loro, come si combinano in palette armoniose e come il contrasto influisce su ciò che le persone vedono e leggono.
Quali sono le tre proprietà del colore?
Tonalità, la famiglia del colore; saturazione, quanto è intenso o grigio; e luminosità, quanto è vicino al nero o al bianco.
Quali sono le principali armonie di colore?
Monocromatica, analoga, complementare, complementare divisa e triadica. Ciascuna descrive dove stanno i colori sul cerchio cromatico l’uno rispetto all’altro.
Cosa conta di più per la leggibilità, tonalità o luminosità?
La luminosità. Il testo ha bisogno di una chiara differenza di luminosità rispetto allo sfondo, ed è per questo che un design leggibile funziona anche convertito in scala di grigi.
I colori hanno significati universali?
No. Le associazioni cromatiche sono apprese e differiscono tra culture, categorie e contesti, quindi verificale con il tuo pubblico.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
