# Design a due toni: look decisi con soli due colori

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

Due colori, scelti bene, possono reggere un intero brand: poster, menu, post e foto. Ecco come scegliere la coppia, ottenerne più gamma e non farla sembrare piatta.

## The short version

- Il design a due toni costruisce ogni elemento con due colori, di solito uno scuro e uno chiaro, senza un terzo colore se non le tinte dei due.
- La coppia ha bisogno di una netta differenza di luminosità, così testo e forme restano leggibili qualunque colore stia sopra.
- Tinte e ombre dei due colori danno a una palette a due toni gamma sufficiente per sfondi, riquadri e testo secondario.
- Le foto duotone mappano le ombre di un’immagine sul colore scuro e le luci su quello chiaro, così la fotografia si accorda a un’impaginazione a due toni.
- Le impaginazioni a due toni spiccano nei feed affollati perché sembrano volute, e si stampano a basso costo come due colori diretti.

**Design a due toni** significa costruire tutto, testo, forme, sfondi e perfino foto, con soli due colori: di solito uno scuro e uno chiaro, con una forte differenza di luminosità tra loro. Cobalto e mandarino, verde bosco e rosa cipria, inchiostro e burro. Il limite è il punto. Due colori sembrano voluti, si leggono bene a qualsiasi dimensione e danno a un brand una firma riconoscibile più in fretta di una palette completa.

## Due toni, duotone e monocromatico non sono la stessa cosa

Le parole si usano in modo approssimativo, quindi aiuta distinguerle. Si sovrappongono, e molte buone impaginazioni usano tutte e tre le idee insieme.

| Termine | Cosa significa | Uso tipico |
| --- | --- | --- |
| Due toni | Un intero design fatto con due colori distinti | Poster, menu, packaging, sistemi di brand |
| Duotone | Una foto rimappata su due colori, ombre su uno e luci sull’altro | Fotografia dentro un’impaginazione a due toni |
| Monocromatico | Solo tinte e ombre di una tonalità | Brand calmi, di un solo colore |
| Gradiente a due colori | Due colori sfumati dolcemente l’uno nell’altro | Sfondi e sezioni hero |

Il due toni tiene separati i colori; un gradiente li fonde. Entrambi possono vivere in un solo brand.

