Design a due toni: look decisi con soli due colori

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.

Se vuoi la fusione invece della divisione, gradienti a due colori tratta quel lato, e schemi di colori monocromatici 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.

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 spiega perché gli opposti vibrano quando si incontrano.

Come scegliere i tuoi due colori

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

• 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 approfondisce; sul web si può fare con le modalità di fusione.

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

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

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

Per il contrasto nei due sensi, misuralo con gli strumenti di contrasto dei colori e accessibilità. Se ti piace la disciplina dei due colori, lo stesso pensiero attraversa il design grafico minimalista e, a tutto volume, il design grafico audace.