Kleurenkiezer
Pik elke kleur uit een afbeelding en krijg direct de HEX-, RGB-, HSL-, HSV- en CMYK-codes.
Upload een afbeelding om een kleur te kiezen
Sleep en zet neer, plak of blader — PNG, JPG, WEBP of GIF
Tip: je kunt ook een afbeelding plakken met Ctrl/Cmd + V
Kleurcodes
Dichtstbijzijnde kleurnaam: Royal Blue
Kleurharmonieën
Contrastcontrole (WCAG)
Voorbeeldtekst
Opgeslagen kleuren
Nog geen opgeslagen kleuren — kies er een en tik op “Kleur opslaan”.
Een kleurenkiezer is een gereedschap waarmee je exact bepaalt welke kleur je gebruikt en die kleur uitdrukt in de codes die schermen en drukpersen begrijpen. Je pikt een kleur rechtstreeks uit een afbeelding of stelt hem zelf samen, en je krijgt meteen de bijbehorende HEX-, RGB-, HSL-, HSV- en CMYK-waarden. Zo hoef je niet meer op je gevoel af te gaan: één klik en je hebt de precieze code die je in je ontwerp, code of drukbestand kunt plakken.
Kleurenkiezers worden overal gebruikt: bij webdesign om een merkkleur uit een moodboard te halen, bij ontwikkeling om die kleur als CSS-variabele in te stellen, bij drukwerk om naar CMYK om te zetten, en bij toegankelijkheid om te controleren of tekst genoeg contrast heeft. Onze tool is volledig gratis en werkt direct in je browser — je afbeeldingen worden niet geüpload naar een server, dus je werk blijft privé op je eigen apparaat. Je krijgt HEX, RGB, HSL, HSV en CMYK naast elkaar, kunt een compleet palet uit een afbeelding extraheren, passende kleurharmonieën genereren en het WCAG-contrast tussen twee kleuren controleren.
Hoe kies je een kleur uit een afbeelding
- 1
Upload je afbeelding
Sleep een afbeelding naar het vak, plak hem met Ctrl/Cmd + V of klik om er een van je apparaat te kiezen. PNG, JPG, WEBP en GIF worden ondersteund en alles blijft in je browser.
- 2
Klik met de pipet op een pixel
Beweeg over de afbeelding en gebruik de pipet om precies de pixel aan te wijzen waarvan je de kleur wilt. Zoom in voor pixel-nauwkeurig mikken en klik om die kleur te bemonsteren.
- 3
Lees en kopieer de kleurcodes
Zodra je klikt, verschijnen de HEX-, RGB-, HSL-, HSV- en CMYK-waarden naast elkaar. Klik op elke code om hem naar je klembord te kopiëren, klaar om in je ontwerp of stylesheet te plakken.
- 4
Haal een palet uit de afbeelding
Laat de tool automatisch de dominante kleuren van de afbeelding herkennen en bundelen tot een samenhangend palet. Ideaal om in één keer een kleurenschema uit een foto of moodboard te destilleren.
- 5
Genereer kleurharmonieën
Vertrek vanuit je gekozen kleur en genereer complementaire, analoge, triadische, tetradische, gesplitst-complementaire en monochromatische combinaties om snel een evenwichtig kleurenschema op te bouwen.
- 6
Controleer het contrast en sla je palet op
Zet twee kleuren tegen elkaar om de WCAG-contrastverhouding te controleren en te zien of ze slagen voor AA en AAA. Sla je favoriete kleuren op en exporteer je palet als CSS, JSON of PNG.
HEX, RGB, HSL, HSV en CMYK uitgelegd
Dezelfde kleur kun je op verschillende manieren noteren, en elk kleurmodel heeft zijn eigen sterke punten. HEX en RGB beschrijven kleuren zoals schermen ze maken (met licht), HSL en HSV zijn intuïtiever om mee te sleutelen, en CMYK is bedoeld voor drukwerk (met inkt). Onze kleurenkiezer toont ze allemaal tegelijk, zodat je zelf het model kiest dat bij je taak past.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web en CSS |
| RGB | rgb(59, 130, 246) | Schermen en beeldschermen |
| HSL | hsl(217, 91%, 60%) | Intuïtief aanpassen van tint en verzadiging |
| HSV | hsv(217, 76%, 96%) | Designtools en kleurkiezers |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Drukwerk en offset |
Web- en UI-design
Bij het ontwerpen van websites en interfaces wil je merkkleuren consistent doorvoeren. Pik een kleur uit een logo of moodboard, bouw met de kleurharmonieën een uitgebalanceerd palet en exporteer het meteen. Zo houd je knoppen, accenten en achtergronden netjes op elkaar afgestemd.
Front-end ontwikkeling
Kopieer de HEX- of RGB-waarde rechtstreeks in je stylesheet en gebruik hem als CSS-variabele, bijvoorbeeld --primary: #3B82F6;. De HSL-notatie is bovendien handig om in code snel lichtere of donkerdere varianten te maken door alleen de lichtheid aan te passen.
Drukwerk en branding
Voor gedrukt materiaal zoals visitekaartjes, flyers en verpakkingen heb je CMYK-waarden nodig in plaats van schermkleuren. De tool zet je gekozen kleur direct om naar CMYK, zodat je huisstijl op papier zo dicht mogelijk bij het scherm blijft.
Toegankelijkheid
Tekst moet voldoende contrast hebben met zijn achtergrond om leesbaar te zijn voor iedereen. Met de ingebouwde WCAG-contrastcontrole zie je meteen de contrastverhouding en of een kleurcombinatie slaagt voor niveau AA en AAA, zodat je ontwerp toegankelijk blijft.
De vergelijking
Er zijn genoeg online pipetten, maar de meeste blijven bij HEX en RGB en overladen je met advertenties. Zo verhoudt onze kleurenkiezer zich tot een veelgebruikt alternatief als imagecolorpicker.com.
| Kleurmodellen | HEX, RGB, HSL, HSV en CMYK naast elkaar | Vooral HEX en RGB |
| CMYK voor drukwerk | Ja, direct omgezet en klaar voor drukwerk | Beperkt of niet aanwezig |
| WCAG-contrastcontrole | Ingebouwd, met AA- en AAA-uitslag | Niet aanwezig |
| Kleurharmonieën | Zes soorten, automatisch gegenereerd | Niet aanwezig |
| Advertenties | Geen advertenties, alles blijft in je browser | Advertenties op de pagina |
Veelgestelde vragen
Hoe kies ik een kleur uit een afbeelding?
Upload je afbeelding of plak hem met Ctrl/Cmd + V, beweeg de pipet over de plek die je wilt en klik. De tool bemonstert die pixel en toont meteen de HEX-, RGB-, HSL-, HSV- en CMYK-waarden, die je met één klik kunt kopiëren.
Wat is een HEX-kleurcode?
Een HEX-code is een kleur genoteerd als een hekje gevolgd door zes tekens, bijvoorbeeld #3B82F6. Elk paar tekens staat voor de hoeveelheid rood, groen en blauw (van 00 tot FF). Het is de meest gebruikte notatie op het web en in CSS.
Hoe zet ik RGB om naar HEX?
Je hoeft niets handmatig om te rekenen: kies een kleur in de tool en je krijgt de RGB- én de HEX-waarde tegelijk te zien. Achter de schermen wordt elke RGB-waarde (0–255) omgezet naar een tweecijferige hexadecimale notatie, samengevoegd tot één code zoals #3B82F6.
Hoe maak ik een palet uit een foto?
Upload de foto en gebruik de functie voor palet-extractie. De tool analyseert de afbeelding, herkent de dominante kleuren en bundelt ze tot een samenhangend palet dat je kunt opslaan en exporteren als CSS of JSON.
Hoe controleer ik het kleurcontrast voor toegankelijkheid?
Kies een tekstkleur en een achtergrondkleur in de contrastcontrole. De tool berekent de WCAG-contrastverhouding en laat zien of de combinatie slaagt voor niveau AA en AAA, voor zowel normale als grote tekst. Zo weet je zeker dat je tekst goed leesbaar is.
Is de kleurenkiezer gratis en blijft mijn werk privé?
Ja, de tool is volledig gratis en zonder registratie te gebruiken. Alle verwerking gebeurt lokaal in je browser: je afbeeldingen worden niet naar een server geüpload, dus je materiaal blijft privé op je eigen apparaat.
