Kortversjonen
- 60-30-10-regelen sier at et balansert design bruker en dominerende farge på omtrent 60 % av flaten, en sekundær farge på omtrent 30 % og en aksentfarge på omtrent 10 %.
- Regelen kommer fra interiørdesign, der vegger, møbler og tilbehør av seg selv faller inn i de tre rollene.
- På skjermer er de 60 % som regel bakgrunnen, de 30 % bærer paneler, former eller tekst, og de 10 % går til det ene du vil at folk skal legge merke til eller trykke på.
- I en gradient avgjør regelen hvor stor del av flaten hver farge får, og derfor bør aksenten dukke opp i et lite område i stedet for et helt bånd.
- Tallene er et utgangspunkt: nøytrale farger kan telle som de 60 %, og mange sterke design ligger nærmere 70-25-5 eller 90-10.
På denne siden
60-30-10-regelen er en enkel rettesnor for fargeproporsjoner: bruk en dominerende farge på omtrent 60 % av et design, en sekundær farge på omtrent 30 % og en aksent på de siste 10 %. Den kommer fra interiørdesign, der vegger, møbler og tilbehør faller inn i disse rollene av seg selv. Den fungerer like godt for innlegg i sosiale medier, lysbilder, nettsider og merkevarepaletter, fordi den hindrer at alle fargene konkurrerer om den samme oppmerksomheten.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Hva hver andel gjør
De tre andelene har ulike oppgaver. De 60 % setter stemningen og er som regel rolige: en bakgrunn, et underlag, en vegg. De 30 % gir struktur og kontrast, og bærer paneler, former eller stor tekst. De 10 % er der blikket går først, så de hører hjemme på det aller viktigste: en knapp, en pris, en dato, en logo.
| Andel | Rolle | Typisk farge | Hvor den brukes |
|---|---|---|---|
| 60 % | Dominerende | Dempet: en nøytral, en lys tone eller en dyp mørk | Bakgrunner, store flater, sidens underlag |
| 30 % | Sekundær | Kontrasterende, men ikke høylytt | Paneler, kort, stor tekst, bildeflater |
| 10 % | Aksent | Den mest mettede fargen du har | Knapper, priser, nøkkelord, små former |
60-30-10-regelen i et innlegg for sosiale medier
I et innlegg er den dominerende fargen bakgrunnen, den sekundære er overskriften eller en form bak den, og aksenten er én liten detalj som en dato, en pris eller ett understreket ord. Den vanligste feilen er å gi hele overskriften aksentfargen. Da roper 30 % av innlegget, og ingenting skiller seg ut fordi alt gjør det.
Dominerende flate, sekundær tekst, og aksenten spart til datolinjen.
De samme proporsjonene på et bredt lysbilde. Andelene holder selv om formen endres.
Slik bruker du den i lysbilder og på nettsider
I lysbilder setter du de 60 % én gang, som bakgrunn på alle lysbildene, og holder deg til den. Bruk de 30 % til titler, diagrammer og bilderammer. Spar de 10 % til det ene tallet eller ordet per lysbilde som publikum må huske. Bakgrunner til presentasjoner går dypere inn på underlag som ikke kjemper mot innholdet.
På en nettside er sidens bakgrunn og de store seksjonene de 60 %, navigasjon, kort, bunnfelt og brødtekst er de 30 %, og de 10 % går til handlingsknapper og lenker. Hvis primærknappen har samme farge som overskriftene, har siden ingen aksent igjen til å veilede 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; }For en merkevare skriver du andelene inn i merkevarens stilguide ved siden av hex-kodene. En palett uten proporsjoner inviterer alle designere til å velge sin favorittfarge til bakgrunnen, og innen en måned ser merkevaren ut som tre ulike merkevarer.
60-30-10-regelen i en gradient
Gradienter ødelegger lett proporsjonene, fordi en jevn blanding gir hver farge like stor andel. Bruk regelen ved å flytte fargestoppene: la den dominerende fargen holde det meste av flaten, tone over i den sekundære over omtrent en tredjedel, og slipp aksenten inn bare ved en kant eller som en liten glød.
Når du bør tøye eller bryte regelen
Bryt den når
- Du jobber i én nyanse: et monokromatisk fargevalg ligger nærmere 60-30-10 i lyshet enn i nyanse
- Designet mest er tekst på en nøytral flate, der 90-10 er renere
- Et bilde leverer sin egen farge og paletten din bare rammer det inn
- Merkevarefargen må dominere, for eksempel en plakat i full merkevarerød
Hold deg til den når
- Fargene begynner å konkurrere og ingenting skiller seg ut
- Et team deler en palett og trenger en regel å følge
- Du har tre eller flere sterke farger å balansere
- Knapper og nøkkeltall forsvinner
Tallene er omtrentlige. Tomrom teller med. Nøytrale farger som off-white, koksgrå og sand kan være dine 60 %, med to ekte farger som deler resten. Det som betyr noe, er rekkefølgen: én tydelig leder, én støtte, én sjelden aksent. For selve fargevalget, se slik velger du merkevarefarger og grunnleggende fargelære.
Spørsmål folk stiller
Hva er 60-30-10-regelen?
Det er en rettesnor for fargeproporsjoner: omtrent 60 % av et design i en dominerende farge, 30 % i en sekundær farge og 10 % i en aksentfarge.
Hvor kommer 60-30-10-regelen fra?
Det er en gammel tommelfingerregel i interiørdesign, der vegger, møbler og tilbehør av seg selv tar de tre andelene.
Teller hvitt med i 60-30-10-regelen?
Ja. Nøytrale farger som hvit, off-white, sand eller koksgrå utgjør ofte de dominerende 60 %, slik at de 30 % og 10 % blir igjen til ekte farger.
Hvilken farge bør aksenten på 10 % ha?
Som regel den mest mettede fargen din, brukt på det ene du vil at folk skal se først, for eksempel en knapp, en pris eller en dato.
Hvordan bruker jeg 60-30-10-regelen i en gradient?
Flytt fargestoppene slik at den dominerende fargen dekker det meste av flaten, den sekundære tones inn over omtrent en tredjedel, og aksenten bare vises i et lite område eller ved en kant.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
