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 handig hulpmiddel waarmee je precies de kleur uithaalt die je op je scherm ziet. Je laadt een afbeelding, klikt met de pipet op om het even welke pixel en krijgt op slag de exacte codes in vijf kleurmodellen: HEX, RGB, HSL, HSV en CMYK. Zo hoef je niet meer op je gevoel af te gaan of eindeloos te schuiven met kleurregelaars — je pikt gewoon de tint die je nodig hebt en kopieert de code.
Zo'n tool komt van pas bij zowat elk visueel project: bij webdesign om een merkkleur exact over te nemen, bij ontwikkeling om een CSS-waarde te bepalen, bij drukwerk waar je CMYK-waarden nodig hebt, en bij toegankelijkheid om te checken of tekst voldoende afsteekt tegen de achtergrond. Deze kleurenkiezer is volledig gratis en draait rechtstreeks in je browser — je afbeeldingen blijven op je eigen toestel en worden nergens naartoe verstuurd, dus je privacy blijft gevrijwaard. Naast de vijf kleurmodellen haal je er ook een volledig palet uit je afbeelding mee, genereer je kleurharmonieën en controleer je het WCAG-contrast.
Een kleur uit een afbeelding kiezen
- 1
Je afbeelding uploaden
Sleep een bestand naar het venster of klik om er een te kiezen. PNG, JPG, WEBP en GIF worden ondersteund; je kunt ook een afbeelding plakken met Ctrl of Cmd + V.
- 2
Met de pipet een pixel aanklikken
Beweeg over de afbeelding en klik op de plek waarvan je de kleur wilt. Zoom desnoods in om exact de juiste pixel te raken.
- 3
De kleurcodes lezen en kopiëren
Zodra je klikt verschijnen de HEX-, RGB-, HSL-, HSV- en CMYK-codes. Tik op een code om die naar je klembord te kopiëren en meteen in je project te plakken.
- 4
Een palet uit de afbeelding halen
Laat de tool de dominante kleuren uit je afbeelding halen. Je krijgt in één oogopslag een samenhangend palet dat de sfeer van de foto weergeeft.
- 5
Kleurharmonieën genereren
Vertrek van je gekozen kleur en bouw complementaire, analoge, triadische of monochromatische combinaties op. Ideaal om snel een evenwichtig kleurenschema samen te stellen.
- 6
Het contrast controleren en je palet bewaren
Zet twee kleuren tegenover elkaar en check of ze de WCAG-contrastdrempel halen. Bewaar de kleuren die je wilt houden en exporteer je palet als CSS, JSON of PNG.
HEX, RGB, HSL, HSV en CMYK uitgelegd
Eenzelfde kleur kun je op verschillende manieren noteren, en elk model heeft zijn eigen nut. HEX en RGB zijn de standaard op het web, HSL en HSV lezen intuïtiever wanneer je een tint wilt bijstellen, en CMYK is de taal van de drukker. De kleurenkiezer toont alle vijf tegelijk, zodat je meteen de notatie kiest die bij je werk past.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web en CSS |
| RGB | rgb(59, 130, 246) | Schermen en beeldschermweergave |
| HSL | hsl(217, 91%, 60%) | Intuïtief aanpassen van tint en helderheid |
| HSV | hsv(217, 76%, 96%) | Designtools en kleurkiezers |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Drukwerk |
Web- en UI-design
Neem een merkkleur van een screenshot over of stel een palet samen voor een nieuwe interface. Doordat je de HEX-code met één tik kopieert, plak je de exacte tint zo in je designtool of stylesheet zonder te moeten gokken.
Front-end ontwikkeling
Bepaal in een handomdraai de waarden voor je CSS-variabelen. Kies de kleuren van je huisstijl, kopieer de codes en giet ze in je :root-declaratie of design-tokens, zodat heel je project consistent blijft.
Drukwerk en branding
Voor folders, visitekaartjes of verpakkingen heb je CMYK-waarden nodig in plaats van schermkleuren. De kleurenkiezer toont naast HEX en RGB ook de CMYK-notatie, zodat je vlot van scherm naar drukpers overstapt.
Toegankelijkheid
Controleer of je tekst genoeg afsteekt tegen de achtergrond volgens de WCAG-richtlijnen. De ingebouwde contrastcontrole geeft de verhouding weer en vertelt je meteen of je combinatie slaagt voor niveau AA en AAA.
De vergelijking
Er bestaan al langer online kleurenpipetten, maar niet elke tool doet evenveel. Hieronder zetten we onze kleurenkiezer naast imagecolorpicker.com, een populair alternatief.
| Kleurmodellen | HEX, RGB, HSL, HSV én CMYK | Vooral HEX en RGB |
| CMYK voor drukwerk | Ja, direct af te lezen | Niet standaard |
| WCAG-contrastcontrole | Ingebouwd, met AA/AAA-oordeel | Niet aanwezig |
| Kleurharmonieën | Complementair, analoog, triadisch en meer | Beperkt of afwezig |
| Advertenties | Geen reclame, geen afleiding | Reclame op de pagina |
Veelgestelde vragen
Hoe kies ik een kleur uit een afbeelding?
Upload je afbeelding, klik met de pipet op de pixel waarvan je de kleur wilt en lees de codes af. Je kunt inzoomen om precies de juiste plek te raken en de gewenste code met één tik kopiëren.
Wat is een HEX-kleurcode?
Een HEX-code is een kleur genoteerd in zes hexadecimale tekens, bijvoorbeeld #3B82F6. De eerste twee tekens staan voor rood, de volgende twee voor groen en de laatste twee voor blauw. Het is de meest gebruikte notatie op het web en in CSS.
Hoe zet ik RGB om naar HEX?
Dat hoef je niet met de hand te doen. De kleurenkiezer toont voor elke gekozen kleur automatisch zowel de RGB- als de HEX-waarde, zodat je gewoon de notatie kopieert die je nodig hebt.
Hoe maak ik een palet uit een foto?
Laad je foto en gebruik de paletfunctie. De tool haalt de dominante kleuren eruit en zet ze samen als een palet dat je kunt bewaren en exporteren als CSS, JSON of PNG.
Hoe controleer ik het kleurcontrast voor toegankelijkheid?
Kies een tekstkleur en een achtergrondkleur in de contrastcontrole. De tool berekent de contrastverhouding volgens de WCAG-richtlijnen en toont of de combinatie slaagt voor niveau AA en AAA.
Is de kleurenkiezer gratis en blijven mijn afbeeldingen privé?
Ja, de tool is volledig gratis en er is geen registratie nodig. Alles gebeurt rechtstreeks in je browser: je afbeeldingen worden niet geüpload naar een server, dus ze blijven op je eigen toestel.
