De 60-30-10-regel
Dit is de handigste regel om kleuren te verdelen. Hij komt uit de interieurarchitectuur, maar werkt voor elk project.
- 60%: dominante kleur. Meestal een neutrale of zachte tint. Die bedekt achtergronden en grote vlakken.
- 30%: secundaire kleur. Die geeft persoonlijkheid. Gebruik haar voor blokken, menu's of meubels.
- 10%: accentkleur. De felste. Gebruik haar voor knoppen, iconen of details.
Bijvoorbeeld: gebroken wit voor 60%, marineblauw voor 30% en oranje voor 10%.
Je hoeft niet precies te meten. Het idee: één kleur leidt, één ondersteunt en één valt op.
De rol van neutrale kleuren
Neutrale kleuren zijn wit, zwart, grijs, beige, crème en lichte bruintinten. Ze passen bij bijna alles.
Ze geven de ogen rust en laten felle kleuren beter uitkomen. Een kleurenpalet zonder neutrale kleuren voelt meestal vermoeiend.
- Wit en gebroken wit: netheid en ruimte.
- Grijs: modern en ingetogen. Kies warme of koele grijstinten die passen bij de rest van het kleurenpalet.
- Beige en zand: warmte en natuurlijkheid.
- Zwart of bijna zwart: elegantie en contrast. Voor tekst is een heel donker grijs meestal prettiger dan puur zwart.
Combineren op temperatuur
Kleuren zijn warm (rood, oranje, geel) of koud (blauw, groen, paars). Er zijn drie eenvoudige manieren om ze te combineren:
- Alleen warme kleuren: gezellig en energiek. Ideaal voor restaurants of vriendelijke merken.
- Alleen koude kleuren: rustig en professioneel. Ideaal voor zorg, technologie of financiën.
- Koude basis met een warm accent: de meest veelzijdige optie. Het warme accent trekt de blik tegen een rustige achtergrond.
Wat meestal misgaat: veel felle warme en koude kleuren tegelijk, zonder dominante kleur.
Contrast voor tekst
Een mooie kleur heeft geen zin als je de tekst niet kunt lezen. Het contrast tussen tekst en achtergrond is essentieel voor leesbaarheid en toegankelijkheid.
- Gebruik donkere tekst op een lichte achtergrond of lichte tekst op een donkere achtergrond.
- Vermijd gele, lichtgroene of lichtgrijze tekst op wit.
- Leg geen verzadigde complementaire kleuren over elkaar, zoals rood op groen. Dat flikkert en vermoeit de ogen.
- De WCAG-richtlijnen vragen een contrastverhouding van minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst.
Je kunt elk kleurenpaar testen met onze contrast checker.
15 kleurcombinaties die altijd werken
Deze paren zijn een veilig startpunt. Gebruik ze als basis en voeg zo nodig een neutrale kleur of een accent toe.
- Marineblauw en crème: klassiek, serieus en goed leesbaar.
- Zwart en goud: luxe en elegantie.
- Blauw en oranje: complementair en vol energie.
- Dennengroen en beige: natuurlijk en rustig.
- Roze en antraciet: modern en evenwichtig.
- Geel en zwart: maximaal contrast, ideaal voor waarschuwingen.
- Bordeaux en zand: warm en verfijnd.
- Turquoise en koraal: fris en zomers.
- Paars en lichtlila: monochroom en creatief.
- Bruin en saliegroen: aards, ideaal voor natuurmerken.
- Grijs en perzik: zacht en vriendelijk.
- Petrolblauw en lichtgeel: rustig met een vleugje licht.
- Terracotta en gebroken wit: warm en mediterraan.
- Donker petrol en mosterdgeel: retro en met karakter.
- Wit en rood: direct, energiek en goed zichtbaar.
Veel meer ideeën met HEX-codes vind je op onze pagina met kleurcombinaties.
Welke kleuren passen bij welke kleur
Heb je al een hoofdkleur, dan geeft deze lijst je een snel startpunt:
- Rood: wit, zwart, grijs, marineblauw en beige. Voor iets gedurfds: roze of oranje.
- Oranje: marineblauw, turquoise, wit, crème en bruin.
- Geel: grijs, zwart, marineblauw en wit. Mosterdgeel past goed bij donkergroen.
- Groen: beige, wit, bruin, goud en zachtroze.
- Blauw: wit, oranje, grijs, geel en koraal. Marineblauw werkt bijna als een neutrale kleur.
- Paars: grijs, lila, goud, saliegroen en wit.
- Roze: grijs, marineblauw, olijfgroen, wit en goud.
- Bruin: crème, groen, petrolblauw, oranje en gebroken wit.
Het valt je vast op dat neutrale kleuren in bijna elke lijst staan. Ze zijn de veiligste partner voor een felle kleur.
Zo stel je je eigen combinatie samen
- Kies een hoofdkleur op basis van wat je wilt uitdrukken.
- Zoek in de kleurencirkel een secundaire kleur: een buurkleur voor iets rustigs, een tegenkleur voor iets opvallends.
- Voeg een of twee neutrale kleuren toe.
- Kies één accentkleur voor het belangrijkste.
- Test het kleurenpalet op een echt voorbeeld: een webpagina, een dia of een foto van de ruimte.
Twijfel je, gebruik dan minder kleuren. Drie tot vijf kleuren zijn genoeg voor bijna elk project.
Veelgemaakte fouten met kleuren
- Te veel kleuren. Het resultaat oogt druk en niets valt op.
- Alle kleuren evenveel gewicht geven. Zonder dominante kleur weet het oog niet waar het moet kijken.
- Het contrast vergeten. Tekst die je niet kunt lezen of knoppen die niemand ziet.
- Alles sterk verzadigen. Heel felle kleuren vermoeien. Combineer ze met zachtere tinten.
- De context negeren. Een kleur ziet er bij daglicht, op een scherm en op papier anders uit.
- Kopiëren zonder aanpassen. Een kleurenpalet dat werkt voor een merk past niet per se bij jouw doelgroep.
- Neutrale kleuren van verschillende temperatuur mengen. Een koel grijs naast een warm beige kan vuil ogen. Kies neutrale kleuren uit dezelfde familie.
- Niet op meerdere schermen testen. Een kleur kan op de computer prachtig zijn en op je telefoon flets. Controleer haar altijd op meer dan één apparaat.