Image color picker: click a pixel, read the code
Click a pixel, read the code. The image color picker shows the color you clicked as HEX and as RGB, and it scans the whole picture for up to eight common colors. You can match a button to the logo in a screenshot, read the exact blue of a chart you exported as an image, or find the sky color in a photo so a text overlay fits.
How the eight swatches are chosen
The tool does not count every pixel. It samples about 10,000 of them, skips pixels that are mostly transparent and rounds each channel to steps of 16. Then it counts the groups and shows the eight most frequent ones. That removes noise, but a swatch can differ from a real pixel by up to 8 per channel. For an exact value, click the image itself. A click reads one pixel at the original size of the file, even though the preview is limited to 400 pixels in height. In a noisy photo, two neighboring pixels can differ by several steps, so click twice if a value looks off. A very large image takes a moment, because the whole picture is read once for the palette.
From file to clipboard
- Click the drop area or drag an image onto it. The file picker accepts any image type your browser can open; PNG, JPG and WebP are the safe choices.
- Click a point on the picture. The large preview box shows the color, and the HEX and RGB fields fill in.
- Press the copy button next to HEX code or RGB code to put the value on your clipboard.
- Click a swatch in the palette to make it the current color. This also copies its HEX code.
- Press Another image to start again with a new file.
The file stays in this tab
A FileReader loads the file, and the browser draws it on a canvas. The tool reads the pixels from that canvas with getImageData. Opening an image or clicking a color sends no request, which the network panel of your developer tools shows. The clipboard is used only when you press a copy button or click a swatch. Selection works by click only, with no hover preview. The tool shows HEX and RGB, with no HSL and no alpha value.