De exacte kleur nodig uit een logo, een screenshot, een foto of een ontwerpreferentie? Laad de afbeelding, beweeg je cursor eroverheen om de kleur onder een vergrootloep te bekijken, en klik om hem op te slaan. Elke opgeslagen kleur toont zijn HEX, RGB en HSL met kopieerknoppen met één klik.
Het leest pixels rechtstreeks uit de afbeelding in je browser, dus het kiezen is direct en het bestand wordt nooit geüpload — handig voor merkkleuren die je liever niet naar een willekeurige site stuurt.
Hoe te gebruiken
- Voeg een afbeelding toeSleep de foto of screenshot erin waar je kleuren uit wilt.
- Beweeg en klikDe loep vergroot de exacte pixel; klik om de kleur op te slaan.
- Kopieer de waardePak HEX, RGB of HSL voor elke kleur die je hebt opgeslagen.
Soms heb je één kleur uit een afbeelding nodig en niets anders volstaat — het exacte blauw in een logo, het grijs achter een knop in een screenshot, een tint in een foto die je wilt hergebruiken. Je oog kan geen hex-code van een scherm aflezen, en de kleur die er goed uitziet is meestal een paar cijfers verkeerd. Deze picker laat je een afbeelding laden, eroverheen bewegen met een vergrootloep die de pixels onder je cursor uitvergroot, en klikken om precies de gewenste op te slaan als staal — HEX, RGB en HSL alle samen getoond, elk met een kopieerknop.
Hij leest pixels lokaal in je browser vanaf een canvas: er wordt niets geüpload, er is geen account, en na de eerste keer laden werkt hij offline. Dat telt wanneer de afbeelding een nog niet uitgebrachte mockup is, een merkasset van een klant, of een intern screenshot. Het is een punt-bemonsteraar — elke klik leest één pixel, wat precies goed is voor een schoon logo of platte UI, en iets meer zorg vergt op een ruizige foto. Wil je liever dat de dominante kleuren van een hele afbeelding automatisch voor je worden getrokken, dan is de aparte palet-tool daarvoor; deze is om naar een specifieke pixel te wijzen en zijn waarde te nemen.
Waar mensen het voor gebruiken
Herstel de exacte kleur van een merk uit een oud logo wanneer de specificatie weg is
Match een knop of kop aan de kleur in een screenshot van een site die je bevalt
Trek de primaire, accent- en tekstkleuren van een logo in één keer
Pak een tint uit een foto om als achtergrond of accent te gebruiken
Lees de echte schermkleur van een halftransparant element uit een screenshot
Kopieer een kleur als HSL zodat je die kunt lichter of gedempter maken voor een hover- of variantstaat
Wanneer je de exacte kleur nodig hebt, niet een kleur die dichtbij is
Je bouwt een merk opnieuw op en de enige referentie is een oud logo. Je stemt een knop af op een screenshot van een site die je mooi vindt. Je zag een tint in een foto en wilt hem in je eigen ontwerp gebruiken. In elk geval is het probleem hetzelfde: je oog kan geen hex-code van een scherm lezen. "Dat groenblauw" zijn eigenlijk een dozijn licht verschillende groenblauwen, en monitoren verschuiven ze verder. Je hebt het getal nodig dat de pixel daadwerkelijk bevat.
Dat is wat deze tool doet. Laad een afbeelding, beweeg eroverheen, en een vergrootloep volgt je cursor en toont de pixels eronder, uitvergroot zodat je op precies degene kunt landen die je wilt. Klik, en die kleur wordt opgeslagen als staal. Elk staal toont zijn HEX-, RGB- en HSL-waarde met een kopieerknop naast elk, zodat je rechtstreeks van een pixel in de afbeelding naar een code op je klembord gaat.
De afbeelding verlaat je machine nooit. Pixels worden lokaal in de browser van een canvas gelezen — er wordt niets geüpload, er is geen account, en zodra de pagina geladen is blijft het werken met het netwerk uit. Dat is het punt wanneer de "afbeelding" een nog niet uitgebrachte mock-up is, de merkasset van een klant, of een interne screenshot die je niet aan een willekeurige webtool zou moeten geven.
Hoe het in de praktijk werkt
- De loep is voor precisie. Logo's en UI hebben harde randen waar de kleur over één enkele pixel verandert — anti-aliasing betekent dat de pixel ernaast een modderige menging is. De vergrote weergave laat je precies zien op welke pixel je zit voordat je het vastlegt, zodat je de vlakke merkkleur kiest en niet de rand.
- Elke klik houdt een staal. Samplen is niet één-tegelijk-en-weg. Klik rond in de afbeelding en elke kleur stapelt zich op in een lijst, zodat je de primaire van een logo, zijn accent, en de tekstkleur in één ronde kunt trekken en ze naast elkaar vergelijken.
- Drie formaten, één keer prikken. Elk staal toont HEX, RGB en HSL tegelijk. Je samplet niet opnieuw om van formaat te wisselen — dezelfde kleur zit er al in alle drie, elk met zijn eigen kopieerknop.
HEX, RGB, HSL — welke te kopiëren
Het zijn drie manieren om dezelfde kleur te schrijven, en de juiste hangt af van waar hij heen gaat.
- HEX (
#3A7BD5) is de standaard voor het web — CSS, de meeste ontwerptools, merkdocumenten. Compact en universeel plakbaar. Kopieer dit tenzij je een reden hebt om dat niet te doen. - RGB (
rgb(58, 123, 213)) schrijft de rode, groene en blauwe kanalen uit. Handig wanneer een tool kanaalwaarden wil, wanneer je een alpha nodig hebt (rgba), of wanneer je redeneert over hoe een kleur gemengd is. - HSL (
hsl(215, 65%, 53%)) beschrijft tint, verzadiging en lichtheid. Dit is degene om naar te grijpen wanneer je een kleur wilt aanpassen in plaats van hem alleen te hergebruiken — duw de lichtheid voor een hover-staat, verlaag de verzadiging voor een gedempte variant, houd de tint aan en bouw een schaal.
Eén eerlijke beperking, en een zustertool
Dit is een puntsampler: elke klik leest één enkele pixel. Op een schoon logo of vlakke UI is dat precies wat je wilt. Op een ruizige foto — korrel, verlopen, JPEG-artefacten — kunnen twee naburige pixels verschillen, dus kies uit een vlak gebied en gebruik de loep om te vermijden dat je op een uitschieter landt. Er is hier geen kwast voor het gemiddelde-van-een-regio.
En wil je helemaal niet met de hand prikken, dan heeft img.diy een aparte palette-tool die een hele afbeelding scant en je automatisch de dominante kleuren geeft. De twee beantwoorden verschillende vragen. De palette-tool vertelt je uit welke kleuren deze afbeelding bestaat; de kleurenkiezer laat je naar één specifieke pixel wijzen — deze exacte plek op het logo, die ene knop — en zijn waarde nemen. Grijp naar de palette-tool om een afbeelding samen te vatten, en naar deze wanneer je het punt dat je wilt al kent.
Laad een afbeelding, beweeg om de pixel te vinden, klik om hem te houden, kopieer het formaat dat je nodig hebt.
Waarom IMG.DIY
Vergrootloep
Zoomt in zodat je de exacte pixel aanklikt.
HEX / RGB / HSL
Elke opgeslagen kleur in drie formaten.
Kopiëren met één klik
Kopieer elke waarde direct naar het klembord.
Privé
Pixels worden lokaal gelezen — geen upload.