Gidsen over kleur
Korte, praktische gidsen over kleur op schermen: formaten, contrast, paletten, donkere modus en CSS. Elk getal is berekend, elk voorbeeld kun je kopiëren.
- OKLCH uitgelegd: het kleurformaat dat eindelijk klopt met je ogenOKLCH beschrijft een kleur aan de hand van hoe licht die oogt, hoe kleurrijk die is en welke kleurtoon die heeft. Anders dan bij HSL ziet dezelfde lichtheid er bij elke kleurtoon echt even licht uit. Daardoor worden paletten, hover-states en toegankelijk contrast voorspelbaar.28 september 20263 min lezen
- APCA vs. WCAG 2: welke contrastcheck kun je vertrouwen?Contrastverhoudingen uit WCAG 2 zijn wat de wet vraagt. APCA is een nieuwer model dat leesbaarheid veel beter voorspelt, vooral bij donkere thema’s en verzadigde kleuren. Controleer je beide, dan krijg je tekst die aan de regels voldoet én echt prettig leesbaar is.28 september 20263 min lezen
- Kleurgamut uitgelegd: sRGB, Display P3 en kleuren buiten de gamutEen gamut is de verzameling kleuren die een scherm of kleurruimte kan weergeven. Het web is gebouwd op sRGB, maar de meeste telefoons en veel laptops tonen tegenwoordig Display P3, met merkbaar feller rood, groen en oranje.28 september 20262 min lezen
- Kleurformaten uitgelegd: HEX, RGB, HSL, OKLCH en de restDezelfde kleur kun je op een tiental manieren schrijven. Hier lees je wat elk formaat betekent, wanneer je het gebruikt en hoe dezelfde kleur er in elk formaat uitziet.28 september 20262 min lezen
- Hex-kleurcodes uitgelegd: zo werkt #RRGGBBEen hex-kleurcode zoals #1e90ff bestaat uit drie paren hexadecimale cijfers: de hoeveelheid rood, groen en blauw licht, elk van 00 (niets) tot ff (vol, 255). Voeg een vierde paar toe voor de dekking: 80 betekent ongeveer 50%, ff betekent volledig dekkend.28 september 20266 min lezen
- Een kleurenpalet kiezen voor je website of appBegin met één merkkleur, maak daar een schaal van 50 tot 950 van, voeg licht getinte grijzen en vier statuskleuren toe en test daarna elk tekstpaar op contrast en kleurenblindheid. Kies stappen op hun OKLCH-lichtheid, niet op het oog: op een witte achtergrond haalt tekst WCAG AA zodra de lichtheid rond 0,55 of lager ligt, welke kleurtoon het ook is.28 september 20266 min lezen
- Kleuren voor dark mode: achtergrond, tekst en accenten kiezenGebruik een donkergrijze achtergrond zoals #121212 in plaats van puur zwart, gebroken witte tekst zoals #e5e5e5 in plaats van puur wit, en lichtere, minder verzadigde versies van je merkkleuren. Controleer tekst met APCA en met WCAG 2, want WCAG 2 overschat het contrast op donkere achtergronden.28 september 20266 min lezen
- Kleurharmonieën: complementair, analoog, triadisch en meerEen kleurharmonie kiest kleurtonen op vaste hoeken van een kleurenwiel: 180° uit elkaar voor complementair, 30° voor analoog, 120° voor triadisch. Draai de kleurtoon in OKLCH in plaats van HSL, dan blijven de kleuren even licht en springt er niet per ongeluk één kleur uit.28 september 20265 min lezen
- CSS color-mix() en relatieve kleuren: tinten, hovers en transparantiecolor-mix() mengt twee kleuren in een kleurruimte naar keuze, en met de relatieve kleursyntaxis pas je één kanaal van een bestaande kleur aan, zoals oklch(from var(--brand) calc(l - 0.1) c h). Beide draaien in de browser, werken met CSS-variabelen en vervangen de meeste kleurfuncties van Sass. Meng in oklab voor tinten en hovers, in srgb voor transparantie.28 september 20267 min lezen
- Kleurenblindvriendelijk kleurenpalet: zo test en verbeter je je kleurenIn een kleurenblindvriendelijk palet blijft elk kleurenpaar te onderscheiden bij protanopie, deuteranopie, tritanopie en in grijswaarden. De betrouwbaarste oplossing is geen speciale kleurtoon, maar een verschil in lichtheid: kleuren die ongeveer 0,2 uit elkaar liggen in OKLCH-lichtheid, bleven in al onze simulaties te onderscheiden. Combineer dat met iconen of labels, want kleur alleen laat altijd iemand in de steek.28 september 20266 min lezen
- Tailwind CSS-kleuren: het OKLCH-palet van v4, eigen kleuren en tintenTailwind CSS v4 heeft 26 kleurschalen met elk 11 tinten, van 50 tot 950: samen 286 kleuren, gedefinieerd in OKLCH als CSS-variabelen zoals --color-blue-500. Eigen kleuren voeg je toe met @theme { --color-brand-500: oklch(...) }. Hetzelfde stapnummer betekent niet dezelfde lichtheid: blue-600 is het lichtste blauw dat 4,5:1 haalt op wit, terwijl geel 700 nodig heeft.28 september 20266 min lezen