Artikel
Kleurgereedschap voor het web: hex, paletten en toegankelijkheid
Kleuren kiezen voor een website lijkt eenvoudig tot je oog in oog staat met hex-codes, RGB-tripletten en HSL-hoeken die allemaal op een andere manier hetzelfde beschrijven. Dit artikel legt uit hoe die formaten met elkaar samenhangen, hoe je een enkele merkkleur omzet in een bruikbaar palet en hoe je ervoor zorgt dat het resultaat leesbaar blijft voor mensen die kleur anders zien.
Hex, RGB en HSL beschrijven dezelfde kleur
Een kleur op het scherm wordt gemengd uit rood, groen en blauw licht. Hex-notatie schrijft die drie kanalen als een code van zes tekens, zoals #2563eb, waarbij elk paar tekens een kanaal van 00 tot ff is. RGB schrijft dezelfde drie getallen in decimalen, van 0 tot 255, wat makkelijker te lezen is maar verder niets toevoegt. HSL kiest een andere invalshoek: het beschrijft een kleur via de tint (een positie op de kleurencirkel van 0 tot 360 graden), de verzadiging (hoe levendig die is) en de helderheid (hoe dicht bij wit of zwart). HSL is het formaat waar ontwerpers naar grijpen wanneer ze een kleur willen bijsturen, want de helderheid verhogen of de tint verschuiven is één intuïtieve aanpassing in plaats van drie gekoppelde getallen. Met een omzetter beweeg je tussen alle drie, zodat je een waarde in het ene formaat kunt aflezen en in het andere kunt gebruiken.
Eén kleur omzetten naar een palet
Eén merkkleur is zelden genoeg. Een werkend palet heeft meestal een hoofdkleur nodig, een of twee accenten en een reeks neutrale grijstinten voor tekst en achtergronden. De verhoudingen tussen kleuren volgen eenvoudige regels op de kleurencirkel: complementaire kleuren staan tegenover elkaar, analoge kleuren staan naast elkaar voor een rustig gevoel, en een triadische set verdeelt drie kleuren gelijkmatig voor contrast zonder te botsen. Een kleurschema-tool past deze regels toe op je beginkleur en geeft je de bijbehorende hex-codes, zodat je de hoeken niet met de hand hoeft te berekenen. Heb je al een afbeelding waarvan je de sfeer mooi vindt, dan leest een palet-extractor de dominante kleuren eruit, een snelle manier om een site op een foto of een logo te baseren.
Contrast en kleurenblindheid
Een palet dat er goed uitziet op jouw scherm kan lezers nog altijd in de steek laten. Ongeveer een op de twaalf mannen en een op de tweehonderd vrouwen heeft een vorm van kleurzienzwakte, meestal moeite om rood van groen te scheiden. Als jouw enige signaal voor een fout rode tekst op een groene knop is, missen die lezers het. De oplossing is niet om kleur te vermijden maar om nooit alleen op kleur te vertrouwen: combineer die met een pictogram, een label of een vorm, en houd genoeg helderheidscontrast tussen tekst en de achtergrond. Een kleurenblindheidssimulator laat zien hoe je palet eruitziet bij de gangbare vormen van kleurzicht, zodat je een probleem vóór de publicatie opvangt in plaats van na een klacht.
Dit allemaal in de browser doen
Geen van deze stappen heeft een server nodig. Een hex-code omzetten, een schema genereren, kleuren uit een afbeelding lezen en kleurenblindheid simuleren zijn allemaal kleine berekeningen die een browser meteen afhandelt. Dat telt wanneer de afbeelding die je bemonstert een onuitgebracht ontwerp of een klantlogo is: met het gereedschap hier blijft het bestand op je apparaat en wordt niets geüpload. Je krijgt hetzelfde resultaat als bij een onlinedienst, zonder het werk uit handen te geven. De kleuromzetter, de kleurschema-generator, de palet-extractor en de kleurenblindheidssimulator draaien allemaal lokaal en werken offline op dezelfde manier zodra de pagina is geladen.
OKLCH en bredere kleurruimten
Hex, RGB en HSL beschrijven alle kleuren binnen de sRGB-ruimte die schermen al jaren gebruiken. Nieuwere schermen kunnen meer tonen, en CSS kan die kleuren nu bereiken via de color()-functie en de Display P3-ruimte, die levendige groenen en roden toevoegt die sRGB niet kan weergeven. De grotere verandering is OKLCH, een manier om kleur uit te drukken als helderheid, chroma en tint, afgestemd op hoe het oog helderheid daadwerkelijk waarneemt. In HSL ziet een geel en een blauw op dezelfde 50% helderheid er totaal anders uit: het geel oogt licht, het blauw oogt donker. In OKLCH blijft de waargenomen helderheid gelijk als je de helderheidswaarde vasthoudt en alleen de tint aanpast. Dat maakt het praktisch om een palet te bouwen waarbij elke tint hetzelfde contrastdoel haalt door slechts één getal vast te zetten, in plaats van elke kleur handmatig bij te stellen.
Tools in dit artikel
- KleurconverterConverteer kleuren tussen HEX, RGB, HSL, HSV en CMYK. WCAG-contrastchecker inbegrepen. Geen upload.
- KleurschemageneratorGenereer complementaire, analoge, triadische, tetradische en monochromatische paletten uit een basiskleur. Geen upload.
- Kleurpalet-extractorHaal dominante kleuren uit een afbeelding als HEX-stalen. Kopieer elke kleur. Geen upload.
- KleurenblindheidsimulatorSimuleer protanopie, deuteranopie, tritanopie en achromatopsie op een afbeelding. Geen upload.
Veelgestelde vragen
Wat is het verschil tussen hex en RGB?
Het zijn twee manieren om dezelfde kleur te schrijven. Hex perst de rode, groene en blauwe kanalen in een code van zes tekens in basis 16, terwijl RGB diezelfde drie kanalen opsomt als decimale getallen van 0 tot 255. #ff0000 en rgb(255, 0, 0) zijn hetzelfde rood. Hex is compact en gangbaar in CSS en ontwerpbestanden, RGB is in één oogopslag makkelijker te lezen, en omzetten tussen beide verandert niets aan de kleur zelf.
Hoe weet ik of mijn kleuren leesbaar zijn voor kleurenblinde gebruikers?
Haal je palet door een kleurenblindheidssimulator, die je kleuren opnieuw tekent zoals iemand met elke gangbare vorm van kleurzicht ze zou zien. Let op paren die samenvallen tot dezelfde tint, vooral rood en groen. De veiligste gewoonte is om kleur nooit als enige aanwijzing te gebruiken: ondersteun die met tekst, een pictogram of een patroon, en houd een duidelijk helderheidsverschil tussen voorgrond en achtergrond, zodat de betekenis overeind blijft ook als de tint dat niet doet.