Image Color Picker

What the Image Color Picker Does

It is an eyedropper for an image you upload. You click a spot on the picture and it reports the exact colour of that pixel in four formats at once — HEX, RGB, HSL and CMYK — each one a click away from your clipboard.

Unlike a swatch picker, it samples a real photo or graphic, so you can lift the precise colour out of a logo, screenshot, mockup or photograph.

How It Works

Your image is drawn onto an in-page canvas. When you click, the tool maps your click to the matching canvas pixel and reads that pixel's red, green and blue bytes straight from the canvas with getImageData, then converts them to the other formats.

It all runs in JavaScript on your device — the picture is never uploaded, and it works the same on a phone as on a desktop.

Processing pipeline

1. Upload an image. Drop or choose any image; it is drawn onto a canvas in your browser.
2. Click a pixel. The cursor becomes a crosshair — click anywhere on the image to sample that point.
3. It reads the colour. It reads that pixel's red, green and blue values straight from the canvas.
4. Copy any format. It shows HEX, RGB, an rgb() string, HSL and CMYK — click any value to copy it.

Privacy

Your image is drawn onto a canvas and read entirely in your browser — the pixel colours are sampled locally with no upload and no server copy.

Nothing is stored and there is no account; close the tab and the image leaves memory, so it is fine for private or unreleased artwork.

Technical Details

Standards & references

• Canvas getImageData (MDN) — reads pixel data from the canvas as red, green, blue and alpha bytes (0-255) in the sRGB colour space — the exact value this tool reports.
• EyeDropper API (Chromium 95+) — browsers' built-in eyedropper can sample any pixel on screen but is Chromium-only (no Safari or Firefox yet). This canvas-based tool instead works on an uploaded image in any browser.
• sRGB (IEC 61966-2-1) — the default colour space the canvas reads. An embedded wide-gamut (Display-P3) profile is not applied, so values are reported in sRGB.
• CMYK approximation — the CMYK percentages use a profile-free formula, the same as the other colour tools — a screen-to-print estimate, not colour-managed output.

Accuracy & Limitations

It reads a single pixel — a point sample, not an average of an area. On a JPEG-compressed, noisy or anti-aliased edge, neighbouring pixels can differ, so click the middle of a flat area for a representative colour.

For images up to 2000px on the longest side you get the exact source pixel. Larger images are scaled down for performance, so a picked colour is the displayed pixel — a close blend of nearby source pixels rather than the exact original byte.

The colour is read in sRGB. If your image carries a wide-gamut (Display-P3) profile, the canvas still reports sRGB values, so very saturated colours can read slightly differently from a colour-managed editor.

HEX, RGB and HSL are exact conversions of the read pixel. The CMYK percentages are a profile-free approximation for rough print reference, not colour-managed output.

Fully transparent areas read as black (0, 0, 0) because the canvas has no background behind them — click an opaque part of the image.

Real-World Use Cases

When to use it — and when not to

To pick from a swatch rather than an image, use the Color Picker. To pull a whole palette from an image automatically, use the Color Palette Extractor. To sample anywhere on screen, use a Chromium browser's built-in eyedropper or a desktop tool.

Frequently Asked Questions

References

• CanvasRenderingContext2D: getImageData() (MDN)
• EyeDropper API (MDN)

Related Tools