Zo pik je kleuren uit een screenshot (2026)

Een screenshot is vaak het enige dat je hebt. Je kunt de CSS van de site niet openen, je kunt de app niet inspecteren, je hebt het ontwerpbestand niet — maar je ziet de kleuren op het scherm, en een screenshot bevriest ze tot een afbeelding die je kunt bemonsteren. Zo haal je er exacte kleurcodes uit.

Waarom een screenshot de eerlijke bron is

Wanneer je een gerenderde pagina of app screenshot, leg je de kleuren vast zoals ze daadwerkelijk verschijnen — nadat elke gradiënt, overlay en dekking is toegepast. Dat is vaak waarheidsgetrouwer dan de bronwaarde. Een kaart die is gedefinieerd als #000000 op 90% dekking over een grijze achtergrond is niet zwart op het scherm; het is een specifiek donkergrijs. De code inspecteren geeft je het recept; de screenshot bemonsteren geeft je de kleur die een gebruiker echt ziet. Wanneer je die look nabootst, is de screenshot wat je wilt aflezen.

Pik een kleur in drie stappen

1. Maak en laad de screenshot. Leg het scherm vast (of het gebied dat je wilt) en zet de afbeelding in de kiezer.
2. Zweef naar de pixel. Een vergrootloep volgt je cursor en vergroot het gebied eronder, zodat je precies kunt landen — zelfs op een dunne rand of een klein icoon.
3. Klik om op te slaan, dan kopiëren. Elke klik houdt de kleur als een staal met zijn HEX, RGB en HSL, elk met een kopieerknop. Kopieer het formaat dat je nodig hebt en plak het in je stylesheet of ontwerptool.

Screenshot-specifieke dingen om op te letten

Screenshots hebben eigenaardigheden die een kleurmonster kunnen verstoren, en ze zijn makkelijk te vermijden zodra je ze kent:

• Bewaar als PNG, niet JPEG. JPEG-compressie smeert kleuren licht uit, vooral bij randen en in egale gebieden, dus een bemonsterde waarde kan afwijken van de echte. PNG is lossless en houdt elke pixel exact — de meeste OS-screenshottools staan al standaard op PNG.
• Let op het zoomniveau. Een screenshot genomen op een browser- of OS-zoom anders dan 100% is geschaald, en schalen mengt naburige pixels. Voor het schoonste monster, leg vast op 100%.
• Vermijd randen en tekst. Anti-aliasing betekent dat de pixels langs een rand mengsels zijn, niet de echte kleur. Bemonster uit het midden van een egaal gebied — de loep helpt je zien dat je vrij bent van de wazige grens.
• Let op subpixel-tekstkleur. Zoom in op gerenderde tekst en je ziet kleurranden die niet de echte waarde van de tekst zijn. Pik kleuren uit vullingen en achtergronden, niet uit letterstreken.

HEX, RGB en HSL lezen

Elk staal toont alle drie de formaten tegelijk:

• HEX (#3A7BD5) — de standaard voor CSS en ontwerptools.
• RGB (rgb(58, 123, 213)) — kanaalwaarden, handig wanneer je rgba-transparantie nodig hebt.
• HSL (hsl(215, 65%, 53%)) — tint, verzadiging, helderheid, het best wanneer je de kleur wilt bijstellen in plaats van hem exact te kopiëren.

Je bemonstert niet opnieuw om te wisselen — dezelfde kleur staat er al in alle drie.

Pak een heel schema in één keer

Uit één screenshot kun je een heel kleurenschema herbouwen: klik de headerkleur, de knop, de link, de achtergrond, de gedempte tekst. Elk stapelt zich op in de lijst zodat je de volledige set in één sessie kunt trekken en ze op volgorde kunt kopiëren.

Wil je in plaats daarvan het algehele palet van een afbeelding voor je samengevat — het handvol dominante tonen — dan is dat een aparte klus, en de palettool van img.diy extraheert ze automatisch. Deze kiezer is voor het aanwijzen van een specifieke pixel in de screenshot; de palettool is voor het karakteriseren van de afbeelding als geheel.

Er verlaat niets je machine

Screenshots bevatten vaak dingen die je liever niet uploadt — een intern dashboard, een privéconcept, de nog niet uitgebrachte UI van een klant. Hier wordt de afbeelding lokaal in je browser van een canvas gelezen: er wordt niets ergens naartoe gestuurd, er is geen account, en het werkt offline na de eerste keer laden. Je krijgt de kleuren zonder dat de screenshot ooit je apparaat verlaat.

Maak de screenshot, zweef naar de pixel, klik en kopieer.