Image Color Picker

Read the colour at a point in an image, and take it away as HEX, RGB or HSL.

Runs on your deviceImagesWorkingNo account needed

What this tool does

Image Color Picker decodes your file, draws it to a canvas at its natural size, and reads the pixel values straight back out at the point you name. You can take a single pixel, or average a 3 × 3 or 9 × 9 block around it — averaging is steadier on photographs, where one pixel carries sensor noise and compression artefacts that the eye never registers.

The thing worth knowing before you start is that there is no click-to-pick eyedropper here, and the page never puts the picture in front of you at all — the canvas it draws on lives in memory, so there is nothing to hover over. You type a coordinate instead, either as a percentage of the image or as pixels counted from the top-left corner, and a point outside the image is refused with the real dimensions quoted back at you. To make aiming blind workable, the tool also reads an even grid of points across the whole picture by default — five per side, adjustable from two to twelve — so one run returns a map of the image rather than a single guess.

All of it happens inside this browser tab: the image is decoded and sampled locally, nothing is transmitted, and the tool keeps working with the network off. That local decoding also sets the boundaries. JPG, PNG, WebP, GIF, BMP and SVG are read directly and AVIF works on recent browsers, while HEIC photos straight off an iPhone, TIFF scans, PSD and camera RAW files are turned away with a note saying why, because no browser ships a decoder for them. The numbers are the ones the browser produces from its own decode, so a wide-gamut file with an embedded profile need not match what a colour-managed editor shows.

How to use it

  1. Choose one image. A single file per run. JPG, PNG, WebP, GIF, BMP and SVG are read directly; AVIF needs a recent browser, and HEIC or TIFF is refused.
  2. Say where to read. Give X and Y as a percentage — 50 / 50 is the centre whatever the size — or switch to pixels counted from the top-left corner.
  3. Decide how wide a sample to take. A single pixel is exact. The 3 × 3 or 9 × 9 average smooths over grain and JPEG blotching on photographs.
  4. Keep or drop the grid. Left on, it reads an even n × n set of points across the image, five per side by default and up to twelve. Switch it off to read only your own point.
  5. Take the results. Your point is summarised as HEX, RGB, HSL, alpha and a closest colour name. Every point lands in a CSV, and the first twenty-five are drawn onto a PNG swatch sheet.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Matching a colour from a logo or a screenshot

A brand sends a PNG and no hex value. Read the middle of a flat area and you have the number the design file would have told you.

Rebuilding a mockup in CSS

Sample the header, the body background and the accent, then paste the HSL values straight into your stylesheet where they are easier to tweak by hand.

Checking whether a flat area is actually flat

Run the grid over a background that should be one colour. Banding, a gradient or compression damage shows up as several different hex values instead of one.

Reading a colour with no design software to hand

On a borrowed or locked-down machine there is often no image editor at all, and this needs nothing beyond the browser already open.

Questions

Is my image uploaded?
No. Image Color Picker decodes and samples the file in this browser tab, so nothing is transmitted, logged or stored — which is why it still works with the connection dropped.
Why can't I click on the picture to pick a colour?
The canvas is never shown on the page, so there is nothing to click: the point is typed in, as a percentage or in pixels. The grid exists to make that practical — it reads the whole picture in one pass, so you can find the shade you were after in the table instead of aiming a second time.
What does the closest name column mean?
Each colour is measured against a short list of thirty-five common names and the nearest is reported. It is a label to describe the shade with, not a precise match; the hex value is the real answer.
How is transparency handled?
Alpha is averaged along with the three colour channels and shown as a percentage beside the result for the point you named. It is not one of the table columns, so the grid rows carry no alpha figure of their own. The hex value itself carries no alpha either, which is why a fully transparent pixel reads as #000000 at 0% — check that percentage before trusting a colour lifted from a transparent region.
How many points can the grid read?
Two to twelve per side, so up to 144 samples. All of them appear in the results table and the CSV, while the on-page swatches and the downloadable PNG sheet show the first twenty-five.
How is this different from Extract Palette or Dominant Color?
This one answers what is at a position you chose. Extract Palette clusters the colours of the whole image into a scheme, and Dominant Color returns the single most prominent shade. Use this when the location is the point.

Related tools