Grafisch ontwerp Geplaatst op: 29 oktober 2020, aangepast op: 6 juni 2024
Hoe maak je een kleurenpalet voor je website? Of hoe pas je een kleurenschema toe op je ontwerp? De 60/30/10 regel helpt je hierbij.
Nu je weet wat de betekenis is van kleuren wordt het tijd om te leren hoe je kleuren toepast op je eigen ontwerp. Veel ontwerpers maken gebruik van een kleurenpalet: een select aantal kleuren die gebruikt worden in hun ontwerp. Door alleen deze, zorgvuldig gekozen, kleuren te gebruiken ontstaat een harmonieus beeld. Maar een kleurenpalet maken is een vak apart. Er zijn namelijk verschillende soorten kleurenpaletten, elk met hun eigen uitstraling.
De kleurencirkel van Itten is perfect om nieuwe kleurenschema's mee te maken. Lees ons vorige artikel Kleurenleer voor designers als je meer wilt weten over het kleurenwiel van Itten.
Bij het combineren van kleuren pak je kleuren die naast elkaar of juist tegenover elkaar liggen. Door onderstaande regels te volgen krijg je al snel een aantal kleuren. Deze kun je gemakkelijk aanpassen naar je eigen smaak.
Er zijn verschillende kleurenpaletten, met elk hun eigen eigenschappen en regels. Ook hebben kleurenschema's een eigen uitstraling. Ga je voor een gewaagd ontwerp? Kies dan een kleurenpalet waarbij de kleuren ver uit elkaar liggen op de kleurencirkel van Itten. Kies kleuren die dicht bij elkaar liggen voor een rustigere uitstraling.
Bij monochrome kleuren kies je verschillende tinten van dezelfde kleur. Je kunt bijvoorbeeld blauw met marine- en lichtblauw combineren. Hiermee krijg je een rustig resultaat. Je kunt je hoofdkleur mengen met zwart, grijs of wit om lichtere of donkerdere tinten te krijgen.
Analoge kleuren zijn kleuren die naast elkaar liggen op de kleurencirkel. Een voorbeeld hiervan zijn geel, oranje en rood. Doordat de kleuren dicht op elkaar liggen, krijg je een kalm resultaat.
Een complementair kleurenpalet bestaat uit kleuren die elkaar complementeren: oftewel tegenover elkaar liggen in de kleurencirkel. Voorbeelden hiervan zijn blauw en oranje of geel en paars. Doordat ze het tegenovergestelde van elkaar zijn knallen de kleuren maximaal. Dit geeft je ontwerp een opvallend resultaat.
Bij een split-complementair kleurenpalet kies je twee kleuren die naast elkaar liggen en één kleur die daar tegenover ligt. Een voorbeeld van een split-complementaire kleurenpalet zijn bijvoorbeeld rood met blauw en groen. Ook hierbij krijg je door het contrast een opvallend resultaat, maar de twee kleuren die in de kleurencirkel bij elkaar liggen brengen er balans in.
Triadische kleuren liggen even ver uit elkaar. Net zoals de complementaire kleuren kies je hier kleuren die uit elkaar liggen, maar nu zorg je ervoor dat de afstand tussen te kleuren gelijk is. Denk aan de combinatie rood, geel en blauw, of paars, oranje en groen. Ook deze kleuren vallen op, maar passen niet altijd goed bij elkaar. Door neutrale kleuren zoals zwart, wit of grijs toe te voegen wordt het opvallende effect minder en ontstaat er meer balans.
Hierbij neem je twee kleuren die vlakbij elkaar liggen en kies je hier weer twee kleuren die er tegenover liggen (de complementaire kleuren). Voorbeelden zijn oranje en rood met blauw en groen of geel en groen met rood en paars. Tetradische kleurenpaletten zijn een combinatie van de complementaire en analoge kleurenpaletten, en hebben dus het beste van beide eigenschappen. Deze kleurenpaletten vallen op én zien er harmonieus uit.
Hieronder een aantal voorbeelden van kleurenschema's. Kan jij raden welke soort paletten het zijn?
Deze verschillende tinten rood en oranje liggen naast elkaar in het kleurenwiel van Itten. Dit maakt het een analoog kleurenpalet. Het wit maakt het geheel net iets neutraler.
De kleuren blauw, groen, oranje en rood zijn een tetradisch kleurenpalet. Het rood is in dit geval vervangen door paars.
De kleuren zijn gemengd met wat grijs, waardoor ze minder fel ogen en beter bij elkaar passen.
Deze tinten roze en donkerbruin zijn rood en oranje gemengd met wit en grijs. De kleur groen ligt tegenover deze kleuren en dat maakt dit kleurenpalet split-complementair.
Ook hier is wit toegevoegd om de felle kleuren iets te neutraliseren. Ook het bruin helpt hierbij door zijn fletse maar donkere tint.
Oranje en blauw: dit is een klassiek voorbeeld van een split-complementair kleurenpalet. Wel zijn er extra donkere en één lichte tint toegevoegd om meer kleuren te krijgen.
Deze zachte tinten oranje, rood en paars liggen dicht op elkaar op de kleurencirkel. Door ze te mengen met grijs passen ze zelfs nóg beter bij elkaar.
De 60/30/10 regel komt uit de wereld van interieurstyling, maar wordt ook veel gebruikt in grafisch ontwerp. Het houdt in dat je kleuren in een bepaalde verhouding gebruikt, zodat ze samen mooi in balans zijn. De getallen staan voor de verhoudingen waarin de kleuren worden gebruikt.
De eerste kleur, die ongeveer 60% inneemt van je ontwerp, is vaak een neutrale kleur. Deze wordt bijvoorbeeld als achtergrond gebruikt. Wit of lichtgrijs zijn hiervoor ideaal. De tweede kleur, die ongeveer 30% inneemt, is een kleur die wat meer opvalt. Deze moet goed passen bij de neutrale kleur en voldoende contrast opleveren. De overige 10% is de accentkleur. Hiermee kan je echt uitpakken en een felle kleur kiezen.
Deze regel is een richtlijn en er kan dus vanaf geweken worden. Voeg gerust nog een extra accentkleur toe of speel met de percentages. Ook is het prima om extra tinten toe te voegen zodat je meer mogelijkheden hebt. Vooral neutrale kleuren (bijvoorbeeld verschillende tinten grijs) lenen hier zich goed voor.
Ook kan de 60/30/10 regel je helpen met de compositie. Ben je de balans kwijt in je ontwerp? Je kunt elementen groter of juist kleiner maken om een rustiger beeld te krijgen. Of extra elementen toevoegen of weglaten.
Theorie klinkt leuk, maar wordt pas duidelijk met wat voorbeelden. Hieronder een aantal mooie voorbeelden van de 60/30/10 regel.
Lichtoranje wordt vooral als achtergrondkleur gebruikt. Het zalmoranje past goed bij het donkere grijs wat vooral als tekstkleur dient. De knop bovenaan in peachy orange valt op doordat deze spaarzaam is gebruikt. De warme kleuren komen terug in de afbeelding en past hierdoor perfect bij de de rest van de website.
In deze illustratie worden knalblauw, zwart en okergeel gebruikt. In dit voorbeeld zie je dat blauw als primaire kleur is gebruikt en als accentkleur een contrasterend okergeel. Door deze complementaire kleuren ontstaat zo een opvallend geheel.
De website van Coolblue maakt gebruik van wit, blauw en oranje. Het wit en blauw geven de website een rustige uitstraling, terwijl het oranje opvalt en het geheel opfleurt. Blauw en oranje zijn complementaire kleuren van elkaar. Naast deze drie kleuren worden zwart en grijs gebruikt voor tekst en randjes en wordt lichtblauw als achtergrond voor de navigatie gebruikt. Omdat dit verschillende tinten zijn van de hoofdkleuren passen de kleuren mooi bij het geheel.
Nu je een aantal kleuren hebt geselecteerd kun je de kleuren toepassen op jouw ontwerp. Probeer hierbij de 60/30/10 regel te gebruiken.
Heb je niet genoeg kleuren om al je elementen te voorzien? Voeg dan extra (neutrale) kleuren toe aan je kleurenpalet. Kleuren zoals lichtgrijs, zwart of wit werken goed bij bijna elke kleur.
Wil je meer kleurenpaletten zien? Bekijk dan ons artikel websites met prachtige kleurenpaletten of blader door al onze kleurenpaletten.
