# Colori complementari divisi: contrasto con meno stridore

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

Una coppia complementare è vistosa e difficile da bilanciare. Dividi l’opposto in due e mantieni quasi tutto il contrasto mentre i colori smettono di litigare. Ecco come funziona, con palette da copiare.

## The short version

- I colori complementari divisi sono un colore base più i due colori ai lati del suo complementare sulla ruota dei colori.
- Su una ruota di 360 gradi i due compagni stanno a circa 150 e 210 gradi dalla base, circa 30 gradi ai lati del suo esatto opposto.
- Lo schema mantiene un forte contrasto ma stride meno di una semplice coppia complementare, perché nessuna coppia di colori è esattamente opposta.
- Funziona meglio quando il colore base domina e i due colori divisi sono usati come accenti più piccoli.
- Le ruote dei pittori e quelle degli schermi collocano i complementari in modo diverso, quindi la stessa base può dare palette divise leggermente diverse.

I **colori complementari divisi** sono tre colori: una base, più i due colori ai lati del complementare della base. Invece di abbinare il blu al suo opposto diretto, l’arancione, abbini il blu a un rosso arancio e a un giallo arancio. Mantieni il contrasto caldo contro freddo che rende vivaci gli schemi complementari, ma poiché nulla sta esattamente di fronte a qualcos’altro, il risultato è più dolce per l’occhio e molto più facile da bilanciare in un design vero.

## Come funzionano i colori complementari divisi

