Schema colori tetradico: quattro colori in equilibrio

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.

Come costruire uno schema di colori tetradico

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

   Aggiungi il complementare

   Aggiungi 180 gradi. Quella coppia è la spina dorsale dello schema. I colori complementari spiegano perché gli opposti funzionano.

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

: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 */
}

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.

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

Se quattro colori ti sembrano troppi, torna a tre con i colori triadici o i colori complementari divisi, 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.