# De 60 30 10 regel: een kleurverhouding voor ontwerpen en merken

[Canonical HTML page](https://gradiently.design/nl/guide/60-30-10-rule)

De meeste paletten falen op verhouding, niet op keuze. Drie getallen vertellen hoeveel je van elke kleur gebruikt, en ze werken net zo goed op een telefoonscherm als in de woonkamers waar ze vandaan komen.

## The short version

- 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.

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.

60 zand, 30 marineblauw, 10 koraal: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

De regel als balk getekend. Het accent is klein, en juist daarom zie je het als eerste.

## 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 |

Het accent werkt omdat het zeldzaam is. Verdubbel het en het is geen accent meer.

- 60 Zand: #f3efe6
- 30 Havenblauw: #1f3a5f
- 10 Koraal: #e76f51

Een palet met de verhoudingen erbij. Als je het aandeel naast elke kleur noteert, gebruikt een team het koraal niet overal.

## 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.

Een staande eventpost voor een printmarkt met een rustige achtergrond, een sterke kop en een klein accent op de tijd

Dominant vlak, secundaire tekst, en het accent bewaard voor de datumregel.

Hetzelfde printmarktontwerp als brede 16 bij 9 dia, met dezelfde kleurbalans

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](https://gradiently.design/nl/guide/presentation-backgrounds) 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.

```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; }
```

Als je kleuren benoemt naar rol in plaats van naar tint, zijn de verhoudingen lastig te doorbreken. Donkere tekst op de koraalkleurige knop haalt ongeveer 6:1.

> **De knijptest** Knijp je ogen halfdicht bij je afgewerkte ontwerp tot de details vervagen. Je zou één grote kleur moeten zien, een duidelijke tweede kleur en een klein helder punt. Zie je drie even grote blokken, of zit het accent verspreid over de hele opmaak, schuif de aandelen dan terug richting 60, 30 en 10.

Schrijf voor een merk de aandelen in je [huisstijlgids](https://gradiently.design/nl/guide/brand-style-guide), 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.

- Gelijke derden: geen dominante kleur: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: marine leidt, koraal glinstert: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Donker: inkt, leisteen, goud: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Zacht: salie, crème, pruim: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

De eerste menging geeft drie kleuren gelijk gewicht en voelt druk. De tweede houdt hetzelfde idee in verhouding. De laatste twee zijn kant-en-klare 60-30-10-schema’s.

## Wanneer je de regel buigt of breekt

### Breek hem als

- Je in één tint werkt: een [monochroom kleurenschema](https://gradiently.design/nl/guide/monochromatic-color-scheme) 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](https://gradiently.design/nl/guide/how-to-choose-brand-colors) en [de basis van kleurtheorie](https://gradiently.design/nl/guide/color-theory-basics).

## FAQ

### 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.