Kort fortalt
- 60-30-10-reglen siger, at et afbalanceret design bruger en dominerende farve til omkring 60 % af fladen, en sekundær farve til omkring 30 % og en accentfarve til omkring 10 %.
- Reglen stammer fra indretning, hvor vægge, møbler og tilbehør helt af sig selv falder i de tre roller.
- På skærme er de 60 % som regel baggrunden, de 30 % bærer paneler, former eller tekst, og de 10 % går til den ene ting, som folk skal lægge mærke til eller trykke på.
- I en gradient afgør reglen, hvor stor en del af fladen hver farve fylder, og derfor bør accenten optræde i et lille område frem for i et helt bånd.
- Tallene er et udgangspunkt: neutrale farver kan udgøre de 60 %, og mange stærke designs ligger tættere på 70-25-5 eller 90-10.
På denne side
60-30-10-reglen er en enkel rettesnor for farveproportioner: brug en dominerende farve til omkring 60 % af et design, en sekundær farve til omkring 30 % og en accent til de sidste 10 %. Den kommer fra indretning, hvor vægge, møbler og tilbehør af sig selv falder i de roller. Den virker lige så godt til opslag på sociale medier, slides, hjemmesider og brandpaletter, fordi den forhindrer, at alle farver kæmper om den samme opmærksomhed.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Hvad hver andel gør
De tre andele har hver sin opgave. De 60 % sætter stemningen og er som regel rolige: en baggrund, en bund, en væg. De 30 % giver struktur og kontrast og bærer paneler, former eller stor tekst. De 10 % er der, hvor øjet lander først, så de hører til på den ene vigtigste ting: en knap, en pris, en dato, et logo.
| Andel | Rolle | Typisk farve | Hvor den bruges |
|---|---|---|---|
| 60 % | Dominerende | Rolig: en neutral, en lys tone eller en dyb mørk | Baggrunde, store flader, sidens bund |
| 30 % | Sekundær | Kontrasterende, men ikke højlydt | Paneler, kort, stor tekst, billedflader |
| 10 % | Accent | Den mest mættede farve, du har | Knapper, priser, nøgleord, små former |
60-30-10-reglen på et opslag
På et opslag er den dominerende farve baggrunden, den sekundære er overskriften eller en form bag den, og accenten er en enkelt lille detalje som en dato, en pris eller ét understreget ord. Den almindelige fejl er at give accenten til hele overskriften. Så råber 30 % af opslaget, og intet skiller sig ud, fordi alt gør det.
Dominerende flade, sekundær tekst og accenten gemt til datolinjen.
De samme proportioner på et bredt slide. Andelene holder, selv når formen ændrer sig.
Sådan bruger du den på slides og hjemmesider
På slides sætter du de 60 % én gang som baggrund på hvert slide og holder fast i dem. Brug de 30 % til titler, diagrammer og billedrammer. Gem de 10 % til det ene tal eller ord pr. slide, som publikum skal huske. Baggrunde til præsentationer går dybere ind i baggrunde, der ikke konkurrerer med indholdet.
På en hjemmeside er sidens baggrund og de store sektioner de 60 %, navigation, kort, sidefod og brødtekst er de 30 %, og de 10 % går til opfordringer til handling og links. Hvis din primære knap har samme farve som dine overskrifter, er der ingen accent tilbage til at guide folk.
: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; }Til et brand skriver du andelene ind i din brandguide ved siden af hex-koderne. En palet uden proportioner inviterer hver designer til at vælge sin yndlingsfarve til baggrunden, og inden for en måned ligner brandet tre forskellige brands.
60-30-10-reglen i en gradient
Gradienter bryder let proportioner, fordi en jævn overgang giver alle farver den samme andel. Brug reglen ved at flytte stoppene: lad den dominerende farve holde det meste af fladen, bland over i den sekundære henover en tredjedel, og lad først accenten komme ind ved en kant eller som et lille skær.
Hvornår du kan bøje eller bryde reglen
Bryd den, når
- Du arbejder i én nuance: et monokromt farveskema ligger tættere på 60-30-10 i lysstyrke end i nuance
- Designet mest er tekst på en neutral flade, hvor 90-10 er renere
- Et foto leverer sin egen farve, og din palet blot indrammer det
- Brandfarven skal dominere, som på en plakat i fuld brandrød
Hold fast i den, når
- Farverne begynder at konkurrere, og intet skiller sig ud
- Et team deler en palet og har brug for en regel at følge
- Du har tre eller flere stærke farver at balancere
- Knapper og nøgletal er ved at forsvinde
Tallene er omtrentlige. Hvidt rum tæller med. Neutrale toner som offwhite, kul og sand kan være dine 60 %, mens to egentlige farver deler resten. Det afgørende er rækkefølgen: én tydelig leder, én støtte og én sjælden accent. Når du skal vælge selve farverne, kan du læse sådan vælger du brandfarver og grundlæggende farveteori.
Spørgsmål, folk stiller
Hvad er 60-30-10-reglen?
Det er en rettesnor for farveproportioner: omkring 60 % af et design i en dominerende farve, 30 % i en sekundær farve og 10 % i en accentfarve.
Hvor kommer 60-30-10-reglen fra?
Det er en gammel tommelfingerregel fra indretning, hvor vægge, møbler og tilbehør helt naturligt får de tre andele.
Tæller hvid med i 60-30-10-reglen?
Ja. Neutrale toner som hvid, offwhite, sand eller kul udgør ofte de dominerende 60 % og efterlader de 30 % og 10 % til egentlige farver.
Hvilken farve skal de 10 % accent have?
Som regel din mest mættede farve, brugt på den ene ting, du vil have lagt mærke til først, som en knap, en pris eller en dato.
Hvordan bruger jeg 60-30-10-reglen i en gradient?
Flyt farvestoppene, så den dominerende farve dækker det meste af fladen, den sekundære blandes ind over omkring en tredjedel, og accenten kun optræder i et lille område eller ved en kant.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
