Kleurenwiel online

Sir Isaac Newton heeft het kleurenwiel uitgevonden in 1666, waarmee hij de basis legde voor de moderne kleurentheorie. Zijn interesse in licht leidde ertoe dat hij experimenteerde door wit licht door een prisma te laten schijnen, waardoor het in een kleurenpallet werd opgesplitst. Dit inspireerde Newton om deze kleuren in een cirkelvorm te rangschikken, waarmee hij de eerste kleurencirkel creëerde. Zijn slimme diagram liet zien hoe kleuren zich tot elkaar verhouden en creëerde een systematische manier om te begrijpen hoe ze elkaar beïnvloeden en mengen. De kleurencirkel van Sir Isaac Newton is nog altijd een belangrijk hulpmiddel in de wetenschap en kunst.

Een standaard kleurenwiel bevat 12 kleuren: drie basiskleuren (rood, geel, blauw, ook bekend als primaire kleuren), drie secundaire kleuren (oranje, groen, violet) en zes tertiaire kleuren (rood-oranje, geel-oranje, geel-groen, blauw-groen, blauw-violet, rood-violet).

Geavanceerde kleurenwielen omvatten een breder spectrum van tinten, schakeringen en nuances voor een extra gedetailleerd kleurontwerp. Dit is vooral nuttig voor een digitaal en UI-ontwerp. Dit geeft ontwerpers meer controle over hun kleurkeuze, waardoor het gemakkelijker wordt om complexe en verfijnde kleurthema’s en paletten te maken.

Een kleurenwiel is een simpele en effectieve manier om een overtuigend en samenhangend kleurenpalet te creëren voor elk project. Gebruik de kleurencirkel om kleuren te kiezen, kleuren te mengen en snel een kleurenpalet samen te stellen. Dat doe je als volgt:

Stap 1: Kies een basiskleur.

Gebruik de kleurenkiezer om een basiskleur in het wiel te selecteren. Deze kleur vormt de basis voor je palet, bepaalt de uitstraling en sfeer van je ontwerp en beïnvloedt de keuze van aanvullende kleuren.

Stap 2: Kies een kleurenschema.

Kies een kleurenschema. Elk schema zorgt voor een andere visuele uitstraling:

• Complementair biedt maximaal contrast door kleuren te gebruiken die precies tegenover elkaar liggen.
• Triadisch zorgt voor een levendige, maar toch gebalanceerde uitstraling door kleuren te gebruiken die in een driehoekige formatie staan.
• Analoog zorgt voor een harmonieus effect door kleuren te gebruiken die naast elkaar liggen.
• Gesplitst complementair zorgt voor een uitstraling met veel contrast met minder spanning, door de basiskleur te combineren met twee aangrenzende complementaire kleuren.
• Vierkant zorgt voor meer diversiteit met vier kleuren die gelijkmatig verdeeld zijn over het wiel.
• Monochromatisch maakt gebruik van de kracht van licht (kleuren) en donker (schaduwen) om subtiele overgangen en opvallende contrasten te creëren, gebaseerd op de basiskleur.

Stap 3: Pas toe op je ontwerp.

Als je het beste kleurenpalet voor je project hebt gevonden, pas je het toe op je ontwerp om de gewenste visuele impact te bereiken.

De kleurentheorie biedt ontwerpers een kader om het perfecte kleurenschema te creëren en het gewenste effect over te brengen, zoals elegantie met diepe paarstinten en goud, of een gevoel van rust met zachte blauw- en groentinten. Of je nu de aandacht wilt trekken met combinaties met veel contrast of een harmonieuze sfeer wilt creëren; inzicht in de kleurentheorie is essentieel. Dit zijn enkele belangrijke concepten:

Probeer complementaire, analoge, triadische en tetradische schema’s in het kleurenwiel en exporteer je kleurenpalet naar Figma.

Wat zijn de primaire kleuren (RGB)

