HEX-kleur uit Afbeelding halen

Wat deze pagina doet en waarom hex de hoofdrol krijgt

Deze pagina laat je een afbeelding van je apparaat uploaden, waarna je met je muis over de pixels beweegt of erop klikt om de exacte kleur van één pixel te bepalen. Het resultaat verschijnt direct als hexadecimale code – de compacte, web-native notatie die in CSS en designsoftware de standaard is. In tegenstelling tot de zusterpagina’s die RGB-functionele notatie of HSL tonen, staat hier het hex-formaat centraal: zes cijfers (of de korte driecijferige variant) zonder haakjes of extra syntaxis, klaar om direct in color, background-color of andere CSS-eigenschappen te plakken.

Een hex-code zoals #1E90FF is in veel opzichten de primaire kleurwaarde voor webontwikkeling. Waar RGB en HSL andere modellen zijn die ook hun nut hebben, is hex het meest compacte en meest gebruikte formaat in CSS. Daarom is dit de pagina die je kiest wanneer je een kleurwaarde nodig hebt die je meteen kunt gebruiken – zonder dat je nog omzettingen of aanpassingen hoeft te doen.

Pixel voor pixel: hoe de sampling werkt

Wanneer je een afbeelding laadt in een ondersteund formaat (PNG, JPG, WebP, GIF, AVIF of HEIC), wordt de afbeelding op het scherm gezet. Het gereedschap berekent meteen de kleur van de middelste pixel en toont de hex-waarde, samen met RGB en HSL. Je ziet ook de afbeeldingsafmetingen (breedte × hoogte) en de pixelcoördinaten (x, y) van die pixel.

Beweeg je muis over de afbeelding, dan verandert de sampler pixel-voor-pixel mee. Voor extra precisie is er een ingebouwde loep: een vergroot weergave van het gebied rond de aanwijzer helpt je om exact de pixel te kiezen die je nodig hebt. Dat is vooral handig in gebieden waar anti-aliasing of compressie kleine kleurverschillen introduceert.

Klik op een pixel, en de kleur wordt opgeslagen in een geschiedenislijst (maximaal 12 items). Daarbij verschijnt de melding “Opgeslagen ‹hex› in je picks.” Je kunt de geschiedenis later doorlopen: door op een kleurstaal te klikken wordt die waarde opnieuw geladen. Kleuren met exact dezelfde RGB-waarden maar verschillende alpha worden apart opgeslagen – ook al is hex notatie geen alpha kanaal, de tool onthoudt het verschil.

Toetsenbordnavigatie voor wie geen muis wil gebruiken

Voor toegankelijkheid en precisie kun je ook met het toetsenbord werken. Met de pijltjestoetsen verplaats je een vizier over de afbeelding, pixel per pixel. Houd je Shift ingedrukt terwijl je een pijltjestoets gebruikt, dan spring je 10 pixels tegelijk. Met Enter of Spatie bevestig je de huidige pixel en sla je hem op in je picks. Dit is niet alleen handig voor mensen die geen muis kunnen gebruiken, maar ook voor situaties waarin je extreem precies een bepaalde pixel wilt aanwijzen zonder dat trillende handen of een onnauwkeurige cursor roet in het eten gooien.

De uitvoer: HEX, RGB, HSL en alpha

De drie getoonde kleurmodellen hebben elk hun eigen toepassing:

