La regola del 60-30-10: bilanciare il colore nel design

La prima volta che la regola del 60-30-10 ha davvero fatto clic per me, stavo fissando una dashboard che avevo costruito e che appariva affollata in un modo che non sapevo spiegare. La palette andava bene. I colori erano armoniosi, presi direttamente dalla ruota. Ma lo schermo risultava chiassoso, come se tutti nella stanza parlassero contemporaneamente. Il problema non era quali colori avessi scelto. Era quanto ne avessi usato di ciascuno.

Quella distinzione è l'intero senso della regola del 60-30-10. Dice quasi nulla sulla tonalità e quasi tutto sulla proporzione: circa il 60% del tuo design è un colore dominante, il 30% è un colore secondario di supporto e il 10% è un accento. Azzecca quei rapporti e perfino una palette mediocre si legge come intenzionale. Sbagliali e perfino l'armonia messa a punto con più cura risulta caotica.

Da dove arriva la regola

La regola del 60-30-10 è stata presa in prestito dall'interior design, dove gli arredatori la usano da decenni per bilanciare una stanza. La suddivisione classica: il 60% va alle pareti, circa il 30% ai tessuti d'arredo e ai mobili più grandi, e l'ultimo 10% agli accessori — un cuscino decorativo, un vaso, il quadro alla parete. Entra in una stanza ben progettata e di solito non sai articolare perché trasmetta calma, ma le proporzioni stanno facendo un lavoro silenzioso sullo sfondo.

Gli stylist di moda usano la stessa logica (abito, camicia, pochette), e da qualche parte lungo il percorso è migrata nel graphic e nel web design. Il mezzo è cambiato; il principio no. Dai a ogni colore un ruolo definito e una quantità di spazio definita, e l'equilibrio segue quasi in automatico.

Come si trasferisce su UI e web design

Ecco la traduzione che uso davvero quando mi siedo a costruire un'interfaccia.

• 60% — il colore dominante. È la tua tela: sfondi delle pagine, grandi superfici, lo spazio vuoto su cui poggiano i tuoi contenuti. Imposta l'umore generale e, cosa cruciale, è di solito il colore che le persone non notano. Nelle interfacce ben fatte il dominante è un neutro — un bianco, un bianco sporco, un grigio chiaro, o in dark mode un quasi-nero come #0F1115. I neutri sono dominanti perché sono generosi; lasciano che gli altri colori portino la personalità senza combatterli.
• 30% — il colore secondario. È il cast di supporto: card, sidebar, barre di navigazione, divisori di sezione, superfici secondarie. Fornisce struttura e un secondo livello di contrasto rispetto al dominante, ma non reclama mai attenzione. Pensalo come i mobili nella stanza.
• 10% — il colore di accento. È qui che vive l'azione: pulsanti principali, link, stati attivi, badge, l'unica serie di un grafico che vuoi far seguire alle persone. È il cuscino decorativo. L'intero motivo per cui funziona è la scarsità.

Quest'ultimo punto è quello che la maggior parte delle persone non coglie, quindi lascia che lo dica chiaro. L'accento non è potente per via del colore. È potente perché ce n'è così poco. Quando il tuo blu compare solo sul pulsante principale e sulla voce di navigazione attiva, l'occhio dell'utente impara in circa due secondi che il blu significa agisci qui. Nel momento in cui il blu spunta anche sui titoli, sulle icone, su tre bordi di card e su un gradiente di sfondo, smette di significare qualcosa. Hai speso il segnale.

Un esempio concreto

Lascia che ne costruisca uno reale così le proporzioni non restano astratte. Diciamo che sto progettando una dashboard SaaS e apro il generatore di palette, scelgo un blu pacato come base e uso le armonie monocromatica e complementare per estrarre i toni di supporto.

• Dominante (60%): #F7F8FA, un grigio freddo quasi bianco. È lo sfondo della pagina e lo spazio vuoto dentro le card. Lo registri a malapena, ed è esattamente giusto così.
• Secondario (30%): #1E293B, un'ardesia profonda. Porta la navigazione superiore, la sidebar, i titoli e il testo di corpo. Nota che "secondario" non deve per forza essere un colore vivido — qui è un neutro scuro che fa un pesante lavoro strutturale. Insieme al dominante è già un'interfaccia completa e usabile.
• Accento (10%): #2563EB, un blu deciso, riservato alla CTA principale, ai link e allo stato di menu attivo. Nient'altro lo riceve.

Passa quel blu attraverso un contrast checker rispetto allo sfondo bianco e sei comodamente oltre la soglia WCAG AA di 4.5:1 per il testo normale — vale la pena confermarlo, perché un accento che non supera il contrasto è un accento che fallisce il suo unico compito. (Più in dettaglio in I rapporti di contrasto WCAG spiegati.) Il checker integrato nello strumento te lo segnalerà prima che vada in produzione.

