Tint, verzadiging en lichtheid
In HSL hebben geel en blauw beide 50% lichtheid. Toch reflecteert geel volgens de WCAG-luminantieformule bijna 13 keer zoveel licht.
Sleep om te draaien. Scroll of knijp om te zoomen.
Van kubus naar cilinder
RGB-getallen zijn makkelijk voor een scherm, lastig voor mensen. Voor ‘hetzelfde blauw, wat lichter’ moet je alle drie de kanalen tegelijk met verschillende bedragen wijzigen. HSL herschikt sRGB-kleuren zodat de bediening past bij gewone kleurtaal. CSS Color 4 noemt het een cilindermodel: een tinthoek rondom, een middenas voor lichtheid van zwart naar wit en een straal voor verzadiging, de afstand tot neutraal grijs.
Stel je de RGB-kubus voor, rechtop op zijn zwarte hoek met wit er recht boven. De grijsas staat verticaal. Van boven vormen de zes felle hoeken, rood, geel, groen, cyaan, blauw en magenta, een ring. HSL rondt die ring af en rekt het geheel tot een cilinder. Het model toont een horizontale schijf op de gekozen lichtheid en een verticale snede bij de gekozen tint en de overliggende tint. Klik ergens op die oppervlakken om de kleur te kiezen.
Tint
Tint is een hoek in graden. CSS Color 4 bepaalt het beginpunt: 0deg is sRGB-rood, 120deg groen, 240deg blauw en 360deg komt terug bij rood. Halverwege de primaire kleuren liggen de secundaire: 60deg geel, 180deg cyaan en 300deg magenta. Omdat tint een hoek is, loopt die rond. Een tint van 390deg is gelijk aan 30deg. Tel je bij elke tint 180deg op, dan bereik je de kleur recht aan de overkant van de cirkel.
Verzadiging en lichtheid
Verzadiging is een percentage. Bij 100% zit de kleur buiten op de cilinder, zo levendig als sRGB bij die lichtheid kan. Bij 0% zit ze op de grijsas. Volgens CSS Color 4 heeft tint dan geen effect: hsl(0deg 0% 50%) en hsl(180deg 0% 50%) zijn hetzelfde grijs. Lichtheid is ook een percentage: 0% is altijd zwart, 100% altijd wit en 50% de levendigste tintversie. hsl(0deg 100% 50%) is dus #ff0000, en hsl(120deg 100% 25%) is donkergroen, rgb(0 128 0).
Waar HSL misleidt
HSL is handig, maar de CSS-specificatie is eerlijk over de beperkingen. De lichtheid van HSL is niet de lichtheid die je oog ziet. Geel, hsl(60deg 100% 50%), en blauw, hsl(240deg 100% 50%), hebben beide L = 50%, maar geel lijkt veel lichter. De WCAG-luminantieformule geeft 0.9278 voor dat geel en 0.0722 voor dat blauw, een verhouding van bijna 13. Ook de tinthoeken zijn niet gelijkmatig: volgens de specificatie lijkt een stap van 30 graden tussen blauwen klein, terwijl dezelfde stap tussen geel en groen groot lijkt. Nieuwere CSS-kleurruimten zoals oklch() zijn bedoeld om dit op te lossen. Vertrouw voor leesbaarheid nooit op HSL-lichtheid. Gebruik de contrastverhouding die je in hoofdstuk 6 berekent.
0deg rood, 60deg geel, 120deg groen, 180deg cyaan, 240deg blauw, 300deg magenta.
- HSL is een cilinder: tinthoek, verzadigingsstraal, lichtheidshoogte.
- 0deg rood, 120deg groen, 240deg blauw.
- Bij 0% verzadiging heeft de tint geen effect; 0% lichtheid is zwart en 100% wit.
- HSL-lichtheid is niet hetzelfde als waargenomen helderheid.
- Welke HSL-tinthoek is zuiver sRGB-groen?
- Welke tinthoek is magenta?
- Welke kleur is hsl(0deg 100% 50%)?
- #ff0000
- #000000
- #ffffff
- #800000
- Welke kleur is hsl(200deg 60% 100%)?
- Wit
- Lichtblauw
- Zwart
- Grijs
- hsl(0deg 0% 50%) en hsl(180deg 0% 50%) zijn...
- Hetzelfde grijs
- Rood en cyaan
- Zwart en wit
- Verschillende grijzen
- Wat toont de afstand tot de middenas in de HSL-cilinder?
- Verzadiging
- Tint
- Lichtheid
- Luminantie
- Welke tint tussen 0 en 360 is gelijk aan 390deg?
- Wat is de relatieve WCAG-luminantie van zuiver geel #ffff00? Geef 4 decimalen.
- Geel en blauw hebben beide HSL-lichtheid 50%. Wat lijkt lichter?
- Geel
- Blauw
- Ze lijken gelijk
- Het hangt alleen van de tinthoek af
- Welke kleur is hsl(120deg 100% 25%)?
- rgb(0 128 0)
- rgb(0 255 0)
- rgb(128 255 128)
- rgb(64 64 64)
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