Image Color Picker (Eyedropper)
Click on any pixel of an uploaded image to sample its color.
Written by Anil Gautam · Updated
How does the eyedropper turn a pixel into HEX and RGB?
Your image is drawn onto a canvas in the browser. When you click, the tool maps the click from the size shown on screen to the canvas size, reads that one pixel and reports it two ways. Both formats hold the same three numbers (red, green and blue, each from 0 to 255), and HEX writes them in base 16. So rgb(58, 123, 213) becomes #3a7bd5, because 58, 123 and 213 are 3a, 7b and d5 in hexadecimal.
The alpha channel is ignored, and a click on a fully transparent part of a PNG reports #000000, so sample from the visible artwork. Files with an embedded color profile, such as Display P3, are converted to sRGB as the browser draws them, and the numbers can differ slightly from an editor that works in the original profile. Copy HEX puts the code on the clipboard in lowercase even though the card shows capitals; CSS accepts both.
Why can a large image give a slightly different color?
Images wider than 720 pixels are scaled down to 720 pixels wide before you click, while narrower images keep their real size. A 4000 × 3000 photo is shown as 720 × 540, so each pixel you can click stands for an area about 5.6 pixels across in the original. On flat areas, such as a logo fill or a button background, the value matches the original. Near edges, text and fine texture, the scaled pixel blends neighboring colors.
For an exact value from a large screenshot, crop the part you need until it is 720 pixels wide or less and load that instead. Click in the middle of a flat area, away from anti-aliased edges, and compare a few picks. Recent picks keeps your last 12 distinct colors, and clicking one shows its codes again for copying. Screenshots from high-density displays are usually larger than the window they show: a browser window 1440 pixels wide captured on such a screen is often 2880 pixels wide, and the tool displays it at a quarter of that width.
Should you use the eyedropper or the palette extractor?
Use this picker when you need the value of one spot, such as a brand color in a logo or a button in a screenshot. When you want the overall scheme of a photo for a mood board or a theme, the Color Palette Extractor groups many pixels into 3 to 16 averaged swatches.