quanti colori dovrebbe utilizzare il mio sito web? la regola 60-30-10 e quando infrangerla
design · Oct 6, 2026 · 5 min read
la risposta onesta è un numero abbastanza piccolo da costituire un piano: un colore che fa il lavoro, uno che lo supporta, un accento per l'azione. più i neutri: i bianchi, i quasi neri e i grigi che tecnicamente sono colori ma funzionano come la tela. tutto il resto è decorazione che chiede ai visitatori di tenere in testa più di quanto meriti il tuo messaggio.
questo non è gusto, è aritmetica: ogni colore aggiuntivo moltiplica le combinazioni che la tua pagina può produrre e la maggior parte di queste combinazioni sono peggiori di quella base. la moderazione è ciò che fa sembrare intenzionali le scelte rimanenti.
la suddivisione 60-30-10, tradotta per i siti web
la regola dell’interior design sopravvive perché funziona:
- 60 per cento: la tela. sfondo e colori neutri. è qui che vive lo spazio bianco dell'intero sito, e perché la zona più grande è la più silenziosa.
- 30%: il supporto. il colore principale del tuo brand: intestazioni, cartoline, luoghi in cui raggruppano le informazioni. imposta la temperatura del sito.
- 10 per cento: l'accento. un colore saturo riservato alle cose che agiscono: pulsanti, collegamenti, lo stato corrente. il punto centrale di un accento è la scarsità: nel momento in cui cinque colori sono ugualmente forti, nessuno è un accento e niente punta da nessuna parte.
se hai letto what makes a website look cheap, hai già visto la modalità di fallimento dall'altra parte: troppi colori è uno dei segnali più rumorosi che ci siano.
come scegliere i colori reali
Partiamo dal brand, non dalla palette picker: se l’azienda ha un logo, possiede già un colore. questi sono i tuoi 30. allora:
- scegli l'accento in base al lavoro, non in base alle preferenze: è il colore di fai la cosa, quindi deve contrastare fortemente con la tela e il supporto. il blu e l'arancione funzionano in migliaia di mazzi per un motivo.
- estendi prima i neutrali. la maggior parte dei momenti in cui "abbiamo bisogno di più colori" sono in realtà "i nostri grigi non hanno gamma": una buona scala neutra (sfondo, superficie, bordo, testo) crea profondità senza aggiungere tonalità.
- controlla la leggibilità dell'abbinamento: testo su ogni sfondo su cui verrà posizionato. il contrasto è un numero, non un'opinione: la soglia di accessibilità è 4,5:1 per il corpo del testo e ottimizzo la mia spostando la tavolozza nel modo descritto da my color theory writeup.
testo scuro su sfondo chiaro, un accento, fatto. se sembra troppo semplice, la soluzione è la fotografia e la spaziatura, non una quarta tonalità.
le eccezioni: quando più colori sono giusti
la regola si piega dove il contenuto è il colore:
- portfolio e fotografia. l'opera fornisce la tavolozza; il sito diventa neutro, quindi le immagini creano ogni stato d'animo.
- marchi che possiedono davvero un arcobaleno. un marchio per bambini, un festival, un negozio di articoli d'arte: lì i tanti colori sono il messaggio, e la disciplina si sposta altrove: confinare l'arcobaleno a componenti specifici e mantenere tipografia e layout brutalmente coerenti.
- dati e categorie. grafici e tag ottengono un colore per significato. La regola è la coerenza: un colore significa una cosa ovunque sul sito, oppure non significa nulla.
le eccezioni condividono una caratteristica: i colori sono sistema scelto, non accidente accumulato. questa è la linea di demarcazione effettiva, non il conteggio.
FAQ: le domande che effettivamente ricevo
Il sito web dovrebbe corrispondere esattamente al mio logo?
il colore del logo sì, l'intero sito no: la tonalità esatta del logo è spesso troppo satura per occupare il 30% di una pagina. tingilo più scuro o più morbido per le grandi superfici e mantieni la versione pura per i piccoli segni.
e la modalità oscura?
raddoppia i test sulla superficie, non i colori: stesso accento, colori neutri regolati e i controlli del contrasto vengono eseguiti due volte. Spedisco entrambi e il metodo di scansione nel post sulla teoria dei colori è il modo in cui il tema scuro guadagna i suoi numeri.
posso semplicemente utilizzare la tavolozza fornita con il modello?
tu puoi, e migliaia di siti lo fanno, il che è proprio il problema. ricolorare l'unico accento del modello è l'ora di maggiore effetto leva nella personalizzazione fai-da-te.