edubun
Nederlands
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Home›Kleur en vormgeving

Kleurentheorie

Elke schermkleur bestaat uit drie getallen. Je bouwt in deze cursus de RGB-kubus en HSL-cilinder in 3D, ziet waar complementaire kleuren en triades op de kleurencirkel liggen, mengt licht en inkt en berekent de WCAG-contrastverhouding die bepaalt of tekst leesbaar is.

Voortgang

Over deze cursus

In de jaren 1660 begon Isaac Newton in een verduisterde kamer zonlicht door glazen prisma's te sturen. Hij liet zien dat wit licht een band van kleuren is en dat een tweede prisma die kleuren niet verder kon splitsen. In zijn Opticks uit 1704 boog hij de band tot een cirkel, verdeelde de rand in zeven delen volgens de verhoudingen van een toonladder en zette wit in het midden. Dat is een van de eerste kleurencirkels. Elke kleurencirkel hier bouwt erop voort. Elke schermkleur bestaat uit drie getallen. Een netvlies bevat ongeveer 6 miljoen kegeltjes van maar drie soorten.

De zeven hoofdstukken beginnen met hoe we kleur zien, daarna RGB en hexcodes: 256 stappen voor rood, groen en blauw geven 16 777 216 kleuren, elk een punt in een kubus. Maxwell toonde in 1861 bij de Royal Institution een Schots geruit lint dat door rode, groene en blauwe filters was gefotografeerd. Elke digitale camera en elk scherm gebruikt nog die drie kanalen. Bij tint, verzadiging en lichtheid zie je dat geel en blauw in HSL allebei 50% lichtheid hebben, terwijl geel bijna 13 keer zoveel licht weerkaatst. Complementaire, analoge en triadische kleuren krijgen een plek op de kleurencirkel. Bij additief en subtractief mengen komt Jacob Christoph Le Blons Coloritto van ongeveer 1722 aan bod, volgens het Smithsonian de eerste beschrijving van beide ideeën. Bij contrast voldoet grijs #767676 op wit met 4.54:1 aan het WCAG-minimum voor gewone tekst, terwijl #777777 met 4.48:1 niet voldoet. In het laatste hoofdstuk lees je dat ongeveer 8 procent van de mannen een rood-groene kleurzienstoornis heeft. Het 3D-lab bouwt de RGB-kubus en de HSL-cilinder.

Voor je begint

Kleuren via hun getallen vergelijken helpt als twee kleurvlakken op elkaar lijken maar zich anders gedragen. Je leert eerst RGB en hexcodes kennen, daarna HSL, kleurrelaties en contrast. Let op het onderscheid tussen schermlicht mengen en inkt mengen: dezelfde kleurnamen betekenen niet dat je hetzelfde resultaat krijgt.

Als je klaar bent

Je leest RGB- en hexkleurwaarden, past tint, verzadiging en lichtheid aan en kiest complementaire, analoge of triadische kleuren. Je onderscheidt additief lichtmengen van subtractief inktmengen, controleert de contrastverhouding van tekst volgens de WCAG-richtlijnen en verklaart waarom kleur alleen niet genoeg is om een fout in een formulier aan te geven.

  1. 1Hoe we kleur zienEen netvlies heeft ongeveer 6 miljoen kegeltjes van maar drie soorten. Elke kleur die je ooit zag, ontstaat uit de verhouding tussen hun reacties.
  2. 2RGB en hexcodesMet 256 stappen per kanaal kan een scherm 256 × 256 × 256 = 16 777 216 kleuren aangeven. Elke kleur is een punt in een kubus.
  3. 3Tint, verzadiging en lichtheidIn HSL hebben geel en blauw beide 50% lichtheid. Toch reflecteert geel volgens de WCAG-luminantieformule bijna 13 keer zoveel licht.
  4. 4Complementaire, analoge en triadekleurenOp de schermkleurencirkel is de tegenkleur van blauw bij 240 graden geel bij 60 graden; een schilderscirkel zet oranje tegenover blauw.
  5. 5Additief en subtractief mengenCyaaninkt op wit papier absorbeert rood; cyaan en magenta over elkaar gedrukt laten dus alleen blauw over.
  6. 6Contrastverhouding en leesbare tekstGrijs #767676 op wit heeft 4.54:1 contrast en voldoet aan het WCAG-minimum voor gewone tekst. Eén stap lichter, #777777, geeft 4.48:1 en voldoet niet.
  7. 7Kleur in een ontwerp gebruikenOngeveer 8 procent van de mannen heeft een rood-groenkleurenzienstoornis. Alleen rode foutmarkeringen laten velen dus raden.

Verwante cursussen

  • Noten lezen · Muziektheorie
    Leer toonhoogten lezen op de notenbalk: vioolsleutel, bassleutel, hulplijnen, het grote notenstel, kruisen en mollen en de verschillende namen voor dezelfde noten. Elk hoofdstuk heeft een notenquiz of bespeelbaar klavier.
  • Piano: eerste stappen · Een instrument bespelen
    Vind je weg op het toetsenbord, leer de namen van de witte toetsen, plaats je rechterhand en speel je eerste melodie op het toetsenbord hieronder. Een muis, een touchscreen of de toetsen van je computer werken allemaal.
  • Het orkest · Muziekgeschiedenis en luisteren
    Een volledig symfonieorkest kan meer dan 100 spelers op één podium hebben. Loop rond op een 3D-podium, kies een instrument om een benaderde syntheseklank te horen en het bereik op een toetsenbord te zien, en bouw daarna per familie een beroemde melodie op. Zeven hoofdstukken behandelen de geschiedenis, de vier instrumentfamilies, de dirigent en de partituur, en hoe je luistert.
  • Perspectieftekenen · Tekenen
    Elke perspectieftekening is overgetrokken op een denkbeeldige glasplaat tussen oog en wereld. Beweeg rond een 3D-kamer met oogpunt en beeldvlak, wissel tussen eenpuntsperspectief, tweepuntsperspectief en driepuntsperspectief, verhoog je ooghoogte en volg horizon en verdwijnpunten.
Bronnen van deze cursus (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Geraadpleegd: 2026-10-17