Wanneer een pixel semi-transparant is, geeft de tool een extra regel: “Alpha ‹n›% — deze pixel is gedeeltelijk transparant.” Hex kent geen alfanotatie in de zescijferige vorm (daarvoor is er de achtcijferige #RRGGBBAA notatie, maar die gebruikt deze pagina niet). Het alpha percentage wordt apart vermeld, zodat je kunt bepalen of die pixel al dan niet geschikt is voor een effen kleurtoepassing.

Je kunt elk getoonde kleurwaarde kopiëren door erop te klikken. De tool probeert de waarde naar het klembord te schrijven. Als de browser dat blokkeert, verschijnt de melding: “Copy mislukt — je browser heeft toegang tot het klembord geblokkeerd.”

Randgevallen en beperkingen die je moet kennen

Geen enkel hulpmiddel is perfect, en deze pagina geeft eerlijk aan waar de grenzen liggen.

• Ondersteunde bestandstypen: PNG, JPG, WebP, GIF, AVIF, HEIC. Als je een onbekend formaat probeert, krijg je: “Dit bestandstype wordt niet ondersteund. Probeer een PNG, JPG, WebP, GIF, AVIF of HEIC afbeelding.”
• Corrupte of onleesbare bestanden: Als de afbeelding niet geopend kan worden, verschijnt: “Deze afbeelding kon niet worden geopend. Ze is mogelijk beschadigd of in een niet-ondersteund formaat.”
• Grote afbeeldingen: Beelden waarvan de langste zijde 4096 pixels overschrijdt, worden automatisch verkleind. Dat betekent dat de pixelwaarden die je uitleest afkomstig zijn van de verkleinde versie, niet van het origineel. Voor extreem grote afbeeldingen is het dus verstandig om eerst een uitsnede te maken.
• Compressie en anti-aliasing: Bij JPEG’s, maar ook bij PNG’s met veel compressie of bij schermafbeeldingen, kunnen pixelwaarden subtiel afwijken van wat je met het blote oog ziet. Een ogenschijnlijk egaal vlak blijkt vaak te bestaan uit pixels met kleine kleurverschillen. De tool toont exact de pixelwaarde zoals die in het geheugen zit.
• Transparantie: Bij een semi-transparante pixel wordt alleen de kleur van die pixel zelf getoond, niet wat er eventueel achter zit. Als een pixel bijvoorbeeld 50% doorzichtig rood is, zie je #FF0000 met “Alpha 50%”, maar niet het rood gemengd met een achtergrondkleur. Dat is belangrijk om te begrijpen: de tool leest de exacte pixelwaarde uit de afbeelding, niet de visuele mix die je op het scherm ziet.
• Geschiedenislijst: Maximaal 12 kleuren worden bewaard. Overtollige items worden niet automatisch verwijderd; je kunt opnieuw beginnen met de "Start opnieuw" knop, die de afbeelding wist en de geschiedenis leegt.

Wie heeft dit nodig?

De primaire doelgroep zijn ontwerpers en ontwikkelaars die kleuren uit referentieafbeeldingen willen halen voor UI-ontwerp of CSS. Denk aan het overnemen van een exacte kleur uit een logo, screenshot of foto voor een nieuw project. Ook contentmakers die paletten maken voor branding, miniaturen of sociale media zullen baat hebben bij het snel kunnen vastleggen van een hex-waarde.

De pagina is bewust simpel gehouden: geen accounts, geen uploads naar een server (alles draait in de browser), geen gedoe met meerdere tools. Je uploadt een afbeelding en meteen heb je de kleuren in handen. Doordat hex de primaire uitvoer is, is de drempel voor webgebruikers minimaal.

Veelgestelde vragen

Kan ik ook een afbeelding met een transparant kanaal (PNG) gebruiken?

Ja. Als een pixel gedeeltelijk doorzichtig is, zie je dat als “Alpha ‹n›%.” De hex-waarde blijft de kleur van die pixel zonder alpha; het alpha percentage staat apart. Onthoud dat je de pixelwaarde krijgt, niet de mengkleur met een achtergrond.

Hoeveel kleuren kan ik opslaan in de geschiedenis?

Maximaal 12. Daarna moet je de geschiedenis leegmaken of een andere manier vinden om kleuren te bewaren. Je kunt altijd op een opgeslagen kleur klikken om die opnieuw te laden.

Wat als ik per ongeluk de verkeerde pixel aanklik?

Klik gewoon opnieuw. Elke klik overschrijft geen eerdere opslag, maar voegt een nieuwe kleur toe aan de geschiedenis (tot de limiet is bereikt). Je kunt ook de “Start opnieuw” knop gebruiken om alles te resetten.

Krijg ik dezelfde kleur als ik de afbeelding opnieuw laad?

Ja, zolang het bestand identiek is. Maar let op: als de browser de afbeelding na upload opnieuw comprimeert (bijvoorbeeld bij bepaalde formaten), kan dat de pixelwaarden beïnvloeden. Het gereedschap werkt met de weergegeven versie van het bestand, niet met het originele bestand.

Waarom zie ik andere kleuren dan in Photoshop of andere software?

Verschillende programma’s kunnen kleurbeheer (ICC-profielen) anders interpreteren. Deze tool gebruikt de ruwe pixelwaarden uit het geheugen zoals de browser ze weergeeft, zonder kleurcorrectie. Als je absolute kleurnauwkeurigheid nodig hebt, gebruik dan een gecalibreerd scherm en controleer de waarden in beeldbewerkingssoftware.

Kan ik een hex-code direct gebruiken in CSS?

Ja. Een code als #1E90FF kun je zonder aanpassingen zetten in eigenschappen zoals color: #1E90FF; of background-color: #1E90FF;. Zorg wel dat de code exact zes tekens is (of drie voor korte notatie) en voorzien van een hekje.

Praktische werkwijze voor het beste resultaat

• Gebruik een onbewerkt PNG-bestand voor de meest accurate pixelwaarden; JPEG’s hebben compressie-artefacten die kleuren kunnen vervormen.
• Bij schermafbeeldingen: schaal ze niet eerst in software – de tool doet dat zelf als ze groter zijn dan 4096 pixels.
• Wil je een kleur uit een foto gebruiken, neem dan meerdere samples van verschillende pixels in hetzelfde vlak, want door ruis of belichting kunnen ze verschillen.
• Gebruik de toetsenbordnavigatie voor het selecteren van exacte pixels in een spiegelende of overbelichte zone.

Deze pagina is een rechttoe-rechtaan hulpmiddel zonder franje. Geen registratie, geen analyse, geen opslag – alleen het ophalen van kleuren uit een afbeelding, in het formaat dat het web het beste kent.