Primaire kleuren in het RGB-kleurenmodel zijn rood, geel en blauw. Deze drie kleuren vormen de basis van het kleurenwiel en kunnen in verschillende verhoudingen worden gemengd om alle andere kleuren te maken.

Wat zijn secundaire kleuren?

Secundaire kleuren bevinden zich tussen primaire kleuren op het kleurenwiel en ontstaan door het mengen van twee primaire tinten. Als je bijvoorbeeld rood en blauw mengt, krijg je paars, en de combinatie van rood en geel levert oranje op. Als je wilt weten hoe groen wordt gemaakt, kijk je voor het antwoord naar de aangrenzende primaire kleuren: geel en blauw.

Wat zijn de tertiaire kleuren?

De rest van het wiel bestaat uit tertiaire kleuren, of tussenkleuren. Je krijgt deze kleuren wanneer je een primaire en secundaire kleur mengt. Als je bijvoorbeeld rood en oranje mengt, krijg je rood-oranje. Deze tint vult de ontbrekende ruimte tussen de twee kleuren op. Met een scrolbaar kleurenwiel kun je precies de rood-oranjetint kiezen die je wilt, op basis van je positie in het wiel. Je kunt ook blauw-groen, blauw-violet, rood-oranje, rood-violet, geel-oranje en geel-groen mengen om unieke tertiaire kleuren te creëren. Deze gedetailleerde mogelijkheid om kleuren te kiezen, helpt productontwerpers de exacte tinten en accentkleuren te vinden die ze zoeken.

Wat zijn de zeven kleurenschema's?

Kleurenschema's zijn strategische kleurencombinaties die helpen een visueel evenwicht te creëren. Deze schema's maken gebruik van principes uit de kleurentheorie om ontwerpen te maken die esthetisch aantrekkelijk zijn. Er zijn zeven veelgebruikte typen kleurenschema's:

Complementaire kleuren

Complementaire kleuren combineren kleuren van tegenovergestelde zijden van het kleurenwiel om veel contrast te creëren. Je vindt complementaire kleuren door een kleur te kiezen en het kleurenwiel vervolgens 180° te draaien. Sommige complementaire kleurenschema's zijn bekend en populair, zoals rood en groen. Dit kunnen krachtige kleurenschema's zijn als je zowel warme als koele kleuren in je ontwerp wilt gebruiken.

Complementaire kleuren voor #693EFE

Gesplitste complementaire kleuren

Gesplitste complementaire kleuren zijn kleurencombinaties waarbij je een basiskleur combineert met de twee aangrenzende tertiaire kleuren aan weerszijden van de basiskleur. Dit levert een subtieler palet van drie kleuren op.

Gesplitste complementaire kleuren voor #693EFE

Monochromatische kleuren

Monochromatische kleuren zijn het makkelijkst uit te leggen, omdat het gewoon een lichtere en donkerdere versie zijn van je primaire kleur. Met een monochromatisch kleurenschema hoef je minder complexe beslissingen te nemen rond het gebruik van verschillende contrasterende kleuren. Het biedt designers de mogelijkheid om kleur op een subtiele en doeltreffende manier te gebruiken. Om een monochromatisch kleurenpalet samen te stellen, pas je de lichtere en donkerdere versies in gelijke mate aan op basis van je primaire kleur.

Monochromatische kleuren voor #693EFE

Analoog

Analoge kleuren zijn groepen van drie kleuren die naast elkaar liggen in het kleurenwiel. Hiermee creëer je een zachter, natuurlijker kleurenpalet. In de natuur vind je immers veel kleurtinten die dicht bij elkaar liggen. Denk maar aan de bladeren van een boom, of aan de subtiele verschillen in de kleur van de oceaan. Een analoog kleurenschema is heel harmonieus en kan helpen om verschillende elementen in een ontwerp met elkaar te verbinden.

Analoge kleuren voor #693EFE

