Groenblind
Roodblind
Blauwblind
148 benoemde CSS-kleuren
Klik op een kleur om deze in de kleurkiezer te laden. Zoek op naam of hex-waarde.
| Staal | Naam | Hex | RGB |
|---|
Alle 148 standaard CSS-benoemde kleuren conform de CSS Color Level 4-specificatie.
Hoe kleurcodes werken
Hex-codes
Een hex-kleurcode zoals #FF5733 codeert een kleur als drie 2-cijferige hexadecimale getallen: rood (FF = 255), groen (57 = 87), blauw (33 = 51). Hex loopt van #000000 (zwart) tot #FFFFFF (wit). Verkorte notatie zoals #F60 wordt uitgebreid naar #FF6600.
RGB
RGB geeft de intensiteit aan van rood, groen en blauw licht, elk van 0 tot 255. rgb(255, 0, 0) is zuiver rood; rgb(0, 0, 255) is zuiver blauw. Je kunt ook een alfawaarde opgeven: rgba(255, 87, 51, 0.5) is 50% transparant.
HSL
HSL (Hue, Saturation, Lightness) is intuïtiever: tint is de kleurhoek (0°=rood, 120°=groen, 240°=blauw), verzadiging is de kleurintensiteit (0%=grijs, 100%=levendig) en helderheid is de lichtsterkte (0%=zwart, 50%=normaal, 100%=wit). Uitstekend voor programmatische kleurvariaties.
CMYK
Gebruikt in printontwerp: Cyaan, Magenta, Geel en Key (zwart). Omzetting vanuit RGB is benaderend — professionele printworkflows gebruiken ICC-profielen voor nauwkeurigheid. De getoonde waarden zijn ter referentie; controleer altijd bij je drukker.
Uitgewerkt voorbeeld
De CSS-kleur tomato is #FF6347. Uitgesplitst: R=255 (FF), G=99 (63), B=71 (47). In HSL: tint≈9°, verzadiging=100%, helderheid=64%. WCAG-contrast vs wit: ~3,0:1 (AA mislukt voor kleine tekst). Vs zwart: ~7,0:1 (AAA geslaagd). Gebruik tomatotekst dus op donkere achtergronden voor de beste leesbaarheid.
Veelgestelde vragen
Wat is een hex-kleurcode?
Een hex-kleurcode is een 6-cijferig hexadecimaal getal (zoals #FF5733) dat een kleur weergeeft door rood, groen en blauw licht te mengen. De eerste twee cijfers zijn rood, de volgende twee groen, de laatste twee blauw — elk van 00 (geen) tot FF (volledig). Kortere 3-cijferige codes (#F60) zijn geldige verkorte notaties waarbij elk cijfer verdubbelt.
Wat is het verschil tussen RGB en HSL?
RGB mengt rood, groen en blauw lichtwaarden (elk 0–255), overeenkomstig hoe schermen werken. HSL beschrijft Hue (kleurhoek 0–360°), Saturation (levendigheid 0–100%) en Lightness (helderheid 0–100%), overeenkomstig hoe mensen kleur waarnemen. HSL maakt het eenvoudig om lichtere/donkerdere varianten te maken door alleen de L-waarde aan te passen.
Welke WCAG-contrastverhouding heb ik nodig?
WCAG 2.1 AA vereist 4,5:1 voor gewone tekst en 3:1 voor grote tekst (18pt of 14pt vet). AAA vereist respectievelijk 7:1 en 4,5:1. Deze verhoudingen gelden voor tekst ten opzichte van de achtergrond. Decoratieve afbeeldingen en inactieve UI-onderdelen zijn vrijgesteld. Gebruik de contrastchecker hierboven om je kleurencombinaties te controleren.
Wat zijn complementaire, analoge en driehoekige kleuren?
Complementaire kleuren staan tegenover elkaar op het kleurenwiel (180° afstand) en creëren sterk contrast. Analoge kleuren zijn aangrenzend (±30°) en creëren harmonieuze, samenhangende paletten. Driehoekige kleuren zijn gelijkmatig verdeeld over 120° en bieden levendig evenwicht. Alle drie harmonietypen worden weergegeven in de sectie "Kleurharmonieën" hierboven.
Werkt de kleurdruppelaar in alle browsers?
De EyeDropper API wordt momenteel ondersteund in Chrome 95+, Edge 95+ en Opera 81+. Firefox en Safari ondersteunen deze niet. De knop wordt automatisch verborgen in niet-ondersteunde browsers — de kernkleurkiezer en alle codeformaten werken in alle moderne browsers.
Wat zijn CSS-benoemde kleuren?
CSS definieert 148 benoemde kleuren — van aliceblue tot yellowgreen — die je direct in CSS kunt gebruiken zonder hex- of rgb-waarden. Ze maken deel uit van de CSS Color Level 4-specificatie en bevatten klassieke websafe-kleuren (zoals red, blue) plus vele beschrijvende namen (zoals cornflowerblue, mediumaquamarine). De volledige tabel is doorzoekbaar hierboven.