Image Color Picker: kleurcode uit afbeelding halen

Laad de afbeelding in de Image Color Picker en klik op de plek waarvan je de kleur nodig hebt. De tool toont meteen de HEX-code, RGB-waarde en HSL-waarde van die pixel. Met ‘Kopiëren’ neem je de waarde over. Een klik op de zon in de voorbeeldafbeelding geeft #ffd166. In de HEX-code staan telkens twee tekens voor rood, groen en blauw (ff = 255, d1 = 209, 66 = 102). Daarom geldt: #ffd166 is rgb(255, 209, 102) en hsl(42, 100 %, 70 %).

Een kleurenpipet, ook wel kleurkiezer of eyedropper genoemd, leest de kleur op een bepaalde plek uit en geeft deze als kleurcode weer. Deze Image Color Picker is een online kleurenpipet voor afbeeldingen en werkt in je browser, ook op je telefoon. Je hebt geen app nodig. Op je telefoon tik je op een plek en sleep je met je vinger; het vergrootglas toont de pixels eronder. Met het toetsenbord verplaats je de selectie met de pijltjestoetsen met 1 pixel (met Shift met 10) en sla je de kleur met Enter op in de geschiedenis.

Nee. De afbeelding wordt in je browser op een canvas geplaatst en daar geanalyseerd. Er vindt geen upload of opslag plaats; ook de geschiedenis van gekozen kleuren blijft alleen in dit tabblad. Je kunt dit controleren op het tabblad Netwerk van de ontwikkelaarstools: bij het laden en klikken worden geen verzoeken verstuurd.

Maak een screenshot (Windows: Windows+Shift+S, Mac: Cmd+Shift+4 met Ctrl voor het klembord) en plak het met Ctrl+V (Mac: Cmd+V) in de tool. Klik daarna op de gewenste plek en kopieer de kleurcode. Zo haal je kleuren uit een website, app of game, zonder browserextensie.

Er zijn vier veelvoorkomende oorzaken. Ten eerste slaan JPG-afbeeldingen kleuren met kwaliteitsverlies op, waardoor aangrenzende pixels licht verschillen. Ten tweede kan de browser ingesloten kleurprofielen (bijvoorbeeld Display P3) omzetten naar sRGB, terwijl andere programma’s de ruwe waarde tonen. Ten derde toont een screenshot de kleur na de kleurverwerking van je scherm. Ten vierde verwerkt de tool afbeeldingen van meer dan 36 megapixel op een lagere resolutie. Stel voor foto’s daarom de middeling in op 3 × 3, 5 × 5 of 11 × 11 pixels. De tool neemt dan het gemiddelde van 9, 25 of 121 pixels rond de aanwijzer, in plaats van één afwijkende pixel uit te lezen. Voor egale kleuren, zoals in een logo, is ‘1 pixel’ de juiste keuze.

Laad de afbeelding; het palet verschijnt er direct onder. Je stelt 2 tot 12 kleuren in en ziet voor elke kleur de HEX-code en het aandeel in de afbeelding. Hiervoor leest de tool minstens 90.000 gelijkmatig verdeelde pixels (kleinere afbeeldingen volledig), slaat transparante pixels over en groepeert kleuren met de median-cut-methode. Bij foto's is het palet een benadering. Met ‘HEX-lijst kopiëren’ krijg je een lijst; met ‘CSS-variabelen kopiëren’ krijg je regels zoals --color-1: #08203a; voor een :root-blok, die je met var(--color-1) gebruikt.

Naast de kleurwaarden toont de tool de bijbehorende CSS-kleurnaam of, als er geen exacte overeenkomst is, de dichtstbijzijnde CSS-kleurnaam met de bijbehorende HEX-waarde. Voor #ffd166 is dat khaki (#f0e68c), dus slechts een benadering. De tool geeft geen RAL-, Pantone-, NCS- of CMYK-waarden. Een schermkleur hangt bovendien af van licht en camera. Controleer muurverf of lak daarom altijd aan de hand van een echt kleurstaal. HSV en CMYK voor een bekende kleur vind je in de Color Picker.

De tool berekent de WCAG-contrastverhouding van de kleur ten opzichte van wit en zwart. Normale tekst heeft minimaal 4,5:1 nodig (niveau AA), 7:1 is zeer goed (AAA) en voor grote tekst volstaat 3:1. Op #ffd166 bereikt zwarte tekst 14,56:1, witte tekst slechts 1,44:1. Voor twee willekeurige kleuren kun je het contrast controleren in de Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP en SVG, afhankelijk van wat je browser kan lezen. Bij GIF wordt het eerste frame geanalyseerd. HEIC en HEIF, zoals iPhones die opslaan, kunnen alleen in Safari worden geopend. Anders exporteer je de foto eerst als JPG. Bestanden mogen maximaal 40 MB groot zijn. Bij halftransparante pixels toont de tool ook de HEX-waarde met alfakanaal, bijvoorbeeld #ff000080. Volledig transparante pixels hebben geen kleur; de tool meldt dat.