Gratis op iOS

Hexcode van een kleur uit een foto of screenshot halen

Een hexcode als #3A7BD5 legt in zes tekens precies één schermkleur vast, en elke foto of screenshot bevat er duizenden. Het komt erop aan welke pixel je kiest: een egale plek, weg van randen en glansplekken, levert een code die je zonder omweg in CSS, Figma, Canva of PowerPoint gebruikt.

Kort antwoord

Open de foto of screenshot in Color Identifier vanuit je fotobibliotheek en sleep de kleurkiezer naar een egaal stuk van de kleur die je zoekt. De app leest precies die ene pixel uit en toont de hexcode, samen met RGB, HSB, CMYK en de dichtstbijzijnde kleurnaam; met Kopieer Hex staat de code op je klembord. Meet ter controle twee of drie pixels ernaast: liggen de waarden maar een paar stappen uit elkaar, dan zit je goed. Kleuren uit foto's kiezen hoort bij Pro; zonder Pro kun je het twee keer per sessie uitproberen, met naam en code verborgen.

Begin bij het juiste bronbestand

Werk waar het kan met het originele bestand. Een screenshot van een website of app is de schoonste bron: elke pixel heeft exact de kleur die op het scherm stond. Afbeeldingen die via WhatsApp, Instagram of e-mail zijn verstuurd, zijn opnieuw gecomprimeerd. JPEG-compressie smeert kleur uit over naburige pixels, waardoor hetzelfde vlak in het origineel #3A7BD5 en na het doorsturen #3C7AD2 kan opleveren.

Ook de route naar de app telt. Deel je een afbeelding vanuit een andere app via het deelmenu, dan wordt ze opnieuw als JPEG opgeslagen en kunnen pixelwaarden licht verschuiven. Wil je exacte codes uit een screenshot, open hem dan in de app zelf vanuit je fotobibliotheek.

Bij foto's van echte voorwerpen heeft de camera al keuzes voor je gemaakt: witbalans, belichting en eventuele filters verschuiven de getallen nog voor je iets aanwijst. De code beschrijft dan de kleur zoals die op déze foto staat. Prima voor een ontwerp dat bij het beeld moet passen, maar geen meting van het voorwerp onder ander licht.

Mik op een pixel, niet op een rand

De kiezer leest precies één pixel, dus waar je hem neerzet maakt uit. Kies het midden van een egaal vlak. In screenshots zijn de randen van tekst, iconen en lijnen afgevlakt (anti-aliasing): die pixels zijn een mengsel van voorgrond en achtergrond, en de code die je dan leest zit er ergens tussenin. De app heeft geen loep of zoomfunctie. Snijd bij kleine details de afbeelding eerst bij in de Foto's-app; het stuk dat je nodig hebt vult dan het scherm en is makkelijk te raken.

Vermijd op foto's glansplekken, schaduwen en structuur zoals stofweefsel, houtnerf of baksteen. Heeft het oppervlak een verloop, zoals een Hollandse wolkenlucht of een aangelichte gevel, bepaal dan welk deel je wilt: elk punt heeft zijn eigen code. Een paar metingen in hetzelfde gebied laten snel zien of de kleur stabiel is of ruis bevat.

De code gebruiken in CSS, Figma, Canva en Office

Kopieer Hex zet de code inclusief hekje op het klembord, bijvoorbeeld #94766C. In CSS plak je hem achter color of background-color, in Figma en Sketch in het hexveld van de vulling en in Canva in het hexveld van de kleurkiezer. Keynote, PowerPoint en Word accepteren de waarde in hun dialoog voor aangepaste kleuren; vraagt een programma alleen om rood, groen en blauw, gebruik dan Kopieer RGB.

