Je hebt een afbeelding en je hebt er één getal uit nodig: de hex-code van een specifieke kleur. Misschien is het een logo waarvan de merkspecificatie allang weg is, een screenshot van een site waarvan je het blauw wilt matchen, of een foto met een tint die je zou willen hergebruiken. Typen wat je denkt dat de kleur is werkt niet — je oog kan #3A7BD5 niet van een scherm aflezen, en de kleur die goed oogt is meestal een paar cijfers ernaast. Zo lees je de werkelijke waarde direct van de pixels.
Waarom gokken nooit helemaal werkt
Eén "blauw" op het scherm is eigenlijk een spreiding van bijna-identieke blauwen, en de helderheid en kalibratie van je monitor verschuiven ze verder. Kies op het oog en je landt dichtbij maar verkeerd — dicht genoeg dat de mismatch vervelend maar niet duidelijk is, dus je verspilt tien minuten met je afvragen waarom de knop niet bij de header past. De oplossing is stoppen met gokken en het getal lezen dat de pixel daadwerkelijk opslaat.
Krijg de code in drie stappen
De betrouwbare manier is de pixel direct bemonsteren met een kleurenkiezer.
- Laad de afbeelding. Sleep het logo, screenshot of de foto erin waar je uit haalt.
- Beweeg naar de exacte pixel. Een vergrootloep volgt je cursor en blaast het gebied eronder op, zodat je op een harde rand kunt zien welke pixel de vlakke merkkleur is en welke een anti-aliased mengsel van twee.
- Klik om op te slaan, kopieer dan. Elke klik bewaart de kleur als een staal met zijn HEX, RGB en HSL, elk met een eigen kopieerknop. Klik op de HEX en hij staat op je klembord.
Land op de juiste pixel
De loep telt meer dan het klinkt. Waar een kleur een andere ontmoet — een letter tegen een achtergrond, de rand van een icoon — zijn de pixels ertussen anti-aliased: een verzachte mengeling van de twee kleuren, geen van beide. Bemonster daar en je krijgt een troebele waarde die nergens bij past. Mik op een vlak gebied een paar pixels binnen de vorm, waar de kleur solide is, en de ingezoomde weergave laat je bevestigen dat je erop zit voordat je klikt.
Op een schoon logo of vlakke UI is dit makkelijk — de kleur is uniform over een breed gebied. Op een foto vergt het meer zorg, want korrel en compressie betekenen dat naburige pixels echt verschillen. Kies uit een rustig, gelijkmatig belicht gebied en neem een paar monsters om te controleren of ze overeenkomen.
HEX, RGB of HSL — pak wat past
Elk staal geeft je alle drie tegelijk, zodat je kopieert wat je bestemming wil:
- HEX (
#3A7BD5) — de webstandaard. CSS, Figma, Canva, merkdocumenten. Kopieer dit tenzij je een reden hebt om dat niet te doen. - RGB (
rgb(58, 123, 213)) — kanaalwaarden, nuttig wanneer een tool erom vraagt of je transparantie nodig hebt viargba. - HSL (
hsl(215, 65%, 53%)) — tint, verzadiging, lichtheid. Het best wanneer je de kleur wilt aanpassen: hem oplichten voor een hover-status, dempen voor een variant, of er een schaal van bouwen.
Omdat elk staal alle drie draagt, bemonster je nooit opnieuw alleen om van formaat te wisselen.
Meerdere kleuren tegelijk pakken
Een logo is zelden één kleur. Klik de primaire, het accent en de tekstkleur in één keer — elk stapelt zich op in de lijst zodat je ze kunt vergelijken en na elkaar kopiëren, in plaats van de afbeelding drie aparte keren te laden.
Wil je een kleursamenvatting van een hele afbeelding in plaats van specifieke pixels — het algehele palet waaruit een foto is opgebouwd — dan is dat een andere klus, en img.diy's aparte palettool extraheert automatisch dominante kleuren voor je. Gebruik deze kiezer wanneer je de exacte plek weet die je wilt; gebruik de palettool wanneer je de afbeelding voor je gekarakteriseerd wilt.
Het blijft op je apparaat
De afbeelding wordt lokaal in je browser van een canvas gelezen — er wordt niets geüpload, er is geen aanmelding, en na de eerste keer laden werkt het offline. Dus een onuitgebrachte mockup of de privéasset van een klant verlaat nooit je machine alleen omdat je er één hex-code uit nodig had.
Laad de afbeelding, beweeg naar de pixel, klik, en kopieer de code.