Zo gebruik je de kleurkiezer
- Kies een kleur met het kleurvak, dat de eigen kleurkiezer van je apparaat opent, of plak een code in het tekstveld: HEX met of zonder
#(3, 4, 6 of 8 tekens),rgb()enrgba(),hsl()enhsla()met komma’s of spaties, een losse reeks zoals31, 78, 121, of een van de 148 CSS-kleurnamen. Die namen zijn Engels:teal,navy,steelblue. - Pak een kleur uit een afbeelding: open, sleep of plak een foto, logo of screenshot en klik of tik op de plek die je wilt; een vergrootglas toont de pixels eromheen. In Chrome, Edge en Opera op een computer leest Kleur van scherm pakken elke pixel op je beeldscherm, net als een pipet.
- Kopieer het formaat dat je nodig hebt. Elke kleurstaal in het palet kopieert zijn HEX-code als je erop tikt.
De afbeelding wordt op je eigen apparaat gelezen en nooit geüpload.
Kleurformaten uitgelegd
| Formaat | Voorbeeld | Gebruikt in |
|---|---|---|
| HEX | #1f4e79 | CSS, HTML, ontwerpprogramma’s, huisstijlgidsen |
| RGB | rgb(31, 78, 121) | CSS, beeldschermen, fotobewerking |
| HSL | hsl(209, 59%, 30%) | CSS; makkelijk met de hand lichter of donkerder te maken |
| HSV / HSB | hsv(209, 74%, 47%) | Kleurkiezers in Photoshop, Figma en vergelijkbare apps |
| CMYK | cmyk(74%, 36%, 0%, 53%) | Drukwerk (alleen als ruw beginpunt) |
HEX is RGB in het zestientallig stelsel: elk paar tekens is één kanaal van 00 tot ff (0–255), dus 1f = 1 × 16 + 15 = 31. Een zevende en achtste teken voegen transparantie (alfa) toe, en #abc is de korte vorm van #aabbcc.
HSL en HSV beginnen met dezelfde tint, de hoek op de kleurencirkel (0° rood, 120° groen, 240° blauw), met R, G en B omgerekend naar 0–1. De lichtheid is L = (max + min) / 2 en de HSL-verzadiging (max − min) / (1 − |2L − 1|). Bij HSV is de waarde gewoon V = max en de verzadiging (max − min) / max. Daarom is volledig verzadigd rood hsl(0, 100%, 50%) maar hsv(0, 100%, 100%).
CMYK is hier de schoolboekformule: K = 1 − max, daarna C = (1 − R − K) / (1 − K), en hetzelfde voor M en Y. Drukkerijen rekenen om met ICC-profielen voor hun papier en inkt, dus hun getallen wijken af; zie deze waarde als vertrekpunt.
De dichtstbijzijnde CSS-naam wordt gevonden door beide kleuren om te rekenen naar CIELAB en de kleinste rechte afstand te nemen (ΔE, CIE76). Een ΔE van ongeveer 2,3 wordt vaak genoemd als het kleinste verschil dat mensen opmerken.
Rekenvoorbeeld: #1f4e79
Het standaard donkerblauw splitst in 1f, 4e en 79, dus RGB 31, 78, 121. Blauw is het grootste kanaal (121 / 255 = 0,475) en rood het kleinste (0,122). Dan is V = 47%, de HSV-verzadiging (121 − 31) / 121 = 74%, de lichtheid (0,475 + 0,122) / 2 = 30% en de HSL-verzadiging 59%. De tint komt uit op 208,7°, afgerond 209. De relatieve luminantie is 0,0712, dus met witte tekst haalt deze kleur een contrast van 8,66:1 (AAA), met zwarte tekst maar 2,42:1. De dichtstbijzijnde kleurnaam is steelblue, op een ΔE van 21 – de naam is dus maar een ruwe omschrijving.
Contrast en toegankelijkheid (WCAG 2.2)
De contrastcheck volgt de definities in de Web Content Accessibility Guidelines 2.2 van het W3C. Elk kanaal wordt gelineariseerd (c / 12,92 tot en met 0,04045, anders ((c + 0,055) / 1,055)2,4), de relatieve luminantie is L = 0,2126 R + 0,7152 G + 0,0722 B, en de contrastverhouding is (Llichter + 0,05) / (Ldonkerder + 0,05), van 1:1 tot 21:1.
| Niveau | Normale tekst | Grote tekst |
|---|---|---|
| AA (succescriterium 1.4.3) | 4,5:1 | 3:1 |
| AAA (succescriterium 1.4.6) | 7:1 | 4,5:1 |
Grote tekst is minstens 18 punt (24 CSS-pixels) of 14 punt vet (ongeveer 18,7 pixels). Verhoudingen worden op twee decimalen afgekapt, niet afgerond, dus 4,499:1 telt nooit als voldoende, en een doorzichtige kleur wordt eerst gemengd met het wit of zwart waarmee hij wordt vergeleken.
Werk je voor de overheid? Websites van Nederlandse overheden moeten volgens het Besluit digitale toegankelijkheid overheid voldoen aan de Europese norm EN 301 549, waarin WCAG 2.1 op niveau AA is opgenomen – het contrast van 4,5:1 voor gewone tekst hoort daarbij. Meer uitleg staat op digitoegankelijk.nl.
Tinten, schaduwen en harmonieën
De lichtere tinten mengen de kleur in stappen van 20% met wit, de donkere met zwart. Zo heb je meteen een reeks voor hover-effecten, randen en achtergronden. De harmonieën houden verzadiging en lichtheid gelijk en draaien de tint: complementair ligt 180° verder, analoge kleuren 30° aan weerszijden, triadische kleuren liggen 120° uit elkaar en gesplitst complementair gebruikt 150° en 210°.
Tips
- Dezelfde HEX-code kan er op twee schermen anders uitzien (helderheid, nachtmodus, schermen met een breed kleurbereik), maar de getallen blijven gelijk.
- Op zoek naar muurverf? Een schermkleur is geen verfkleur: verf wordt gemengd volgens eigen systemen (zoals RAL of NCS) en ziet er op de muur anders uit dan op een scherm. Neem een kleurstaal of foto mee naar de verfwinkel en laat de kleur daar mengen.
- Foto’s hebben zelden één vlakke kleur: vink Gemiddelde van 5 × 5 pixels aan of vergelijk een paar plekken.
- Mooie letters in je huisstijlkleur? Probeer de lettertype generator; voor een streepjescode op je etiket is er barcode maken.
Veelgestelde vragen
Hoe reken ik HEX om naar RGB?
Splits de zes tekens in drie paren en lees elk paar als getal in het zestientallig stelsel: #1f4e79 → 1f = 31, 4e = 78, 79 = 121, dus rgb(31, 78, 121). Plak een HEX-code hierboven en je krijgt RGB, HSL, HSV en CMYK in één keer.
Wat is het verschil tussen HSL en HSV (HSB)?
Beide gebruiken dezelfde tinthoek. HSL zet zuivere kleuren op 50% lichtheid, waarbij 100% altijd wit is; HSV zet ze op 100% waarde, en wit bereik je door de verzadiging te verlagen. CSS gebruikt HSL; de kleurkiezers van Photoshop en Figma gebruiken HSV, dat ze HSB noemen.
Is de CMYK-waarde klaar voor drukwerk?
Nee. Hij komt uit de eenvoudige omrekenformule, die niets weet van je papier, inkt of drukpers. Professioneel drukwerk wordt omgezet met een ICC-kleurprofiel; geef je drukker de RGB- of HEX-waarde en vraag om een proef, of gebruik een Pantone- of CMYK-waarde uit je huisstijlgids.
Hoe pak ik een kleur uit een foto of van mijn scherm?
Druk op Kleur uit afbeelding pakken, kies een bestand (of sleep het erheen, of plak een screenshot) en klik of tik op de plek die je wilt; met de afbeelding geselecteerd verplaats je de markering met de pijltjestoetsen en kies je met Enter. Kleur van scherm pakken werkt in Chrome, Edge en Opera op computers; Firefox, Safari en mobiele browsers ondersteunen het nog niet, dus daar zie je die knop niet.
Wordt mijn afbeelding ergens geüpload?
Nee. Je browser opent en leest de afbeelding zelf; er gaat niets naar een server.
Laatst bijgewerkt: 15 oktober 2026