FREE WEB TOOL

Pick HEX and RGB Colors from an Image

Click a point in an image to sample its HEX and RGB color.

Choose an image

đź”’ Images and text are processed in this browser and are not uploaded.

How to use it

Open an image and click the point whose color you want to inspect. The result shows HEX, RGB and an approximate source-image coordinate, making it useful for matching design colors or sampling a specific visual detail.

  1. Choose one image.
  2. Click the point in the preview whose color you want.
  3. Review the HEX and RGB values; use Copy result when you want the HEX code on your clipboard.
Output
HEX / RGB / source coordinate
Copy
HEX code
Large images
Images above 40 megapixels are not accepted
Transparency
Alpha is not reported

Pick a logo blue and reuse it in CSS

If clicking the blue area of a logo returns #315EE8, copy that HEX value into CSS or a design tool. The RGB channels and approximate source location are shown as additional reference.

Large images are reduced for the on-screen preview before sampling. On thin edges or anti-aliased areas, the sampled preview color may not be identical to one original source pixel. Crop around the target area first when pixel-level precision matters.

Click the exact visual area you care about

This is a point sampler rather than a dominant-color or average-color tool. It works best when you already know which object, line or background area you want to inspect.

HEX is ready for common design workflows

The copied value is the HEX code, which is convenient for CSS, Figma, Canva and many other design tools. RGB is shown alongside it for workflows that use channel values.

Edges can contain blended colors

Text smoothing, image compression and resized previews can make a boundary pixel different from the flat color you expected. Click slightly inside a solid area when you want the intended design color.

Opacity is outside the result

The picker reports red, green and blue but not alpha. It cannot tell you the transparency percentage of a semi-transparent pixel.

Source coordinates help you relocate the point

The displayed source coordinate is useful when you want to open the original image in another editor and find roughly the same location again.

Related references: Image formats