Se vuoi la fusione invece della divisione, [gradienti a due colori](https://gradiently.design/it/guide/two-color-gradients) tratta quel lato, e [schemi di colori monocromatici](https://gradiently.design/it/guide/monochromatic-color-scheme) la versione a una sola tonalità.

## Dodici palette di colori a due toni

Ogni coppia qui sotto ha un colore abbastanza scuro da reggere il testo sull’altro. Il contrasto tra tonalità conta meno del contrasto di luminosità: una coppia può essere calda e fredda, o due vicini, purché uno sia nettamente più scuro.

- Cobalto e mandarino: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Verde bosco e rosa cipria: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Inchiostro e burro: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Blu Klein e carta: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Verde racing e senape: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Melanzana e lime: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Rosso poster e crema: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Verde petrolio e pesca: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Cioccolato e cielo: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Sangue di bue e rosa pallido: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Nero e giallo fluo: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Viola profondo e lilla: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Dodici coppie, divise in diagonale. Ognuna può scambiare quale colore fa da fondo, il che raddoppia le tue impaginazioni.

Alcune di queste sono complementari, come cobalto e mandarino, che dà la massima energia. Altre sono parenti stretti, come viola profondo e lilla, che sembra più calmo e più costoso. [Colori complementari](https://gradiently.design/it/guide/complementary-colors) spiega perché gli opposti vibrano quando si incontrano.

## Come scegliere i tuoi due colori

1. **Scegli prima il colore scuro** Porterà ogni titolo e paragrafo, quindi deve essere leggibile sul colore chiaro. Blu notte, verde bosco, melanzana, cioccolato e quasi nero vanno tutti bene.
2. **Scegli il colore chiaro per l’atmosfera** È il colore che le persone ricordano. I chiari caldi come pesca e burro sembrano amichevoli; i chiari freddi come cielo e lilla sembrano più quieti.
3. **Controlla il contrasto nei due sensi** Il testo scuro sul colore chiaro dovrebbe raggiungere 4,5:1 per il testo corrente. Ogni coppia nella griglia qui sopra supera quel test.
4. **Provala su tre formati** Un post quadrato, una storia 1080×1920 e un volantino A5. Se la coppia ti somiglia ancora su tutti e tre, tienila.

## Come ottenere più gamma da due colori

Due colori piatti possono sembrare poveri quando serve un riquadro secondario, una didascalia o un pulsante disattivato. La soluzione non è un terzo colore. Mescola tinte del colore chiaro e ombre di quello scuro, così ogni nuovo tono appartiene ancora alla coppia.

- Cobalto: #172e70
- Cobalto 75: #516294
- Cobalto 40: #a2abc6
- Mandarino 10: #fdf0e6
- Mandarino 55: #ffb780
- Mandarino: #ff7a1a

Una coppia, sei toni. Il mandarino al 10% fa un fondo di carta calda, e il cobalto al 40% funziona per il testo secondario su riquadri scuri.

- **Fondo:** la tinta più chiara, per grandi aree e pagine di testo.
- **Principale:** il colore scuro, per titoli, testo corrente e blocchi pieni.
- **Accento:** il colore chiaro a piena forza, per una forma, una parola o un prezzo.
- **Toni intermedi:** una tinta media di ciascuno, per divisori, didascalie e riempimenti delle illustrazioni.

## Foto a due toni con il duotone

Le foto sono il punto in cui le impaginazioni a due toni di solito si rompono: un’immagine a colori pieni porta nella pagina un terzo, un quarto e un quinto colore. Un trattamento duotone rimappa la foto così che le sue ombre diventino il tuo colore scuro e le sue luci il tuo colore chiaro. [L’effetto duotone](https://gradiently.design/it/guide/duotone-effect) approfondisce; sul web si può fare con le modalità di fusione.

```css
.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Un duotone cobalto e mandarino. L’immagine diventa grigia, si moltiplica sul tono chiaro, poi il tono scuro porta le ombre al cobalto.

In Gradiently puoi tingere qualsiasi foto con i colori del Mark come mono, duotone o velatura, così le immagini si uniscono al design invece di combatterlo.

## Idee di design a due toni da provare

Un post verticale diviso in due blocchi di colore, con Aperti fino a tardi il venerdì su un lato

Un’impaginazione divisa: un colore porta le parole, l’altro porta l’atmosfera.

Un post verticale minimale con il testo Menu di primavera in un colore scuro su un fondo chiaro

Un’impaginazione minimale in cui il colore chiaro fa da fondo e il colore scuro fa tutto il testo.

- **Poster di concerti ed eventi:** due colori diretti si stampano a basso costo e sembrano voluti dall’altra parte della strada.
- **Menu di ristoranti:** un colore scuro per i piatti, quello chiaro per la carta, una tinta media per i prezzi.
- **Caroselli Instagram:** alterna quale colore fa da fondo a ogni slide, così scorrere ha un ritmo.
- **Packaging:** un colore per linea di prodotto, l’altro condiviso nell’intera gamma.
- **Presentazioni:** slide di sezione nel colore scuro, slide di contenuto sulla tinta chiara.
- **Biglietti da visita:** un lato per ogni colore.

### Da evitare

- Due colori di luminosità simile
- Far entrare di nascosto un terzo colore per un pulsante
- Foto a colori pieni inserite senza trattamento
- Testo chiaro sul colore chiaro

### Da fare

- Uno nettamente scuro, uno nettamente chiaro
- Tinte e ombre della coppia al loro posto
- Ogni foto in duotone nei due colori
- Controllare il contrasto nei due sensi

Per il contrasto nei due sensi, misuralo con gli strumenti di [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility). Se ti piace la disciplina dei due colori, lo stesso pensiero attraversa il [design grafico minimalista](https://gradiently.design/it/guide/minimalist-design-ideas) e, a tutto volume, il [design grafico audace](https://gradiently.design/it/guide/bold-design-ideas).

## FAQ

### Cos’è il design a due toni?

Un design costruito interamente con due colori, di solito uno scuro e uno chiaro, con tinte di quei due consentite ma nessun terzo colore.

### Quali due colori stanno bene insieme in un design?

Qualsiasi coppia con una netta differenza di luminosità, come cobalto e mandarino, verde bosco e rosa cipria, o inchiostro e burro. Il più scuro deve essere leggibile sul più chiaro.

### Che differenza c’è tra due toni e duotone?

Il due toni descrive un’intera impaginazione fatta con due colori. Il duotone descrive una foto rimappata in modo che ombre e luci diventino due colori.

### Come faccio un’immagine duotone in CSS?

Rendi l’immagine in scala di grigi, fondila con `mix-blend-mode: multiply` sul colore chiaro, poi sovrapponi il colore scuro con `mix-blend-mode: lighten`.

### La stampa a due colori costa meno?

Con la serigrafia e la stampa offset a colori diretti, meno inchiostri di solito significa meno telai o lastre, quindi i lavori a due colori costano in genere meno di quelli a colori pieni.