In breve
- La regola 60 30 10 dice che un design equilibrato usa un colore dominante per circa il 60% dello spazio, un colore secondario per circa il 30% e un accento per circa il 10%.
- La regola nasce dall’interior design, dove pareti, arredi e accessori si dividono da soli in questi tre ruoli.
- Sugli schermi, il 60% è di solito lo sfondo, il 30% va a pannelli, forme o testo, e il 10% alla sola cosa che vuoi far notare o toccare.
- In un gradiente, la regola decide quanta parte del campo occupa ogni colore, ed è per questo che l’accento deve comparire in un’area piccola e non in una fascia intera.
- I numeri sono un punto di partenza: i neutri possono contare come il 60%, e molti design efficaci si avvicinano a 70-25-5 o a 90-10.
In questa pagina
La regola 60 30 10, di solito scritta 60-30-10, è una guida semplice per le proporzioni di colore: usa un colore dominante per circa il 60% di un design, un colore secondario per circa il 30% e un accento per il 10% restante. Viene dall’interior design, dove pareti, mobili e accessori occupano da soli questi ruoli. Funziona altrettanto bene per post social, slide, siti web e palette di brand, perché impedisce ai colori di contendersi la stessa attenzione.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Cosa fa ciascuna quota
Le tre quote hanno compiti diversi. Il 60% dà il tono ed è di solito calmo: uno sfondo, una base, una parete. Il 30% dà struttura e contrasto, e regge pannelli, forme o titoli grandi. Il 10% è dove l’occhio va per primo, quindi va sulla cosa più importante: un pulsante, un prezzo, una data, un logo.
| Quota | Ruolo | Colore tipico | Dove va |
|---|---|---|---|
| 60% | Dominante | Silenzioso: un neutro, una tinta chiara o un tono scuro profondo | Sfondi, grandi campi, base della pagina |
| 30% | Secondario | In contrasto ma non urlato | Pannelli, card, titoli grandi, aree immagine |
| 10% | Accento | Il colore più saturo che hai | Pulsanti, prezzi, parole chiave, piccole forme |
La regola 60-30-10 in un post social
In un post, il colore dominante è lo sfondo, il secondario è il titolo o una forma dietro di esso, e l’accento è un piccolo dettaglio come una data, un prezzo o una sola parola sottolineata. L’errore comune è dare l’accento all’intero titolo. Allora il 30% del post urla, e nulla spicca perché tutto spicca.
Campo dominante, testo secondario e l’accento riservato alla riga della data.
Le stesse proporzioni su una slide panoramica. Le quote reggono anche quando cambia la forma.
Applicarla a slide e siti web
Nelle slide, imposta il 60% una volta sola, come sfondo di ogni slide, e mantienilo. Usa il 30% per titoli, grafici e cornici delle immagini. Riserva il 10% al numero o alla parola per slide che il pubblico deve ricordare. Sfondi per presentazioni approfondisce le basi che non rubano spazio ai contenuti.
In un sito web, lo sfondo della pagina e le grandi sezioni sono il 60%, navigazione, card, footer e testo corrente sono il 30%, e il 10% va a inviti all’azione e link. Se il pulsante principale ha lo stesso colore dei titoli, alla pagina non resta nessun accento per guidare le persone.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }Per un brand, scrivi le quote nella tua guida di stile del brand accanto ai codici esadecimali. Una palette senza proporzioni invita ogni designer a scegliere il proprio colore preferito per lo sfondo, e nel giro di un mese il brand sembra tre brand.
La regola 60 30 10 in un gradiente
I gradienti rompono facilmente le proporzioni, perché una sfumatura uniforme dà a ogni colore la stessa quota. Applica la regola spostando i punti di colore: lascia che il colore dominante tenga gran parte del campo, sfuma nel secondario per circa un terzo e fai entrare l’accento solo su un bordo o in un piccolo bagliore.
Quando piegare o rompere la regola
Rompila quando
- Lavori con una sola tinta: uno schema monocromatico è più vicino al 60-30-10 nella luminosità che nella tinta
- Il design è soprattutto testo su un neutro, dove il 90-10 è più pulito
- Una foto porta con sé il suo colore e la tua palette la incornicia soltanto
- Il colore del brand deve dominare, come in un poster tutto rosso brand
Mantienila quando
- I colori iniziano a farsi concorrenza e nulla spicca
- Un team condivide una palette e ha bisogno di una regola da seguire
- Hai tre o più colori forti da bilanciare
- Pulsanti e numeri chiave si stanno perdendo
I numeri sono approssimativi. Lo spazio bianco conta. Neutri come bianco sporco, antracite e sabbia possono essere il tuo 60%, con due veri colori a dividersi il resto. Conta l’ordine: un leader chiaro, un supporto, un accento raro. Per scegliere i colori veri e propri, leggi come scegliere i colori del brand e le basi della teoria del colore.
Le domande più frequenti
Cos’è la regola 60 30 10?
È una guida alle proporzioni di colore: circa il 60% di un design in un colore dominante, il 30% in un colore secondario e il 10% in un colore di accento.
Da dove viene la regola 60-30-10?
È una regola pratica consolidata dell’interior design, dove pareti, arredi e accessori occupano naturalmente le tre quote.
Il bianco conta nella regola 60 30 10?
Sì. I neutri come bianco, bianco sporco, sabbia o antracite spesso formano il 60% dominante, lasciando il 30% e il 10% ai colori veri e propri.
Di che colore dovrebbe essere l’accento del 10%?
Di solito il colore più saturo che hai, usato sulla cosa che vuoi far notare per prima, come un pulsante, un prezzo o una data.
Come uso la regola 60-30-10 in un gradiente?
Sposta i punti di colore in modo che il colore dominante copra gran parte del campo, il secondario sfumi per circa un terzo e l’accento compaia solo in un’area piccola o su un bordo.
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
