Run this tool instantly in your browser. No signup and no server-side processing.

Image Color Picker

Click any point on an image to sample and copy exact HEX/RGB color values.

Drop image or click to upload

File: Sample image

Position: (0, 0)

Picked Color

#000000

rgb(0, 0, 0)

OutputText

HEX: #000000
RGB: rgb(0, 0, 0)
Position: (0, 0)

:root {
  --picked-color: #000000;
}

Image Color Picker: complete usage guide

Pick exact pixel colors from images and capture HEX/RGB values with coordinate context for design QA and development handoff.

It lets you click image pixels on a canvas to sample exact color values.

It reports HEX, RGB, and sampled coordinate positions.

It supports uploaded files and generated sample image workflows.

It exports a copyable output block plus downloadable color card image.

Image source

uploaded PNG/JPG or sample image

Pick action

click point (x, y) on canvas preview

Color sample

pixel at (184, 96)

HEX

#3B82F6

RGB

rgb(59, 130, 246)

Coordinate report

Position: (184, 96)

Picked color differs from expected display color

Check image scaling and color profile differences.

Wrong pixel selected

Zoom in or pick again with precise cursor placement.

Output resets after clearing

Copy values before resetting or switching image sources.

File upload rejected

Use supported image types under size limits.

Expected palette extraction from one click

Use dedicated extraction tools for multi-color palettes.

Start with a minimal input for Image Color Picker and verify baseline behavior first.
Make assumptions explicit: encoding, delimiter strategy, and timezone.
Change one variable at a time and compare output diffs.
Keep one verified output snapshot as a team reference.

Confirm Image Color Picker output is deterministic across repeated runs with identical input.
Check boundary inputs (empty values, long fields, invalid characters).
Remove sensitive data before sharing output externally.
Verify final rendering on both desktop and mobile viewports.