Die knop geeft dezelfde kleur als R: 148, G: 118, B: 108; in CSS schrijf je dat als rgb(148, 118, 108). Elke regel op het detailscherm heeft daarnaast een eigen kopieerknop, ook voor HSB en CMYK. Werk je aan een huisstijl of moodboard, sla dan elke kleur op in de app in plaats van codes in een notitie te plakken: bewaarde kleuren houden hun codes en kun je delen als tekst met HEX, RGB, HSB en CMYK of als afbeelding.

Waarom de code een paar tekens kan afwijken

Twee metingen van dezelfde kleur verschillen vaak een klein beetje, en dat is normaal. Compressie, schalen en het kleurprofiel van de afbeelding veranderen losse pixels. iPhone-foto's worden bovendien vaak opgeslagen in de ruimere kleurruimte Display P3, terwijl de meeste webtools van sRGB uitgaan. Een verschil van een paar eenheden in één kanaal zie je met het blote oog niet.

Een grote sprong betekent bijna altijd dat je een ander deel van het beeld hebt geraakt: een rand, een schaduw of een reflectie. Schuif de kiezer een stukje op en meet opnieuw voordat je een waarde vastlegt voor een merkkleur of een stylesheet.

Zo lees je een hexcode

Een hexcode bevat dezelfde informatie als een RGB-waarde, alleen in het zestientallige stelsel: steeds twee tekens voor rood, groen en blauw. In #94766C is 94 het rood (148), 76 het groen (118) en 6C het blauw (108). 00 betekent geen licht, FF volle sterkte; daarom is #FFFFFF wit en #000000 zwart. De korte vorm #FA0 staat voor #FFAA00.

Voor het web en de meeste ontwerpprogramma's is HEX de standaard. RGB gebruik je waar een programma drie losse getallen vraagt, HSB als je helderheid of verzadiging met de hand wilt bijstellen, en CMYK alleen als vertrekpunt voor drukwerk, waarvoor je de drukker altijd om een proef vraagt. Het detailscherm toont de gekozen kleur in alle vier de notaties.

Drie voorbeelden uit de praktijk

De kleur van een knop op een website overnemen: maak een screenshot, meet midden in de knop en plak de code in je eigen CSS. Een tint uit een vakantiefoto gebruiken in een presentatie: snijd de foto bij, kies een rustig vlak en vergelijk twee of drie metingen. De huisstijlkleur uit een logo halen: toon het logo groot op het scherm, maak een screenshot en meet het vlak in plaats van de contour. Bestaat er een huisstijlhandboek, dan staat daar de officiële waarde en is je meting een controle.

Veelgestelde vragen

Kan ik de hexcode uit een screenshot halen?

Ja, en screenshots geven de betrouwbaarste codes omdat er niets opnieuw is gecomprimeerd. Open de screenshot vanuit je fotobibliotheek in de app en meet binnen een egaal vlak, niet op de rand van tekst of een icoon.

Waarom verandert de code als ik de kiezer een klein stukje verschuif?

De kiezer leest één pixel, en ook vlakken die egaal lijken bestaan uit net iets verschillende pixels. Kleine verschillen zijn normaal; grote betekenen dat je op een rand, een glansplek of een schaduw bent beland.

Is de hexcode uit een foto de echte kleur van het voorwerp?

Het is de kleur zoals die op die foto staat. Licht, witbalans en filters beïnvloeden de opname, dus de code klopt voor een ontwerp dat bij het beeld past, niet als meting van het voorwerp zelf.

Kan ik inzoomen om een klein detail te raken?

Niet in de app zelf. Snijd de afbeelding vooraf bij in de Foto's-app; dan vult het detail het scherm en raak je de juiste pixel makkelijker.

Wordt mijn foto ergens naartoe gestuurd?

Nee. Kleuren worden op je iPhone of iPad uitgelezen en benoemd, en je hebt er geen account voor nodig.

Hexcode van een kleur uit een foto of screenshot halen

Download Kleurherkenner om met je iPhone-camera of foto's de HEX-code uit een foto te halen.

Download in de App Store - gratis