Triadisch

Een triadisch kleurenschema bestaat uit drie kleuren die in gelijke mate contrasteren. De punten zijn gelijkmatig verdeeld over de kleurencirkel en vormen een gelijkzijdige driehoek. Bij ontwerpen met een triadisch kleurenschema kun je het beste één primaire kleur kiezen en de andere twee als accenten gebruiken. Triadische kleurenschema's zorgen voor een opvallende en speelse uitstraling.

Triadische kleuren voor #693EFE

Tetradisch (dubbel complementair)

Wat hebben Google en Microsoft gemeen? Ze gebruiken allebei tetradische kleurenpaletten in hun logo's. Tetradisch betekent dat iets betrekking heeft op een groep van vier, dus in dit geval gebruiken we het kleurenwiel om vier kleuren te selecteren die een rechthoek vormen. Deze kleuren omvatten twee sets complementaire kleuren, waardoor een levendig en energiek kleurenpalet ontstaat. Een tetradisch kleurenschema wordt soms een 'dubbel complementair' schema genoemd.

Tetradische kleuren voor #693EFE

Vierkant

Net als bij een tetradisch schema worden in een vierkant kleurenschema vier kleuren gebruikt, maar in dit geval zijn ze gelijkmatig verdeeld over het kleurenwiel en vormen ze een vierkant. Dit zorgt voor een evenwichtigere uitstraling vergeleken met de hoge mate van contrast van tetradische schema's. Net als bij tetradische kleurenschema's kun je het beste één dominante kleur kiezen en de andere als accenten gebruiken.

Warme kleuren versus koele kleuren

In het kleurenwiel wordt een onderscheid gemaakt tussen warme en koele tinten. Warme kleuren, zoals rood, oranje en geel, hebben een intense uitstraling. Koele tinten, zoals paars, blauw en groen, roepen gevoelens van kalmte en ontspanning op. Is het je weleens opgevallen dat de meditatie-app Calm voornamelijk de kleur blauw gebruikt? Dit is een bewuste keuze om een gevoel van kalmte op te roepen.

Een kleurmodel is een systeem om kleuren weer te geven met numerieke waarden. Op deze pagina worden de volgende vier kleurmodellen gebruikt:

1. Rood, groen en blauw (RGB)
2. Cyaan, magenta, geel en zwart (CMYK)
3. Tinten, verzadiging en helderheid (HSL)
4. Hexadecimale codes

Rood, groen, blauw (RGB)

Het RGB-kleurmodel (rood, groen, blauw) is de basis voor elk ontwerp dat op een scherm wordt weergegeven. Dit kleurmodel is gebaseerd op de menselijke waarneming van kleuren en hoe onze ogen met licht omgaan. Deze 'additieve kleuren' kunnen worden gemengd tot het palet van kleuren dat je elke dag op je scherm ziet.

Cyaan, magenta, geel en zwart (CMYK)

Het CMYK-model vormt de basis voor alle ontwerpen voor drukwerk. Deze 'subtractieve kleuren' absorberen golflengten van licht die beter overeenkomen met de pigmenten die in de echte wereld voorkomen.

• Cyaan (C):cyaan is een blauw-groene kleur. Wanneer cyaankleurige inkt op een oppervlak wordt aangebracht, absorbeert het rood licht, waardoor het blauw-groen lijkt voor het menselijk oog.
• Magenta (M):magenta is een paars-rode kleur. Deze kleur absorbeert groen licht, waardoor we een rood-paarse tint waarnemen.
• Geel (Y):geel absorbeert blauw licht, wat resulteert in een gelige kleur bij het afdrukken.
• Zwart (K): de 'K' in CMYK staat voor 'Key', wat in het Engels verwijst naar de zwarte component. Zwarte inkt wordt gebruikt om de diepte en het contrast van afbeeldingen en tekst te versterken. Daarnaast helpt het gebruik van zwarte inkt te voorkomen dat kleuren vervagen, iets wat kan gebeuren als je zwart probeert te maken door kleuren te mengen.

