Pipette de couleur sur image

A common job: a client sends a logo as a PNG and nobody knows the exact brand colour. Drop the file here, zoom in with the magnifier on a flat area in the middle of the shape and click. The HEX value is what you paste into CSS, Figma or a slide template; RGB goes into most office apps; HSL is handy when you need a lighter or darker shade, because you only change the last number.

Avoid the edges. Anti-aliasing blends the logo colour with the background over one or two pixels, and in a JPG the compression adds noise around every edge. Pick a few points inside the shape: if they agree, that is the colour. In a test, an orange circle (#E4572E) saved by Chrome as a JPG at quality 80 kept every pixel more than 20 px inside the shape within one unit of the original. The ring 1 to 4 px from the edge held 1,001 different values among 1,456 pixels, some off by 55 in a channel.

Next to the picker the page lists up to 8 main colours of the whole image with the share of pixels each one covers. It uses median cut: the pixels of a copy scaled to 200 px on the long side are split again and again along the channel with the widest spread, and each final group is averaged into one colour. A four-colour test image comes out as exactly four entries at 25 % each.

For a photo, the result is a set of averaged tones, which suits a mood board or a background behind the picture. The "Copy all HEX" button puts the whole list on the clipboard, one code per line.

PNG, WebP, GIF and SVG files can be partly transparent. A pixel that is fully transparent is labelled as such and shown as #00000000; a half-transparent one gets an eight-digit HEX like #FF000080 and an rgba() value with its opacity. Transparent areas are left out of the palette, and the page tells you what share of the image they cover.

Values are read from the browser’s canvas, which works in sRGB, the colour space of CSS and most screens. Images with an embedded profile, such as Display P3 photos from iPhones, are converted to sRGB first. A test PNG tagged Display P3 stores the values 187, 105, 62; the picker reports 200, 100, 51 (#C86433), the same colour expressed in sRGB. A tool that ignores the profile would give #BB693E.

You can paste a screenshot with Ctrl+V (⌘V on a Mac) instead of saving it first. Without a mouse, Tab to the image, move the crosshair with the arrow keys (Shift moves 10 pixels) and press Enter to keep the colour. Supported files are JPG, PNG, WebP, GIF (first frame), BMP, AVIF and SVG up to 50 MB. Images above 40 megapixels are scaled down for picking, and the page says so.