Colori complementari divisi: contrasto con meno stridore

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

   Trova il suo complementare

   Aggiungi 180 gradi. Il complementare del verde petrolio è un rosso corallo a circa 355 gradi.

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

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

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.

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

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.

: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%);
}

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.