In breve
- I colori complementari sono coppie che stanno esattamente di fronte sul cerchio cromatico, come blu e arancione.
- Affiancati alla massima intensità e con luminosità simile, i colori complementari sembrano vibrare lungo il bordo condiviso.
- Il modo più affidabile di usare i complementari è lasciarne dominare uno e usare l’altro come piccolo accento.
- Cambiare luminosità o saturazione di un colore della coppia mantiene il contrasto togliendo la stonatura.
- Un gradiente diretto tra due complementari tende a diventare grigio al centro, cosa che un colore intermedio o l’interpolazione in OKLCH risolve.
In questa pagina
I colori complementari sono due tonalità che stanno esattamente di fronte sul cerchio cromatico, come blu e arancione, rosso e verde, o giallo e viola. Ognuna fa sembrare l’altra più intensa, ed è per questo che le coppie complementari danno il contrasto di colore più forte possibile. Usato con cura, quel contrasto rende impossibile non notare un singolo elemento. Usato in parti uguali e alla massima intensità, rende il design fastidioso da guardare.
Quali coppie contano come complementari dipende dal cerchio. Il cerchio dei pittori abbina il blu all’arancione; quello degli schermi abbina il blu al giallo. La guida al cerchio cromatico spiega la differenza. Le coppie qui sotto sono quelle che i designer usano di più.
Coppie di colori complementari, con i codici
| Coppia | Colore A | Colore B | Sensazione |
|---|---|---|---|
| Blu e arancione | #1d4ed8 | #f97316 | Energica, sportiva, chiara |
| Blu notte e oro | #1e3a8a | #d4a017 | Classica, affermata |
| Rosso e verde | #b91c1c | #15803d | Festiva, naturale, rumorosa |
| Viola e giallo | #6d28d9 | #facc15 | Giocosa, elettrica |
| Verde acqua e corallo | #0f766e | #fb7185 | Fresca, calda, moderna |
| Prugna e salvia | #581c87 | #a3b18a | Attenuata, editoriale |
Perché i colori complementari vibrano
Metti due complementari di luminosità simile e piena saturazione uno accanto all’altro e il bordo tra loro sembra tremolare. Gli occhi non riescono a stabilire dove finisce uno. L’effetto è più forte con rosso e verde o blu e arancione alla stessa intensità, e rende molto difficile leggere un testo in un colore sull’altro.
La soluzione non è quasi mai cambiare le tonalità. Rendi una delle due molto più scura o più chiara, o molto meno satura. La coppia resta complementare, ma il bordo smette di combattere. Questo risolve anche la leggibilità, perché il testo ha bisogno più di contrasto di luminosità che di contrasto di tonalità; vedi il contrasto dei colori.
Come usare i colori complementari: uno guida, uno accentua
L’approccio più affidabile è dare a un colore quasi tutto lo spazio e all’altro un compito piccolo e importante: un pulsante, un prezzo, una sola parola, un adesivo. L’accento attira l’occhio perché è l’unico del suo genere. Metà e metà, invece, divide l’attenzione e raramente sembra pianificato.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- Colore dominante: sfondi, grandi forme, gran parte della superficie. Di solito il più scuro o il più quieto della coppia.
- Colore di accento: inviti all’azione, evidenziazioni, un numero chiave. Di solito il più luminoso.
- Neutri: quasi bianco, quasi nero o un grigio caldo per dare spazio a entrambi. Pochi buoni design complementari hanno solo due colori.
- Guida alle proporzioni: la regola 60-30-10 è un buon punto di partenza, con il complementare come quel 10.
Gradienti complementari senza il centro grigio
Sfuma direttamente due complementari e il punto a metà diventa grigio o marrone. Nello spazio colore sRGB usato dalla maggior parte degli strumenti, i valori di rosso, verde e blu di due opposti hanno una media vicina al neutro. È uno degli errori più comuni nei gradienti.
Le due soluzioni più efficaci sono un punto intermedio con una tonalità tra le due e l’interpolazione in OKLCH, che gira intorno al cerchio cromatico invece di tagliarlo. Gradienti sporchi e gradienti OKLCH in CSS le spiegano nel dettaglio.
Dove funzionano meglio le palette complementari
I complementari si adattano al lavoro che deve essere notato in fretta e letto a distanza. Sono meno adatti a letture lunghe, ambienti calmi o a tutto ciò che deve sembrare quieto, dove i colori analoghi funzionano meglio.
- Inviti all’azione. Un pulsante caldo su una pagina fredda, o il contrario, è l’uso classico. Si trova senza cercare.
- Sport ed eventi. Maglie, manifesti e biglietti usano colori opposti perché si leggono da un capo all’altro di uno stadio o di una strada.
- Cibo e vendita al dettaglio. Lo styling del cibo spesso mette piatti caldi contro piatti o sfondi freddi perché risaltino; un adesivo di saldi nel complementare della confezione spicca sullo scaffale.
- Dati e mappe. Due tonalità opposte mostrano chiaramente i due lati di un confronto, purché delle etichette le sostengano per chi vede i colori in modo diverso.
- Ritratti e foto di prodotto. Uno sfondo nel complementare del colore principale del soggetto lo separa senza un contorno netto.
Errori con i colori complementari da evitare
Da evitare
- Quantità uguali di entrambi i colori
- Testo in un complementare su sfondo dell’altro
- Entrambi i colori a piena saturazione e con luminosità simile
- Un gradiente diretto tra la coppia
Da fare
- Un colore dominante e un piccolo accento
- Testo in un neutro quasi bianco o quasi nero
- Un colore più profondo, più pallido o più quieto dell’altro
- Un colore intermedio o una sfumatura in OKLCH
Se una coppia complementare sembra troppo tesa anche quando è bilanciata, prova la complementare divisa: una tonalità più le due ai lati della sua opposta. Mantiene l’energia e ammorbidisce la stonatura. Palette triadiche e complementari divise mostra come.
Le domande più frequenti
Cosa sono i colori complementari?
I colori complementari sono due tonalità opposte sul cerchio cromatico, come blu e arancione o rosso e verde. Insieme creano il contrasto di colore più forte.
Qual è il colore complementare del blu?
Sul cerchio tradizionale dei pittori è l’arancione. Sul cerchio RGB degli schermi usato dagli strumenti digitali è il giallo.
Perché i colori complementari sembrano vibrare?
Quando due opposti di luminosità simile e piena saturazione si toccano, l’occhio fatica a fissare il bordo. Rendere un colore più scuro, più chiaro o meno saturo lo ferma.
Come creo un gradiente tra colori complementari?
Aggiungi un punto intermedio con una tonalità tra le due, oppure interpola in OKLCH. Una sfumatura diretta in sRGB tra complementari di solito diventa grigia al centro.
Quanto di ciascun colore complementare devo usare?
Lasciane dominare uno e usa l’altro come piccolo accento, ad esempio circa 90% a 10%, con dei neutri per dare spazio a entrambi.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
