RGB en hexcodes
Met 256 stappen per kanaal kan een scherm 256 × 256 × 256 = 16 777 216 kleuren aangeven. Elke kleur is een punt in een kubus.
Sleep om te draaien. Scroll of knijp om te zoomen.
Drie getallen, drie assen
In de sRGB-kleurruimte van het web schrijf je een kleur als drie kanaalwaarden: rood, groen en blauw. In gewone code is elk kanaal een geheel getal van 0 tot 255, het bereik dat in acht bits past. Bij 0 is dat licht uit. Bij 255 staat het volledig aan. Daarom is rgb(255 0 0) het sterkste rood dat het scherm kan tonen, rgb(0 0 0) zwart en rgb(255 255 255) wit.
Drie getallen met elk een bereik vormen een doos. Zet rood langs één rand, groen langs een andere en blauw langs de derde: elke kleur krijgt een plek in een kubus. Het model hierboven tekent die met 512 blokjes, acht stappen per rand. Zwart ligt in één hoek, wit in de tegenoverliggende. De drie hoeken naast zwart zijn zuiver rood, groen en blauw. Naast wit liggen cyaan, magenta en geel, elk met twee volle kanalen. Zet Labels aan en volg de randen van zwart naar wit. Elk pad passeert één primaire en één secundaire kleur.
De stippellijn van zwart naar wit is de grijsas. Elk punt daarop heeft evenveel rood, groen en blauw, zoals rgb(128 128 128). Kleuren ver van de lijn zijn levendig; dichtbij zijn ze grijzig. Dit is de eerste aanwijzing voor het HSL-model in het volgende hoofdstuk: de afstand tot de grijsas meet hoe kleurrijk iets is.
Een hexcode lezen
CSS laat je dezelfde drie getallen ook hexadecimaal schrijven, na een #-teken. Het zestientallig stelsel gebruikt 0 tot 9 en a tot f, met a = 10 en f = 15. Twee hexcijfers geven 16 × 16 = 256 waarden: precies één kanaal. Zes cijfers zijn dus drie paren voor rood, groen en blauw. Volgens CSS Color 4 maakt hoofdlettergebruik niet uit: #00ff00 en #00FF00 zijn gelijk.
Lees een paar door het eerste cijfer met 16 te vermenigvuldigen en het tweede op te tellen. c3 is 12 × 16 + 3 = 195; ff is 15 × 16 + 15 = 255, het maximum. 80 is 8 × 16 = 128, vrijwel de helft. Drie cijfers zoals #f80 zijn kortschrift: verdubbel elk cijfer, dus #ff8800. Typ een code in het vak Hex onder het model en de markering springt naar dat punt in de kubus.
| Kleur | rgb() | Hex |
|---|---|---|
| Zwart | rgb(0 0 0) | #000000 |
| Wit | rgb(255 255 255) | #ffffff |
| Rood | rgb(255 0 0) | #ff0000 |
| Geel | rgb(255 255 0) | #ffff00 |
| Cyaan | rgb(0 255 255) | #00ffff |
| Middengrijs | rgb(128 128 128) | #808080 |
| #ff0000 | Rood, rgb(255 0 0) |
| #00ffff | Cyaan, rgb(0 255 255) |
| #ff00ff | Magenta, rgb(255 0 255) |
| #ffff00 | Geel, rgb(255 255 0) |
| #808080 | Middengrijs, rgb(128 128 128) |
| #000 | Zwart, kort voor #000000 |
- sRGB-kleuren hebben drie kanalen van 0 tot 255.
- De RGB-kubus heeft zwart en wit tegenover elkaar, met de grijsas ertussen.
- Een hexcode heeft drie paren cijfers in het 16-tallig stelsel: rood, groen, blauw.
- 256³ = 16 777 216 kleuren.
- Hoeveel waarden kan één kanaal van 8 bits hebben?
- Hoeveel kleuren kan RGB met 8 bits per kanaal aangeven?
- Wat is het hexpaar c3 decimaal?
- Wat is het rode kanaal van #a8581b decimaal?
- Schrijf wit als hexcode met zes cijfers.
- Welke kleur is #00ffff?
- Cyaan
- Geel
- Magenta
- Blauw
- Wat betekent de korte code #f80?
- #ff8800
- #f80000
- #0f0800
- #f8f8f8
- Welke kubushoek ligt tegenover zwart?
- Wit
- Rood
- Blauw
- Grijs
- Wat ligt op de grijsas van de kubus?
- rgb(90 90 90)
- rgb(90 0 90)
- rgb(255 90 90)
- rgb(0 0 90)
- Zijn #00ff00 en #00FF00 dezelfde CSS-kleur?
- Ja
- Nee
- Alleen in sommige browsers
- Alleen bij drukwerk
- In welk jaar toonde Maxwell de kleurenfoto met drie filters?
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