Tint, verzadiging en helderheid

Tint verwijst naar de kleuren in het kleurenwiel. Deze vormen een spectrum in een cirkel van 360°. Als je deze cirkel rondgaat, kom je verschillende kleuren tegen.

• Kleurtint: het begrip 'tint' is moeilijk uit te leggen, maar in feite verwijst het naar de kleuren die je ziet in het kleurenwiel. Het kleurenwiel is een cirkel van 360° en je komt verschillende tinten tegen als je de cirkel rondgaat.
• Verzadiging: de levendigheid of intensiteit van een tint, ook wel 'verzadiging' genoemd, verwijst naar de rijkdom en zuiverheid ervan.Aan de buitenkant van het kleurenwiel zie je tinten met volledige verzadiging. Richting het midden van de cirkel wordt de kleur minder intens. Om de intensiteit van tinten te verlagen, mengen we ze met zwart en wit (grijs).
• Helderheid: de helderheid bepaalt hoeveel zwart of wit we met een kleur mengen. Je kunt pastelkleuren krijgen door meer wit toe te voegen, en een dieper, donkerder palet door meer zwart toe te voegen.

Schakeringen en tinten voor #693EFE

Schaduwen

Tinten

Hexadecimale codes

Hexadecimale (vaak verkeerd gespeld als 'hexidecimale') codes, of hex-codes, geven je computer aan hoeveel rood, groen en blauw gemengd moeten worden om de kleur van een pixel op je scherm te creëren.

Elke pixel op je scherm bestaat uit drie kleurelementen die rood, groen en blauw licht uitstralen. Deze kleurelementen (subpixels genoemd) zijn zo klein, dat ze door het menselijk oog als één enkele kleur worden waargenomen.

Door verschillende hoeveelheden rood, groen en blauw licht te mengen, kan elke pixel tot 16 miljoen kleuren weergeven. En dat is meer dan wat het menselijk oog kan waarnemen.

Elke pixel kan 256 rode waarden, 256 groene waarden en 256 blauwe waarden mengen om 16 miljoen kleurmogelijkheden te creëren. (256 x 256 x 256 is meer dan 16 miljoen.) Computers sturen deze waarden naar elke pixel met behulp van binaire code, een taal die bestaat uit 1-en en 0-en. Een rode waarde van 200 zou bijvoorbeeld worden weergegeven als 11001000 in binaire code. Omdat binaire code onbegrijpelijk is voor mensen, wordt het hexadecimale systeem gebruikt als leesbaar alternatief.

Hoe werkt een hex-code?

Een hex-code bestaat uit drie waarden: één voor rood, groen en blauw, waarbij elke waarde wordt weergegeven door twee cijfers Bijvoorbeeld: #F234A2 bestaat uit:

• rood: F2
• groen: 34
• blauw: A2

Hoe zit het met de letters? In tegenstelling tot ons gebruikelijke decimale systeem, wordt bij hexadecimale telling gebruikgemaakt van een systeem met het grondtal 16. Het gaat van 0 tot 9, en om getallen van 10 tot 15 weer te geven, gebruikt het A tot F.

Hoe converteer je tussen hex-codes en RGB

Omdat hex-codes en HSL-waarden slechts verschillende manieren zijn om het RGB-kleurenmodel weer te geven, kun je deze waarden in elkaar omzetten. Het omzetten van een hex-code naar een RGB-waarde is niet iets dat je vaak met de hand doet, maar er is wel een snelle manier voor. Voor elk van de drie waarden:

• Neem het eerste cijfer (of de eerste letter) en vermenigvuldig het met 16
• Voeg het tweede getal (of de tweede letter) toe

Voor #E234A2 is de eerste waarde E2. Het vertegenwoordigt het getal 226 ( 14 × 16 + 2 ). Dit getal is de RGB-waarde voor de kleur rood. En #E234A2 heeft de volgende RGB-waarden:

