# Schema colori tetradico: quattro colori in equilibrio

[Canonical HTML page](https://gradiently.design/it/guide/tetradic-colors)

Quattro colori sono l’armonia classica più ricca e la più facile da sbagliare. Il segreto non è scegliere le quattro tinte, che è aritmetica, ma decidere quale comanda.

## The short version

- Uno schema di colori tetradico usa quattro tinte disposte come due coppie complementari sul cerchio cromatico.
- La versione a rettangolo accoppia due tinte distanti 60 gradi con le loro due opposte; quella a quadrato distanzia tutte e quattro le tinte di 90 gradi.
- Le palette tetradiche sono ricche e varie ma difficili da bilanciare, perché quattro tinte si contendono l’attenzione.
- Lo schema funziona quando un colore domina, un secondo sostiene e gli altri due sono piccoli accenti.
- Smorzare o scurire alcune delle quattro tinte rende la palette tetradica raffinata invece che chiassosa.

Uno **schema di colori tetradico** è fatto di quattro tinte che formano due coppie complementari sul cerchio cromatico. Unendole con delle linee disegni un rettangolo o un quadrato, ed è per questo che le due versioni si chiamano schema a rettangolo e a quadrato. Poiché contiene colori caldi e freddi su entrambi i lati del cerchio, la palette tetradica è la più piena tra le armonie classiche. È anche quella che rischia di più di sembrare caotica, a meno che tu non lasci guidare un colore e tenga gli altri tre al loro posto.

## Schemi tetradici a rettangolo e a quadrato

Entrambe le versioni partono da una tinta base e aggiungono il suo complementare, a 180 gradi. Cambia il punto in cui sta la seconda coppia.

| Versione | Tinte dalla base | Carattere |
| --- | --- | --- |
| Rettangolo, o doppio complementare | 0, 60, 180 e 240 gradi | Due vicine strette e le loro opposte; più facile da bilanciare |
| Quadrato | 0, 90, 180 e 270 gradi | Spaziatura perfettamente uniforme; la più varia e la più audace |

Gli schemi a rettangolo hanno una coppia naturale di alleate per lato, ed è per questo che i designer di solito partono da lì.

- Cobalto: #1b3c7e
- Ametista: #9d59c0
- Calendula: #f0b642
- Felce: #7dba5e

Uno schema a rettangolo: cobalto e ametista, a 60 gradi, opposti a calendula e felce.

- Viola profondo: #452277
- Rosso corallo: #e25a66
- Foglia di lime: #95c059
- Verde acqua marino: #2e9e95

Uno schema a quadrato: quattro tinte a 90 gradi l’una dall’altra, con il viola approfondito perché faccia da fondo.

## Come costruire uno schema di colori tetradico

1. **Scegli la tinta base** Scegli il colore da cui dipendono il tuo brand o il tuo design. Annota la sua tinta in gradi, che te la dà qualsiasi selettore di colore che mostri l’HSL.
2. **Aggiungi il complementare** Aggiungi 180 gradi. Quella coppia è la spina dorsale dello schema. I [colori complementari](https://gradiently.design/it/guide/complementary-colors) spiegano perché gli opposti funzionano.
3. **Scegli rettangolo o quadrato** Per un rettangolo, aggiungi 60 gradi alla base e al complementare. Per un quadrato, aggiungi 90 gradi a ciascuno.
4. **Dai a ogni colore un compito** Uno dominante, uno di supporto, due accenti. Scrivilo, così i ruoli restano gli stessi in ogni design.
5. **Regola luminosità e saturazione** Scurisci il colore dominante, ammorbidisci il supporto e tieni gli accenti i più vivaci. La tinta stabilisce l’armonia; la luminosità stabilisce la gerarchia.

```css
:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}
```

La palette a rettangolo qui sopra, generata da un solo numero. La tinta HSL oltre 360 riparte da sola, quindi non serve mai sottrarre.

## Perché quattro colori sono difficili da bilanciare

Con due colori il contrasto è semplice. Con quattro tinte forti l’occhio non sa dove guardare per primo, e ogni colore sembra gridare sopra gli altri. La maggior parte dei design tetradici che falliscono lo fa perché tutti e quattro i colori hanno più o meno la stessa area e la stessa saturazione. La soluzione è la gerarchia, non meno colori.

Post verticale per un weekend di studi aperti con un colore di sfondo dominante e piccoli accenti

Un colore guida lo sfondo e gli altri compaiono in piccoli punti: contenuto intenso, design calmo.

Post verticale a elenco della stessa serie, guidato da un secondo colore dello schema a quattro colori

Un post gemello in cui è un secondo colore del set a guidare, così la serie risulta affine ma non ripetitiva.

Quella seconda figura indica il vero punto di forza dello schema. Quattro colori danno abbastanza varietà per un’intera serie: ogni post può essere guidato da un membro diverso della palette, mentre l’insieme resta chiaramente coerente. È l’ideale per caroselli, menu e programmi di eventi, dove la [coerenza del brand](https://gradiently.design/it/guide/brand-consistency) conta ma l’uniformità annoia.

## Dove funziona meglio uno schema tetradico

Quattro tinte si meritano il posto quando un progetto deve separare chiaramente più cose senza inventare ogni volta colori nuovi. Un singolo poster raramente ne ha bisogno. Un sistema di solito sì.

- **Codifica per categorie:** il menu di un caffè con bevande, colazione, pranzo e dolci, ciascuno con il suo colore.
- **Programmi di eventi:** quattro palchi, percorsi o giorni che i visitatori devono distinguere a colpo d’occhio.
- **Grafici e dashboard:** quattro serie di dati che devono restare distinte, idealmente [verificate anche per il daltonismo](https://gradiently.design/it/guide/color-blindness-design).
- **Brand per bambini e gioco:** dove la versione piena e vivace della palette è proprio il punto.
- **Campagne stagionali:** una tinta che guida ogni trimestre dell’anno, con le altre di supporto.

Per le proporzioni, parti dalla [regola 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) e dividi l’ultimo dieci per cento tra i due accenti. In un menu, per esempio, il colore dominante riempie la pagina, quello di supporto segna i titoli e i due accenti etichettano i piatti vegetariani e le novità.

## Come far sembrare raffinata una palette tetradica

Le palette tetradiche a piena saturazione sembrano una scatola di giocattoli, il che va benissimo per un negozio di giocattoli e va male per quasi tutto il resto. Porta due o tre dei colori verso il grigio o verso lo scuro, e le stesse tinte sembreranno studiate e adulte.

- Blu ardesia: #24324c
- Erica: #a085ad
- Grano: #dfc590
- Salvia: #85a375
- Lino: #f6f2ea

Lo schema a rettangolo cobalto smorzato: le stesse tinte, ora abbastanza quiete per un hotel, una libreria o un matrimonio.

- Da cobalto ad ametista: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Da calendula a felce: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Erica su ardesia: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

In uno schema a rettangolo, sfuma ogni coppia a 60 gradi con se stessa. Sfumare verso un opposto attraversa il grigio; vedi i [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients).

### Evita

- Quattro tinte con la stessa area e la stessa luminosità
- Testo in una tinta vivace su un’altra
- Un gradiente che attraversa tutte e quattro
- Aggiungere una quinta tinta per sistemare l’equilibrio

### Fai

- Un colore dominante, circa il 60 per cento dell’area
- Un neutro per testo e spazio
- Due tinte smorzate, due lasciate più vivaci
- Ruota il colore guida lungo una serie

Se quattro colori ti sembrano troppi, torna a tre con i [colori triadici](https://gradiently.design/it/guide/triadic-colors) o i [colori complementari divisi](https://gradiently.design/it/guide/split-complementary-colors), che mantengono un forte contrasto con una tinta in meno da gestire. Poi prova la palette su design veri: in Gradiently, i colori salvati in un brand kit (una funzione Pro) compaiono per primi in ogni selettore di colore dello Studio, così ogni post di una serie può avere una guida diversa.

## FAQ

### Che cos’è uno schema di colori tetradico?

Una palette di quattro tinte formata da due coppie complementari sul cerchio cromatico, che disegnano un rettangolo o un quadrato.

### Che differenza c’è tra schema a rettangolo e a quadrato?

Lo schema a rettangolo usa tinte a 0, 60, 180 e 240 gradi; quello a quadrato le distanzia in modo uniforme a intervalli di 90 gradi. I rettangoli di solito sono più facili da bilanciare.

### Tetradico e doppio complementare sono la stessa cosa?

Lo schema tetradico a rettangolo si chiama spesso doppio complementare, perché sono due coppie complementari vicine tra loro.

### Qual è un esempio di schema di colori tetradico?

Cobalto `#1B3C7E`, ametista `#9D59C0`, calendula `#F0B642` e felce `#7DBA5E` formano uno schema a rettangolo: cobalto e ametista distano 60 gradi, opposti a calendula e felce.

### Come si bilancia una palette di quattro colori?

Lascia dominare un colore, dai a uno un ruolo di supporto e tieni gli altri due come piccoli accenti. Smorza o scurisci alcune tinte e aggiungi un neutro per il testo.