De korte versie
- De 60 30 10 regel zegt dat een evenwichtig ontwerp een dominante kleur gebruikt voor ongeveer 60% van de ruimte, een secundaire kleur voor ongeveer 30% en een accentkleur voor ongeveer 10%.
- De regel komt uit de interieurarchitectuur, waar muren, meubels en accessoires vanzelf in die drie rollen vallen.
- Op schermen is de 60% meestal de achtergrond, draagt de 30% vlakken, vormen of tekst, en gaat de 10% naar het ene ding waarvan je wilt dat mensen het zien of aantikken.
- In een kleurverloop bepaalt de regel hoeveel van het vlak elke kleur inneemt, en daarom hoort het accent in een klein gebied te zitten en niet in een volle band.
- De getallen zijn een startpunt: neutrale tinten kunnen als de 60% gelden, en veel sterke ontwerpen zitten dichter bij 70-25-5 of 90-10.
Op deze pagina
De 60 30 10 regel, meestal geschreven als 60-30-10, is een eenvoudige richtlijn voor kleurverhouding: gebruik een dominante kleur voor ongeveer 60% van een ontwerp, een secundaire kleur voor ongeveer 30% en een accentkleur voor de laatste 10%. Hij komt uit de interieurarchitectuur, waar muren, meubels en accessoires die rollen vanzelf krijgen. Hij werkt net zo goed voor posts op sociale media, dia’s, websites en merkpaletten, omdat hij voorkomt dat elke kleur om dezelfde aandacht strijdt.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Wat elk aandeel doet
De drie aandelen hebben elk hun eigen taak. De 60% bepaalt de sfeer en is meestal rustig: een achtergrond, een ondergrond, een muur. De 30% geeft structuur en contrast en draagt vlakken, vormen of grote tekst. De 10% is waar het oog eerst naartoe gaat, dus die hoort op het allerbelangrijkste: een knop, een prijs, een datum, een logo.
| Aandeel | Rol | Typische kleur | Waar het komt |
|---|---|---|---|
| 60% | Dominant | Rustig: een neutrale kleur, een lichte tint of een diep donker | Achtergronden, grote vlakken, paginaondergrond |
| 30% | Secundair | Contrasterend, maar niet luid | Vlakken, kaarten, grote tekst, beeldgebieden |
| 10% | Accent | De meest verzadigde kleur die je hebt | Knoppen, prijzen, sleutelwoorden, kleine vormen |
De 60-30-10 regel op een social post
Op een post is de dominante kleur de achtergrond, is de secundaire de kop of een vorm erachter, en is het accent één klein detail, zoals een datum, een prijs of één onderstreept woord. De veelgemaakte fout is het accent aan de hele kop geven. Dan schreeuwt 30% van de post en valt niets op, omdat alles opvalt.
Dominant vlak, secundaire tekst, en het accent bewaard voor de datumregel.
Dezelfde verhoudingen op een brede dia. De aandelen blijven kloppen, ook als de vorm verandert.
Toepassen op dia’s en websites
Stel bij dia’s de 60% één keer in, als achtergrond van elke dia, en houd die aan. Gebruik de 30% voor titels, grafieken en beeldkaders. Bewaar de 10% voor het ene getal of woord per dia dat het publiek moet onthouden. Presentatieachtergronden gaat verder in op ondergronden die niet met de inhoud concurreren.
Op een website zijn de paginaachtergrond en grote secties de 60%, vormen navigatie, kaarten, footers en lopende tekst de 30%, en gaat de 10% naar oproepen tot actie en links. Als je primaire knop dezelfde kleur heeft als je koppen, houdt de pagina geen accent over om mensen te sturen.
: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; }Schrijf voor een merk de aandelen in je huisstijlgids, naast de hexcodes. Een palet zonder verhoudingen nodigt elke ontwerper uit zijn lievelingskleur als achtergrond te kiezen, en binnen een maand lijkt het merk op drie merken.
De 60 30 10 regel in een kleurverloop
Kleurverlopen verstoren verhoudingen snel, omdat een gelijkmatige menging elke kleur hetzelfde aandeel geeft. Pas de regel toe door de kleurstops te verschuiven: laat de dominante kleur het grootste deel van het vlak houden, meng over een derde over naar de secundaire kleur, en laat het accent alleen aan een rand of als kleine gloed binnenkomen.
Wanneer je de regel buigt of breekt
Breek hem als
- Je in één tint werkt: een monochroom kleurenschema komt qua helderheid dichter bij 60-30-10 dan qua tint
- Het ontwerp vooral uit tekst op een neutrale kleur bestaat, waar 90-10 zuiverder is
- Een foto zijn eigen kleur levert en je palet die alleen omlijst
- De merkkleur moet domineren, zoals een poster in volledig merkrood
Houd hem aan als
- Kleuren met elkaar gaan concurreren en niets meer opvalt
- Een team een palet deelt en een regel nodig heeft om te volgen
- Je drie of meer sterke kleuren in balans moet brengen
- Knoppen en belangrijke getallen niet meer opvallen
De getallen zijn bij benadering. Witruimte telt mee. Neutrale kleuren zoals gebroken wit, antraciet en zand kunnen je 60% zijn, waarbij twee echte kleuren de rest delen. Waar het om gaat is de volgorde: één duidelijke leider, één ondersteuning, één zeldzaam accent. Voor het kiezen van de kleuren zelf, zie merkkleuren kiezen en de basis van kleurtheorie.
Vragen die mensen stellen
Wat is de 60 30 10 regel?
Het is een richtlijn voor kleurverhouding: ongeveer 60% van een ontwerp in een dominante kleur, 30% in een secundaire kleur en 10% in een accentkleur.
Waar komt de 60-30-10 regel vandaan?
Het is een oude vuistregel uit de interieurarchitectuur, waar muren, meubels en accessoires vanzelf de drie aandelen innemen.
Telt wit mee in de 60 30 10 regel?
Ja. Neutrale kleuren zoals wit, gebroken wit, zand of antraciet vormen vaak de dominante 60%, zodat de 30% en 10% overblijven voor echte kleuren.
Welke kleur moet het accent van 10% hebben?
Meestal je meest verzadigde kleur, gebruikt voor het ene ding dat je als eerste wilt laten opvallen, zoals een knop, een prijs of een datum.
Hoe gebruik ik de 60-30-10 regel in een kleurverloop?
Verschuif de kleurstops zodat de dominante kleur het grootste deel van het vlak beslaat, de secundaire kleur over ongeveer een derde meeloopt en het accent alleen in een klein gebied of aan een rand verschijnt.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
