🎨 Image Color Picker

Upload an image, then click anywhere on it to read the exact HEX and RGB color at that pixel. Everything runs locally in your browser.

What the click actually reads

The file is decoded and drawn to a canvas in this page; nothing is sent anywhere. Your click is turned into canvas coordinates and one pixel is read back with getImageData(x, y, 1, 1), giving four channel values: red, green, blue and alpha.

Red 58, green 123, blue 213 is printed as #3a7bd5 and rgb(58, 123, 213). Alpha is divided by 255 and shown to two decimals, so a fully opaque pixel reads 1.00.

The 700-pixel preview

Anything wider than 700 pixels is drawn scaled down to fit; narrower images are shown at full size and never enlarged. The coordinates in the result heading are canvas coordinates, so on a scaled image convert back with:

original x = canvas x × (image width / 700)

A 3000 px wide photo shrinks to 700, and a click at canvas x = 350 sits near x = 1500 in the original.

That downscale is a smoothed resample, so each preview pixel is a blend of several real ones. On a fine pattern or a hard edge the color you read may not exist anywhere in the source file. For an exact value, crop the area first so the region is shown at 1:1.

Frequently asked questions

How do I find the hex code of a color in a picture?

Choose the image, then click the spot you want. The hex, the rgb() string and the alpha appear above the preview with a swatch, and each row can be copied straight into CSS.

Why does the color differ slightly from the original image?

Large images are resized to a 700-pixel preview before you click, which averages neighbouring pixels together. Along edges and in dithered or JPEG-artefacted areas that shifts the value by a few points per channel.

What does the alpha number mean?

Opacity, from 0.00 for fully transparent to 1.00 for fully opaque. It only varies on formats that carry transparency, such as PNG, WebP and GIF; every pixel of a JPEG reads 1.00.