Kleurcode van een afbeelding vinden

De exacte code van een kleur achterhalen is iets wat je in design constant nodig hebt: de kleur van een referentielogo nabootsen, het palet uit een inspiratiefoto halen, dezelfde kleuren aanhouden over alle uitingen van een huisstijl. Welke methode het handigst is, hangt af van de situatie — of je het bronbestand hebt, of de kleur in een online afbeelding staat, op een website of in een foto van je telefoon.

De formaten voor kleurcodes

Voordat we de methodes doornemen, is het handig om de formaten te kennen waarin kleuren digitaal worden weergegeven:

HEX en RGB bevatten dezelfde informatie in een andere notatie — je kunt altijd van het ene naar het andere omrekenen. HSL beschrijft een kleur in tint, verzadiging en helderheid, wat prettiger werkt als je handmatig bijstelt. CMYK is er puur voor drukwerk.

Methode 1: online kleuren extraheren (de snelste)

Wil je de dominante kleuren van een hele afbeelding weten — of juist één pixel nauwkeurig aanwijzen — dan is een online kleurextractor de kortste weg. Je uploadt de afbeelding en de tool haalt er automatisch de meest voorkomende kleuren uit, met de HEX-codes klaar om te kopiëren.

O Kleuren Extraheren van ImageTools analyseert elke foto of afbeelding en geeft de dominante kleuren terug met de bijbehorende HEX-codes. Alles draait in je browser — de afbeelding verlaat je apparaat niet.

1. Open de tool Kleuren Extraheren.
2. Upload de afbeelding of sleep het bestand naar het aangegeven vlak.
3. De tool haalt automatisch de meest voorkomende kleuren uit de afbeelding.
4. Klik op een kleur om de HEX-code te kopiëren.

Methode 2: de pipet van je browser (Chrome DevTools)

Staat de kleur die je zoekt op een website — in een achtergrond, een knop of een logo — dan heeft Chrome daar een ingebouwde tool voor.

1. Open de site in Google Chrome.
2. Druk op F12 (of klik rechts en kies "Inspecteren").
3. Klik in het DevTools-paneel op het cursoricoon linksboven (of druk op Ctrl+Shift+C).
4. Beweeg je muis over een element op de pagina — DevTools toont de CSS-eigenschappen, inclusief de kleuren in HEX of RGB.
5. Klik op het gekleurde vierkantje naast een kleurwaarde in het CSS-paneel om de visuele kleurkiezer te openen.

DevTools van Chrome heeft ook een ingebouwde Color Picker : klik je op het kleurvierkantje in het stijlenpaneel, dan opent een kiezer waarin je door het spectrum navigeert en de waarden in HEX, RGB, HSL en HSLA tegelijk ziet.

Methode 3: de pipet in Canva

Werk je in Canva en wil je een kleur oppikken uit een afbeelding die al in je ontwerp staat:

1. Selecteer het element waarvan je de vulkleur wilt wijzigen (tekst, vorm of achtergrond).
2. Klik op de kleur van dat element in het zijpaneel om de kleurkiezer te openen.
3. Klik in de kiezer op het pipeticoon (eyedropper).
4. Klik ergens op de afbeelding in het canvas om de exacte kleur van die pixel over te nemen.
5. De HEX-code verschijnt in het tekstveld van de kiezer.

Methode 4: de pipet in Photoshop en Illustrator

Photoshop

Open de afbeelding en kies het gereedschap Pipet (sneltoets: I). Klik ergens in de afbeelding — de opgepikte kleur verschijnt in het kleurvak in de gereedschapsbalk. Dubbelklik op dat kleurvak om de Color Picker te openen; de HEX-waarde staat rechtsonder in het venster.

Illustrator

Open het bestand, selecteer een object en klik daarna op de vul- of lijnkleur in de gereedschapsbalk. In de Color Picker die opent, staat de HEX-code in het onderste veld. Je kunt ook het gereedschap Pipet (sneltoets: I) gebruiken om een kleur ergens uit het canvas op te pikken.

Methode 5: browserextensie — ColorZilla

De extensie ColorZilla (beschikbaar voor Chrome en Firefox) zet een vaste pipet in je browser. Zodra die geïnstalleerd is, kun je:

• met één klik de kleur van elke pixel op elke site oppikken;
• de code meteen in HEX, RGB en HSL zien;
• de waarde met één klik kopiëren;
• een geschiedenis van je laatst opgepikte kleuren raadplegen.

Voor wie vaak kleuren van websites plukt, is dit de handigste oplossing — je hoeft niet elke keer DevTools te openen.

Methode 6: kleuren vastleggen met een app

Voor kleuren van fysieke objecten — een muur, een product, een verpakking — of van afbeeldingen op je telefoon zijn er aparte apps:

• Color Grab (Android) — richt je camera op een oppervlak en je krijgt de HEX-code in real time.
• Palette Cam (iOS/Android) — haalt het complete kleurenpalet uit foto's die je net maakt of uit je galerij.
• Canva (iOS/Android) — de pipet in Canva mobiel werkt op geïmporteerde afbeeldingen.

Wat je met de gevonden kleurcodes doet

Heb je de HEX-code eenmaal te pakken, dan gebruik je die meestal zo:

In CSS en webontwikkeling

Zet de code rechtstreeks in je stylesheet: color: #3ecf8e; of background-color: #3ecf8e;. Voor lichtere of donkerdere varianten werk je beter met HSL — de helderheid bijstellen is daar veel intuïtiever dan met de hand aan HEX-waarden sleutelen.

In Canva, Figma of Adobe

Plak de HEX-code in het kleurveld van welk element dan ook. Alle grote designtools accepteren HEX rechtstreeks.

Een compleet palet opbouwen

Met de basiskleur in de hand maakt Palet automatisch harmonische combinaties — complementair, analoog, triadisch en monochroom — met alle codes in HEX, RGB en HSL, klaar voor gebruik.

Voor drukwerk

Reken HEX om naar CMYK voordat je het bestand naar de drukker stuurt. Schermkleuren (RGB/HEX) en drukkleuren (CMYK) hebben een ander gamut — wat op je monitor identiek lijkt, kan gedrukt zichtbaar afwijken. Adobe Illustrator en Affinity Designer doen die omzetting automatisch bij het exporteren voor druk.

Waarom de opgepikte kleur soms net niet klopt

Eén ding om in het achterhoofd te houden: in foto's is een vlak zelden helemaal egaal van kleur. Wat eruitziet als één blauw vlak, bevat vaak tientallen subtiele variaties van pixel tot pixel, door belichting, JPG-compressie en ruis van de camera. De pipet pakt de exacte kleur van één pixel — en die kan net iets afwijken van het "algemene blauw" dat je eigenlijk zoekt.

Bij fotografische vlakken kun je beter een extractor gebruiken die de dominante kleur van een gebied berekent — zoals Kleuren Extraheren doet — in plaats van één pixel te prikken. Het resultaat is representatiever en bruikbaarder in je ontwerp.

Veelgestelde vragen