# Regola 60 30 10: le proporzioni di colore per design e brand [Canonical HTML page](https://gradiently.design/it/guide/60-30-10-rule) Quasi tutte le palette falliscono nelle proporzioni, non nella scelta. Tre numeri ti dicono quanto usare di ogni colore, e funzionano sullo schermo di un telefono come nei salotti da cui vengono. ## The short version - 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. 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. 60 sabbia, 30 blu navy, 10 corallo: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)` La regola disegnata come una barra. L’accento è piccolo, ed è proprio per questo che è la prima cosa che si vede. ## 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 | L’accento funziona perché è raro. Raddoppialo e smette di essere un accento. - 60 Sabbia: #f3efe6 - 30 Blu porto: #1f3a5f - 10 Corallo: #e76f51 Una palette scritta con le sue proporzioni. Annotare la quota accanto a ogni colore evita che un team usi il corallo dappertutto. ## 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. Un post verticale per una fiera della stampa con sfondo calmo, titolo forte e un piccolo accento sull’orario Campo dominante, testo secondario e l’accento riservato alla riga della data. Lo stesso design della fiera della stampa impaginato come slide panoramica 16 per 9 con lo stesso equilibrio di colori 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](https://gradiently.design/it/guide/presentation-backgrounds) 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. ```css :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; } ``` Dare ai colori un nome per ruolo e non per tinta rende le proporzioni difficili da violare. Il testo scuro sul pulsante corallo misura circa 6:1. > **Il test degli occhi socchiusi** Socchiudi gli occhi davanti al design finito finché i dettagli si sfocano. Dovresti vedere un colore grande, un secondo colore ben chiaro e un piccolo punto luminoso. Se vedi tre blocchi uguali, o l’accento sparso su tutto il layout, riporta le quote verso 60, 30 e 10. Per un brand, scrivi le quote nella tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide) 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. - Tre terzi: nessun dominante: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)` - 60-30-10: blu guida, corallo brilla: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)` - Scuro: inchiostro, ardesia, oro: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)` - Morbido: salvia, crema, prugna: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)` La prima sfumatura dà tre colori lo stesso peso e appare confusa. La seconda tiene la stessa idea in proporzione. Le ultime due sono schemi 60-30-10 già pronti. ## Quando piegare o rompere la regola ### Rompila quando - Lavori con una sola tinta: uno [schema monocromatico](https://gradiently.design/it/guide/monochromatic-color-scheme) è 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](https://gradiently.design/it/guide/how-to-choose-brand-colors) e [le basi della teoria del colore](https://gradiently.design/it/guide/color-theory-basics). ## FAQ ### 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.