Ciò che colpisce la maggior parte delle persone in questa palette è quanto poco colore contenga in realtà. Due neutri e un blu. È la regola del 60-30-10 che funziona come previsto — la sobrietà si legge come cura.

Perché la proporzione batte la scelta della tonalità

Farò un'affermazione leggermente controcorrente: per un'interfaccia, azzeccare le proporzioni conta più che azzeccare le tonalità esatte. Puoi sostituire il mio accento #2563EB con un verde acqua, un viola o un corallo caldo e il design risulterà comunque ben composto, perché la struttura tiene. Ma prendi una palette di tre colori scelta splendidamente e perfettamente armoniosa e applicala in terzi uguali, e sembrerà un cartello stradale.

È liberatorio una volta che lo interiorizzi. Significa che un principiante non ha bisogno di un occhio perfetto per il colore — ha bisogno di disciplina su quanto di ogni colore distribuire. Scegli una qualsiasi armonia solida (analoga e complementare frazionata sono entrambe punti di partenza indulgenti; vedi Capire l'armonia dei colori nell'UI design per come scegliere), poi assegna i ruoli e razioni l'accento senza pietà.

Il Nielsen Norman Group fa un'osservazione collegata nel suo lavoro su come usare il colore per migliorare il design: il colore porta significato meglio quando viene usato con parsimonia e coerenza. La suddivisione 60-30-10 è essenzialmente una ricetta pratica per quella parsimonia.

Gli errori che vedo più spesso

Nessun dominante chiaro. È il problema della dashboard con cui ho aperto. Tre colori di peso quasi uguale, nessuno dei quali chiaramente la tela, e l'occhio non ha dove riposare. Soluzione: scegli un colore (di solito un neutro) e dedicagli circa il 60% della superficie prima di posizionare qualsiasi altra cosa.

Abuso dell'accento. Il fallimento più comune con ampio margine. L'accento si insinua sui titoli, poi sulle icone, poi su qualche bordo, e nel giro di un pomeriggio il design non ha più un punto focale. Un utile controllo a istinto: se riesci a indicare rapidamente più di una manciata di punti distinti in cui il tuo accento compare su una data schermata, probabilmente l'hai speso troppo. Riportalo ai veri momenti interattivi.

Trattare i numeri come dogma. Sono un rapporto, non una misurazione. Nessuno sta contando i pixel. Il 60-30-10 è una scorciatoia per "uno dominante, uno di supporto, uno raro". Se la tua suddivisione finisce più vicino a 70-20-10, va bene. Ciò che conta è la gerarchia, non il decimale.

Dimenticare che la regola scala in modo ricorsivo. Dentro una singola card puoi applicare di nuovo le stesse proporzioni — per lo più superficie, un po' di dettaglio strutturale, un tocco di accento. E la regola si trasferisce in modo pulito nella dark mode: il tuo 60% diventa semplicemente un neutro scuro invece di uno chiaro, con accenti che spesso hanno bisogno di una leggera desaturazione per evitare di risplendere. Se vai in quella direzione, Buone pratiche per le palette in dark mode approfondisce gli aggiustamenti.

Trasformarla in un metodo ripetibile

Ecco il flusso di lavoro che consegnerei a un designer alle prime armi.

• Scegli prima un'armonia. Apri la ruota dei colori, scegli una tonalità base e genera un set correlato — analoga per la calma, complementare per l'incisività. Non scervellarti ancora sugli esadecimali esatti.
• Assegna il dominante. Decidi il tuo 60%. Nove volte su dieci è un neutro. Chiaro come default, scuro per la dark mode.
• Assegna il secondario. Scegli il 30% che dà struttura — spesso un secondo neutro o una versione smorzata del tuo colore brand. Conferma che dominante e secondario da soli formino un layout funzionante.
• Raziona l'accento. Estrai un colore vivido per il 10%. Verifica il suo contrasto rispetto alle superfici che toccherà. Poi proteggilo — ogni volta che sei tentato di riutilizzarlo, chiediti se quell'elemento è genuinamente interattivo.
• Verifica socchiudendo gli occhi. Fai un passo indietro, sfoca lo sguardo e guarda lo schermo. Dovresti vedere un campo calmo con uno o due punti luminosi che attirano lo sguardo. Se l'intera cosa vibra, il tuo accento è trapelato.

Il motivo per cui questa regola è sopravvissuta a un salto dai salotti alle dashboard è che risolve un problema che le persone percepiscono prima di saperlo nominare. Il colore in un design non riguarda davvero il gusto — riguarda il budget. La regola del 60-30-10 è solo un modo sensato per spenderlo. Se vuoi mettere alla prova un insieme di tonalità prima di confermarle, buttale ne il generatore di palette, verifica il contrasto e poi poniti la domanda più difficile a cui lo strumento non può rispondere al posto tuo: non sono questi i colori giusti, ma quanto di ciascuno sto per usare.