Immagina la [ruota dei colori](https://gradiently.design/it/guide/color-wheel) come un orologio. Il tuo colore base è alle dodici. Il suo complementare è alle sei. Uno schema complementare diviso salta le sei e prende invece le cinque e le sette. In gradi, significa tinte a circa 150 e 210 gradi dalla base.

1. **Scegli una tinta base** Parti dal colore di cui il design parla davvero: il colore del brand, il prodotto, l’atmosfera. Diciamo il verde petrolio, a una tinta di 175 gradi.
2. **Trova il suo complementare** Aggiungi 180 gradi. Il complementare del verde petrolio è un rosso corallo a circa 355 gradi.
3. **Spostati di 30 gradi per lato** Vai di 30 gradi in entrambe le direzioni dal complementare: circa 325 gradi (rosa) e 25 gradi (arancione).
4. **Regola luminosità e saturazione** Le tinte definiscono lo schema, ma sei tu a scegliere quanto ciascuna sia chiara, profonda o spenta. È lì che la palette comincia a sembrare tua.

- Base verde petrolio: #188b81
- Rosa orchidea: #e052a5
- Albicocca: #f58a3d
- Verde petrolio profondo: #173633
- Carta calda: #f6f0ea

L’esempio svolto: verde petrolio con rosa e albicocca, più un verde petrolio più scuro e un neutro per testo e spazio.

## Perché i complementari divisi stridono meno

Gli opposti esatti, come rosso e ciano o blu e arancione, competono per l’attenzione con la stessa forza. Messi uno accanto all’altro a piena saturazione possono sembrare vibrare, e mescolati diventano grigi. I [colori complementari](https://gradiently.design/it/guide/complementary-colors) sono potenti per questo motivo, ma lasciano poco margine d’errore.

In uno schema diviso, i due compagni distano 60 gradi tra loro, il che li rende parenti stretti. Si sostengono invece di combattersi, e insieme bilanciano la base. Ottieni contrasto con un alleato naturale sul lato caldo, o su quello freddo, a seconda di dove parti.

| Schema | Colori | Contrasto | Facilità di bilanciamento |
| --- | --- | --- | --- |
| Complementare | 2, esattamente opposti | Il più alto | Difficile |
| Complementare diviso | 3, base più due quasi opposti | Alto | Medio |
| [Triadico](https://gradiently.design/it/guide/triadic-colors) | 3, equidistanti a 120 gradi | Alto | Da medio a difficile |
| [Analogo](https://gradiently.design/it/guide/analogous-colors) | 3, uno accanto all’altro | Basso | Facile |

Il complementare diviso sta tra la calma dell’analogo e il dramma del complementare.

## Esempi di palette complementari divise

Cinque palette costruite con i passaggi qui sopra. Il primo colore di ogni riga è la base; gli altri due sono i suoi compagni divisi. Luminosità e saturazione sono state calibrate perché ogni insieme sia utilizzabile nel lavoro vero, non solo teoricamente corretto.

| Base | Esadecimale base | Compagni divisi | Sensazione |
| --- | --- | --- | --- |
| Verde petrolio | `#188b81` | `#e052a5` orchidea, `#f58a3d` albicocca | Tropicale, moderno, vivace |
| Viola | `#6629a3` | `#f5e63d` limone, `#3fa648` foglia | Giocoso, creativo, audace |
| Blu cobalto | `#1b4f98` | `#e45e44` vermiglio, `#f5d63d` girasole | Sicuro, sportivo, classico |
| Cremisi | `#c32230` | `#318160` giada, `#2970a3` ceruleo | Festivo, solido, ricco |
| Verde bosco | `#2a6f41` | `#ab5eba` orchidea, `#e4677c` rosa | Botanico, romantico, fresco |

Copia i codici direttamente nel tuo strumento. Usa la base per la maggior parte dell’area.

- Schema verde petrolio: i due compagni: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Schema cobalto: i due compagni: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Base verde petrolio come fondo: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Base cobalto come fondo: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

I due compagni divisi sono vicini, quindi si fondono in modo pulito. Fondere la base direttamente in un compagno attraversa la ruota e diventa fangoso, quindi tieni la base come fondo a sé.

## Come usare uno schema complementare diviso in un design

Tre colori ugualmente forti fanno sembrare il design una bandiera. Dai loro invece compiti diseguali. La [regola 60 30 10](https://gradiently.design/it/guide/60-30-10-rule) è un buon punto di partenza: la base copre gran parte dell’area, un compagno ha un ruolo di supporto e l’altro compare solo dove vuoi che l’occhio vada per primo.

Attenuare è l’altra leva. Scurisci o ingrigisci la base finché si comporta quasi come un neutro, e i due compagni all’improvviso sembrano voluti e non rumorosi. È così che gli schemi divisi finiscono per sembrare sofisticati: un verde petrolio profondo, un rosa polveroso e un’albicocca morbida usano le stesse tinte della versione vivace, ma si leggono come un hotel boutique e non come un pallone da spiaggia.

Post verticale del menu d’estate su sfondo verde petrolio profondo con accenti rosa e albicocca

Un fondo verde petrolio profondo fa quasi tutto il lavoro; rosa e albicocca sono riservati alle parole e a un solo punto luce.

### Da evitare

- Tutte e tre le tinte a piena saturazione e area uguale
- Testo corrente in un colore compagno sopra l’altro
- Una sola sfumatura dalla base a un compagno attraverso la ruota
- Aggiungere sopra una quarta tinta vivace

### Da fare

- Una base dominante, spesso scurita o attenuata
- Compagni a luminosità diversa, così uno guida
- Un neutro per testo e spazio per respirare
- Controlla il contrasto ovunque stiano le parole

## Ruota del pittore o ruota dello schermo

Esistono due ruote dei colori comuni. La tradizionale ruota del pittore usa rosso, giallo e blu come primari, quindi l’opposto del rosso è il verde. Gli schermi usano luce rossa, verde e blu, quindi su una ruota HSL l’opposto del rosso è il ciano. Entrambe danno schemi validi; basta usare una sola ruota con coerenza. Se lavori in CSS, la ruota dello schermo è quella che usa `hsl()`, quindi puoi generare uno schema con un po’ di aritmetica.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Cambia `--h` e l’intero schema complementare diviso si sposta con essa. Altro su questo modello in [tonalità, saturazione e luminosità](https://gradiently.design/it/guide/hue-saturation-brightness).

Per vedere una palette al lavoro su formati veri, il Designer di Gradiently può impaginare un post, una storia e un banner in un colpo solo, così giudichi le proporzioni a ogni dimensione invece che su una cartella colori.

## FAQ

### Cosa sono i colori complementari divisi?

Un colore base più i due colori ai lati del suo complementare sulla ruota dei colori. Per il blu, sono il rosso arancio e il giallo arancio.

### Come si trovano i colori complementari divisi?

Trova il complementare del colore base aggiungendo 180 gradi alla sua tinta, poi prendi le tinte a circa 30 gradi ai suoi lati.

### Il complementare diviso è meglio del complementare?

È più facile da bilanciare. Mantieni gran parte del contrasto, ma i colori stridono meno perché nessuno è un opposto esatto.

### Qual è il complementare diviso del rosso?

Sulla ruota del pittore, giallo verde e blu verde. Su una ruota HSL dello schermo, i compagni del rosso sono un verde ciano e un blu ciano, intorno a 150 e 210 gradi.

### Quanti colori ha uno schema complementare diviso?

Tre tinte, anche se la maggior parte delle palette vere aggiunge un neutro scuro e uno chiaro per testo e spazio.