# Le basi della teoria del colore per chi non fa il designer

[Canonical HTML page](https://gradiently.design/it/guide/color-theory-basics)

Non serve l’accademia d’arte per scegliere bene i colori. Sei idee spiegano quasi ogni decisione sul colore, e ognuna si impara in pochi minuti.

## The short version

- 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.

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.

- Tonalità: la famiglia del colore: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Saturazione: dal grigio al viola vivido: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Luminosità: da viola scuro a chiaro: `linear-gradient(90deg, #1e0a3c 0%, #7c3aed 50%, #ede9fe 100%)`

Tre proprietà, tre rampe. La seconda e la terza mantengono la stessa tonalità e cambiano una sola cosa.

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](https://gradiently.design/it/guide/color-codes-explained) 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.

- Mattone: #b91c1c
- Mandarino: #ea580c
- Sole: #facc15
- Verde acqua: #0d9488
- Cobalto: #2563eb
- Viola: #6d28d9

Tre colori caldi e tre freddi. Una palette che mescola entrambi di solito lascia guidare una sola temperatura.

[Colori caldi e freddi](https://gradiently.design/it/guide/warm-and-cool-colors) 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](https://gradiently.design/it/guide/color-wheel) spiega come leggerle.

| Armonia | Dove stanno i colori | Che sensazione dà |
| --- | --- | --- |
| [Monocromatica](https://gradiently.design/it/guide/monochromatic-color-scheme) | Una tonalità in più luminosità | Calma, unitaria, raffinata |
| [Analoga](https://gradiently.design/it/guide/analogous-colors) | Vicini sul cerchio | Armoniosa, naturale, facile |
| [Complementare](https://gradiently.design/it/guide/complementary-colors) | Uno di fronte all’altro | Alto contrasto, energica |
| Complementare divisa | Una tonalità più le due accanto alla sua opposta | Vivace ma meno tesa |
| [Triadica](https://gradiently.design/it/guide/triadic-colors) | Tre tonalità equidistanti | Giocosa, equilibrata, audace |

Le cinque armonie che incontrerai più spesso.

- Blu monocromatico: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Analoga: blu, verde acqua, verde: `linear-gradient(135deg, #1d4ed8 0%, #0891b2 50%, #059669 100%)`
- Complementare blu e ambra, via rosa: `linear-gradient(135deg, #1d4ed8 0%, #db2777 50%, #f59e0b 100%)`
- Triadica: verde, viola, arancione: `linear-gradient(135deg, #16a34a 0%, #7c3aed 50%, #ea580c 100%)`

Ogni armonia come gradiente. Le coppie complementari hanno bisogno di un colore intermedio, altrimenti la sfumatura diventa grigia.

## 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](https://gradiently.design/it/guide/color-contrast-accessibility) 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](https://gradiently.design/it/guide/60-30-10-rule) è la versione più comune di questa idea.

- Dominante: blu notte: #0f172a
- Supporto: ardesia: #334155
- Supporto: foschia: #e2e8f0
- Accento: arancione: #f97316

Un dominante scuro, due supporti sommessi e un accento caldo. L’accento funziona perché è raro.

## 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](https://gradiently.design/it/guide/color-psychology) separa ciò che regge da ciò che no, e il [significato dei colori nel mondo](https://gradiently.design/it/guide/color-meanings-around-the-world) 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](https://gradiently.design/it/guide/color-palette-from-image) 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](https://gradiently.design/it/guide/how-to-choose-brand-colors) trasforma questi passi in un metodo completo.

## FAQ

### 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.