La regola 60-30-10
È la regola più utile per distribuire i colori. Viene dall'interior design, ma va bene per qualsiasi progetto.
- 60%: colore dominante. Di solito è un neutro o un tono morbido. Copre sfondi e grandi superfici.
- 30%: colore secondario. Dà personalità. Si usa per blocchi, menu o mobili.
- 10%: colore di accento. È il più vistoso. Si usa per pulsanti, icone o dettagli.
Per esempio: bianco sporco al 60%, blu navy al 30% e arancione al 10%.
Non serve misurare con precisione. L'idea è che un colore guidi, un altro accompagni e un altro risalti.
Il ruolo dei neutri
I neutri sono bianco, nero, grigio, beige, crema e marroni chiari. Stanno bene con quasi tutto.
Servono a far riposare la vista e a far risaltare i colori forti. Una palette senza neutri di solito risulta stancante.
- Bianco e bianco sporco: pulizia e spazio.
- Grigio: moderno e sobrio. Scegli grigi caldi o freddi in base al resto della palette.
- Beige e sabbia: calore e naturalezza.
- Nero o quasi nero: eleganza e contrasto. Per il testo, un grigio molto scuro è spesso più comodo del nero puro.
Abbinare per temperatura
I colori si dividono in caldi (rossi, arancioni, gialli) e freddi (blu, verdi, viola). Ci sono tre modi semplici per abbinarli:
- Tutto caldo: risulta accogliente ed energico. Ideale per ristoranti o marchi vicini alle persone.
- Tutto freddo: risulta tranquillo e professionale. Ideale per salute, tecnologia o finanza.
- Base fredda con accento caldo: la scelta più versatile. L'accento caldo attira lo sguardo su uno sfondo calmo.
Quello che di solito non funziona è mescolare tanti colori caldi e freddi intensi insieme, senza un colore dominante.
Contrasto per il testo
Un bel colore non serve a nulla se il testo non si legge. Il contrasto tra testo e sfondo è fondamentale per la lettura e l'accessibilità.
- Usa testo scuro su sfondo chiaro, o testo chiaro su sfondo scuro.
- Evita testo giallo, verde chiaro o grigio chiaro sul bianco.
- Evita di sovrapporre colori complementari saturi, come rosso su verde. Vibrano e stancano.
- Le linee guida WCAG chiedono un rapporto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande.
Puoi controllare qualsiasi coppia di colori con il nostro strumento di verifica del contrasto.
15 abbinamenti di colori che funzionano sempre
Queste coppie sono sicure per iniziare. Usale come base e aggiungi un neutro o un accento se serve.
- Blu navy e crema: classico, serio e facile da leggere.
- Nero e oro: lusso ed eleganza.
- Blu e arancione: complementari pieni di energia.
- Verde bosco e beige: naturale e tranquillo.
- Rosa e grigio antracite: moderno ed equilibrato.
- Giallo e nero: massimo contrasto, ideale per gli avvisi.
- Bordeaux e sabbia: caldo e raffinato.
- Turchese e corallo: fresco ed estivo.
- Viola e lilla chiaro: monocromatico e creativo.
- Marrone e verde salvia: terroso, ideale per marchi naturali.
- Grigio e pesca: morbido e gentile.
- Blu petrolio e giallo pallido: sereno con un tocco di luce.
- Terracotta e bianco sporco: caldo e mediterraneo.
- Verde petrolio scuro e senape: retrò e con personalità.
- Bianco e rosso: diretto, energico e molto visibile.
Trovi molte altre idee, con i codici HEX, nella nostra pagina di abbinamenti di colori.
Cosa abbinare a ogni colore
Se hai già un colore principale, questa lista ti dà un punto di partenza veloce:
- Rosso: bianco, nero, grigio, blu navy e beige. Per osare, rosa o arancione.
- Arancione: blu navy, turchese, bianco, crema e marrone.
- Giallo: grigio, nero, blu navy e bianco. Il giallo senape sta bene con il verde scuro.
- Verde: beige, bianco, marrone, oro e rosa tenue.
- Blu: bianco, arancione, grigio, giallo e corallo. Il blu navy funziona quasi come un neutro.
- Viola: grigio, lilla, oro, verde salvia e bianco.
- Rosa: grigio, blu navy, verde oliva, bianco e oro.
- Marrone: crema, verde, blu petrolio, arancione e bianco sporco.
Nota che i neutri compaiono in quasi tutte le liste. Sono il modo più sicuro per accompagnare un colore forte.
Come creare il tuo abbinamento
- Scegli un colore principale in base a ciò che vuoi comunicare.
- Cerca un colore secondario nel cerchio cromatico: un vicino per un effetto tranquillo, un opposto per un effetto vistoso.
- Aggiungi uno o due neutri.
- Scegli un solo colore di accento per l'elemento più importante.
- Prova la palette su un esempio reale: una pagina, una slide o una foto della stanza.
Nel dubbio, usa meno colori. Da tre a cinque colori bastano per quasi ogni progetto.
Errori comuni negli abbinamenti di colori
- Usare troppi colori. Il risultato sembra disordinato e niente risalta.
- Dare lo stesso peso a tutti. Senza un colore dominante, l'occhio non sa dove guardare.
- Dimenticare il contrasto. Testi che non si leggono o pulsanti che non si vedono.
- Saturare tutto. I colori molto vivaci stancano. Abbinali a toni morbidi.
- Ignorare il contesto. Un colore appare diverso alla luce naturale, sullo schermo o stampato.
- Copiare senza adattare. Una palette che funziona per un marchio può non adattarsi al tuo pubblico.
- Mescolare neutri di temperatura diversa. Un grigio freddo accanto a un beige caldo può sembrare sporco. Scegli neutri della stessa famiglia.
- Non provare su più schermi. Un colore può sembrare perfetto sul tuo computer e spento su uno smartphone. Controlla sempre su più dispositivi.