• rood: 226
• groen: 49
• blauw: 152

(Je kunt ook hex-codes of RGB-waarden omzetten naar HSL-waarden, maar de berekeningen worden dan iets ingewikkelder!)

Kleurprofielen in digitaal ontwerp: sRGB en P3

Verschillende apparaten, schermen, browsers en apps maken gebruik van verschillende technologieën voor kleurweergave, wat kan leiden tot visuele verschillen tussen apparaten. Als je ontwerpt voor digitale platforms is het belangrijk om te werken met kleurprofielen, omdat die een consistente standaard bieden voor de definitie en weergave van kleuren op basis van een bepaald scherm.

Kleurprofielen, zoals sRGB en P3, zorgen bij digitaal ontwerp voor een consistente kleurweergave op verschillende apparaten. sRGB is al tientallen jaren de standaard voor contentmakers en webdesigners. Deze zorgt voor visuele consistentie op de meeste consumentenapparaten. Display P3, vaak afgekort als P3, kan een kleurenspectrum levendiger weergeven, waarbij 49% meer onderscheidbare kleuren worden getoond dan sRGB. Het gebruik van P3 op apparaten zoals smartphones of laptops die voor sRGB zijn ontworpen, kan leiden tot een hoger energieverbruik, omdat het apparaat harder moet werken om het uitgebreide kleurbereik weer te geven. Als je ontwerpt voor platforms zoals iOS of HD-/retina-schermen, is Display P3 de beste keuze, maar niet alle apps en software ondersteunen het bredere kleurbereik volledig.

Lees hier hoe Figma P3-kleurprofielen ondersteunt.

WCAG en kleurentoegankelijkheid

In 1999 werd de eerste versie van de Web Content Accessibility Guidelines (WCAG) gepubliceerd door het World Wide Web Consortium (W3C). Dit technische document zorgt ervoor dat webcontent voor alle gebruikers toegankelijk is. De aanbevelingen van het W3C, die worden erkend als wereldwijde norm voor webtoegankelijkheid, hebben een aanzienlijke invloed op de wereld van webdevelopment en digitaal design. De organisatie publiceert doorlopende updates om technologische vooruitgangen en opkomende toegankelijkheidsbehoeften te weerspiegelen.

De huidige versie, WCAG 2.1, breidt de richtlijnen voor webtoegankelijkheid uit door rekening te houden met een breder scala aan beperkingen, waaronder cognitieve beperkingen en het gebruik van mobiele apparaten, waardoor een meer inclusieve webervaring ontstaat. Een belangrijk aspect dat in de richtlijnen aan bod komt, is visuele toegankelijkheid, met name het belang van contrast in kleurontwerp. Een goed contrast zorgt ervoor dat tekst en interactieve elementen duidelijk zichtbaar zijn tegen de achtergrondkleuren, wat essentieel is voor gebruikers met visuele beperkingen, zoals kleurenblindheid of slechtziendheid.

In de WCAG-aanbevelingen worden minimale contrastverhoudingen gespecificeerd voor tekst en afbeeldingen met tekst om ervoor te zorgen dat alle gebruikers toegang hebben tot informatie, ongeacht hun visuele capaciteiten. Voor normale tekst wordt bijvoorbeeld een minimale contrastverhouding van 4,5:1 aanbevolen. Grotere tekst moet een verhouding hebben van ten minste 3:1.

WCAG 3.0 is momenteel in ontwikkeling en wordt waarschijnlijk nog uitgebreider. Naast andere verbeteringen worden er ook specifiekere richtlijnen voor kleurcontrast verwacht.

Meer informatie over WCAG 2.1

Toegankelijkheid voor #693EFE

Kleursimulaties voor #693EFE

Protanopia

Deuteranopia

Tritanopia

Achromatopsie