Kleur uit afbeelding halen

Wilt u weten welke kleur er in een logo, foto of screenshot zit? Upload de afbeelding, beweeg de muis naar de plek die u zoekt en klik. De kleurcode gaat meteen naar uw klembord, in het formaat dat u kiest: HEX, RGB, HSL, HSV of LCH. U installeert niets en de afbeelding verlaat uw computer niet.

Hoe haalt u een kleur uit een afbeelding

1. Upload een afbeelding. Sleep hem naar het venster of klik op “Bestanden bladeren”. De pipet werkt met JPG, PNG, WebP en GIF.
2. Kies een formaat. Bepaal boven de afbeelding in welke notatie u de kleur wilt kopiëren. Voor het web is HEX meestal handig, voor ontwerpprogramma’s RGB. De tool onthoudt uw keuze.
3. Beweeg naar de kleur. Bij de cursor verschijnt een vergrootglas met de omliggende pixels uitvergroot, en daaronder de kleurcode.
4. Klik. De code staat op het klembord en de kleur wordt opgeslagen onder Gekozen kleuren. Plak hem waar u hem nodig heeft.

Wilt u een andere afbeelding proberen? Sleep die gewoon boven op de huidige, of verwijder hem met het prullenbak-icoon.

Wat de online kleurenpipet kan

Een vergrootglas dat elke pixel toont

Een gewone pipet toont alleen de kleur onder de cursor, en de dunne rand van een letter raken wordt dan gokken. Ons vergrootglas vergroot een gebied van 11 × 11 pixels rond de cursor en omkadert de middelste. U ziet precies waar u op gaat klikken, nog voordat u klikt.

Zoomen tot op de losse pixel

Met de plus- en minknop, of door te scrollen met Ctrl ingedrukt, zoomt u tot 64 keer in. Zet het raster aan en de pixelgrenzen worden zichtbaar, zodat u bij iconen, pixel art of kleine tekst precies raakt waar u wilt.

Kleur uit het origineel, niet uit een miniatuur

Veel online tools maken de afbeelding eerst kleiner en lezen de kleur uit die verkleinde versie, waar naburige pixels in elkaar overlopen. Deze pipet werkt met de afbeelding op volledige resolutie (tot 4096 px aan de langste zijde), zodat u de echte kleur van de pixel krijgt.

Kopiëren met één klik

Geen tekst selecteren of cijfers overtypen. Elke klik op de afbeelding kopieert de code in het gekozen formaat. Heeft u dezelfde kleur ook in een andere notatie nodig? Het kleurdetail toont alle vijf formaten, elk met een eigen kopieerknop.

Palet met dominante kleuren

Zodra de afbeelding geladen is, zoekt de tool tot acht kleuren die erin overheersen en toont ze onder Dominante kleuren. Bijna identieke tinten worden samengevoegd, zodat u niet vijf varianten grijs in het palet krijgt, en doorzichtige delen van een PNG worden overgeslagen. Handig als startpunt voor een kleurenschema voor een website, presentatie of social media. Wilt u snel checken of de kleuren ook zonder tint genoeg contrast houden, gebruik dan de omzetting naar grijstinten.

Gekozen kleuren blijven in beeld

Elke kleur waarop u klikt, wordt opgeslagen onder Gekozen kleuren (de laatste 24). Zo vergelijkt u meerdere plekken in de afbeelding en komt u er later weer op terug. Op een groot scherm staat het kleurenpaneel direct naast de afbeelding.

Waarvoor gebruikt u een kleurcode uit een afbeelding

• Websites en apps: de klant stuurde het logo alleen als JPG en u heeft de exacte merkkleur nodig voor uw CSS. Wilt u er ook een versie met transparante achtergrond bij, gebruik dan de achtergrond verwijderen uit afbeelding.
• Grafisch werk en social media: de tekst op een post moet aansluiten bij de foto. Haal de kleur er gewoon rechtstreeks uit.
• Presentaties en documenten: stel de kleuren van een bedrijfslogo in PowerPoint, Google Slides of Canva in via HEX of RGB.
• Ontwerpcontrole: controleer op een screenshot of een knop in de app wel echt de kleur heeft die het ontwerp voorschrijft. Check daarna de afmetingen van geëxporteerde bestanden met de analyse van afbeeldingsafmetingen.
• Interieur en mode: u heeft een foto van een stof of muur en zoekt een vergelijkbare tint. De code is een goed startpunt bij het kiezen uit een verfstalenkaart.

Kleurformaten die de pipet teruggeeft

• HEX (#1373b6): de notatie voor HTML, CSS en de meeste ontwerpprogramma’s. Zie de MDN-documentatie (in het Engels) voor de korte en alfa-varianten.
• RGB (rgb(19, 115, 182)): het aandeel rood, groen en blauw, elk van 0 tot 255. Hoe additieve kleurmenging werkt, legt Wikipedia uit.
• HSL (hsl(205, 81%, 39%)): tint, verzadiging en lichtheid. Hiermee maakt u eenvoudig een lichtere of donkerdere variant.
• HSV: tint, verzadiging en waarde, zoals u die kent van de kleurenkiezer in Photoshop of GIMP. Het verschil tussen HSL en HSV legt Wikipedia (in het Engels) uit.
• LCH: een model dat aansluit bij hoe het menselijk oog kleur waarneemt. Wordt gekopieerd in de notatie die moderne CSS begrijpt (zie MDN-documentatie, in het Engels).

De kleurenpipet haalt de kleur uit uw afbeelding. Wilt u die verder aanpassen, naar andere formaten omzetten of bijpassende tinten zoeken, ga dan verder naar de kleurkiezer.

Veelgestelde vragen

Wordt mijn afbeelding naar een server geüpload?

Nee. De afbeelding wordt rechtstreeks in uw browser geladen en verwerkt, gaat nergens naartoe en er blijft niets van achter zodra u de pagina sluit. U kunt de pipet dus ook gebruiken voor interne bestanden of nog niet gepubliceerde ontwerpen.

Hoe vind ik de HEX-code van een kleur op een foto?

Upload de foto, laat het formaat HEX geselecteerd boven de afbeelding en klik op de plek met de kleur die u zoekt. De code, bijvoorbeeld #75dab2, staat meteen op uw klembord.

Waarom wijkt de kleur op een foto af van de werkelijkheid?

Een camera beïnvloedt kleuren door belichting, witbalans (in het Engels) en compressie. De pipet geeft precies de kleur terug die in het bestand is opgeslagen. Klik bij foto's daarom op meerdere plekken en vergelijk ze onder Gekozen kleuren. Mengt u op basis van de code verf voor een muur, beschouw de code dan als een richtlijn.

Werkt de kleurenpipet op mobiel?

Ja. Op een touchscreen tikt u op een plek in de afbeelding en de code wordt net als op een computer gekopieerd. Het vergrootglas bij de cursor wordt op mobiel niet getoond, dus zoom bij kleine details eerst in.

Wat is het verschil tussen HEX en RGB?

Beide notaties beschrijven dezelfde kleur. RGB drukt hem uit in drie getallen van 0 tot 255, HEX schrijft dezelfde getallen in het hexadecimale stelsel achter een #-teken. Zo is rgb(255, 87, 51) hetzelfde als #ff5733.

Hoe haal ik een compleet kleurenpalet uit een afbeelding?

Open het tabblad Dominante kleuren. Daar vindt u tot acht hoofdkleuren van de afbeelding, en met een klik op een van hen kopieert u de bijbehorende code.