Kleurenkiezer
Vind de exacte code voor elke kleur, in elk formaat.
Contrastcontrole
- AA
- AA groot
- AAA
- AA
- AA groot
- AAA
Draait in je browser. Niets van wat je typt wordt ergens naartoe gestuurd.
- 5 kleurformaten
- WCAG-contrastcontrole
- Ondersteunt dekking
Zo kies je een kleur
- Sleep in het vierkant om verzadiging en helderheid in te stellen, verschuif dan de tintschuifregelaar.
- Of typ een code in elk formaat: HEX, RGB, HSL, HSV of CMYK.
- Kopieer de code die je nodig hebt en controleer het contrast hieronder.
Kleurformaten vergeleken
Elke rij hieronder beschrijft dezelfde oranje kleur. Alleen de notatie verandert.
| Formaat | Voorbeeld | Gebruikt in |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, ontwerptools |
| RGB | rgb(240, 138, 60) | CSS, beeldbewerkers |
| HSL | hsl(24, 84%, 59%) | CSS, het makkelijkst met het oog aan te passen |
| HSV/HSB | hsv(24, 75%, 94%) | Kleurkiezers in verf- en ontwerpapps |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Drukwerk en inktmenging |
Gebruik HEX of RGB voor het web, HSL wanneer je de helderheid of verzadiging van een kleur wilt bijstellen zonder de tint te veranderen, en CMYK als startpunt voor drukwerk.
WCAG-contrastniveaus
De contrastcontrole hieronder vergelijkt je kleur met effen wit en effen zwart en beoordeelt beide volgens de WCAG 2-niveaus.
| Niveau | Normale tekst | Grote tekst |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Grote tekst betekent ongeveer 24 px, of 19 px vet. De meeste sites hoeven alleen AA te halen. AAA is een strengere norm die vooral wordt gebruikt op overheids- en toegankelijkheidsgerichte sites.
Tips voor het kiezen van toegankelijke kleuren
- Houd de tint vast en verlaag de helderheid in HSL om een donkerdere tint van dezelfde kleur te krijgen voor hover- en actieve statussen.
- Een kleur die AA haalt op wit kan zakken op een getinte achtergrond, controleer het contrast dus tegen de echte achtergrond van de pagina, niet alleen wit of zwart.
- De pipet werkt alleen in Chrome en Edge op een computer. Firefox en Safari hebben de EyeDropper API nog niet toegevoegd.
- Vraag een drukproef aan voordat je een CMYK-waarde vertrouwt voor een volledige oplage. Dezelfde cijfers kunnen er anders uitzien op gestreken en ongestreken papier.
Veelgestelde vragen over Kleurenkiezer
Hoe kom ik aan de kleurcode van iets op mijn scherm?
Klik in Chrome en Edge op een computer op Kies van scherm, en klik dan ergens op je scherm. Andere browsers bieden dit nog niet, maak dus een schermafbeelding en open die in een afbeeldingskleurkiezer.
Wat is het verschil tussen HEX, RGB en HSL?
Ze beschrijven dezelfde kleur op verschillende manieren. HEX en RGB geven de hoeveelheden rood, groen en blauw (HEX schrijft ze in grondtal 16), terwijl HSL tint, verzadiging en helderheid geeft, wat makkelijker met de hand is aan te passen.
Welke contrastverhouding heeft leesbare tekst nodig?
WCAG-niveau AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst, wat ongeveer 24 px is, of 19 px vet. Niveau AAA verhoogt normale tekst naar 7:1.
Zijn de CMYK-waarden exact?
Het zijn rechtstreekse wiskundige omzettingen vanuit RGB. Echte drukkleuren hangen af van de inkt, het papier en het printerprofiel, gebruik ze dus als startpunt en controleer een drukproef.
Wat verandert de dekkingsschuifregelaar?
Die stelt transparantie in van 0 (onzichtbaar) tot 100 (dekkend). Onder 100 krijgt de HEX-code twee extra cijfers en wordt RGB rgba(). Contrast wordt gecontroleerd voor de kleur zoals die eruitziet op elke achtergrond.
Waar is HSV goed voor dat RGB niet is?
HSV scheidt de tint van een kleur van hoe helder en verzadigd hij oogt. Daarom geven verfkiezers en fotobewerkers je één schuifregelaar voor tint en een andere voor helderheid, in plaats van rood, groen en blauw op het oog te mengen.
Kan ik hier een Pantone-kleur krijgen?
Nee. Pantone is een gelicentieerd steunkleursysteem gekoppeld aan specifieke inkten, geen simpele wiskundige omzetting vanuit RGB of CMYK. Gebruik de CMYK-waarde als startpunt en bevestig de exacte match bij je drukker.