Zo werkt de kleurkiezer
Upload een foto, screenshot of logo en klik ergens op. De tool leest precies die pixel en toont de kleur als HEX (bijvoorbeeld #1e88e5) en RGB (rgb(30, 136, 229)). De knop Kopiëren zet de HEX-code op je klembord. Bij het laden wordt meteen de middelste pixel gelezen, zodat je direct een waarde ziet.
Elke kleur die je aanklikt komt in een rij recente stalen (tot acht), zodat je meerdere plekken — een knop, een achtergrond, een kop — kunt proberen en vergelijken voordat je kiest. De afbeelding wordt in een canvas in je browser gelezen en nooit geüpload.
HEX, RGB en HSL in gewone taal
Alle drie beschrijven dezelfde kleur op het scherm; ze schrijven hem alleen anders op.
- HEX —
#RRGGBB, drie paren hexadecimale cijfers voor rood, groen en blauw, van00totff. Dat verwachten CSS, Figma, Canva, WordPress-thema's en de meeste velden voor "huisstijlkleur". - RGB — dezelfde drie kanalen als decimale getallen van 0 tot 255.
#1e88e5enrgb(30, 136, 229)zijn identiek. Handig in code, in Office en in programma's met schuifregelaars. - HSL — tint (0–360° op de kleurencirkel), verzadiging en lichtheid in procenten. De kiezer toont geen HSL, maar elk ontwerpprogramma en CSS rekent HEX direct om. HSL is handig als je een lichtere of donkerdere versie van de gekozen kleur wilt: tint gelijk houden, alleen de lichtheid aanpassen.
Kleuren uit screenshots halen
Om een kleur uit een app, website of videobeeld over te nemen, maak je een screenshot (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; telefoon: aan/uit + volume omlaag, op de iPhone zijknop + volume omhoog) en sleep je die hierheen.
Tips voor een nauwkeurig resultaat:
- Klik op egale vlakken. Mik op het midden van een knop, niet op de rand — randen zijn met de achtergrond vermengd (anti-aliasing) en geven een tussenkleur.
- Foto's hebben ruis. Naburige pixels in een foto verschillen iets; probeer een paar plekken en kies de meest representatieve.
- Screenshots kunnen kleuren verschuiven. Nachtmodus, Night Shift, HDR of een kleurbeheerd scherm kunnen de opname kleuren. Zet ze uit als de exacte huisstijlkleur telt.
- Sterk gecomprimeerde JPG's wijken af. Een JPG die vaak opnieuw is opgeslagen toont vlekken bij randen. Gebruik de originele PNG of SVG van het logo als je die hebt.
- Transparante delen hebben geen echte kleur; erop klikken geeft zwart (
#000000). Klik op het zichtbare deel van het logo.
Controleer het contrast voordat je de kleur gebruikt
Een mooie kleur kan als tekst toch onleesbaar zijn. De toegankelijkheidsrichtlijnen (WCAG) vragen een contrast van minstens 4,5:1 tussen gewone tekst en achtergrond, en 3:1 voor grote tekst en iconen. Lichtgrijs op wit of middenblauw op donkerblauw zakken vaak.
Heb je tekst- en achtergrondkleur bepaald, plak dan beide HEX-codes in een willekeurige contrastchecker. Is de verhouding te laag, maak de tekst donkerder of de achtergrond lichter — de lichtheid in HSL aanpassen is de snelste manier om dat op te lossen zonder van de huisstijl af te wijken.
Veelvoorkomend gebruik
- De huisstijlkleur vinden uit een logo dat je alleen als afbeelding kreeg.
- De kleur van een knop of achtergrond van een website in je eigen ontwerp nabouwen.
- Een palet uit een foto maken voor dia's, social posts of een interieur-moodboard.
- De achtergrondkleur van het Apple touch-icoon kiezen in de favicon-generator.
Verwante tools
- Stel eerst het onderwerp vrij en meet dan zonder achtergrond: Achtergrond verwijderen.
- Snijd een klein gebied uit om nauwkeuriger te klikken: Afbeelding bijsnijden.
- De afbeelding zelf als code voor CSS nodig? Afbeelding naar Base64.