Image Color Picker

Upload an image and click anywhere to grab its color.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Reads the colour under your pointer out of any image you open — hover to preview it, click to keep it — and lists the last eight picks as matching hex and rgb() pairs.

How to use it

1Click or drag an image onto the drop zone; it is drawn onto a canvas underneath.
2Move the pointer across the picture — the hex and rgb() values below it update as you go.
3Click to save a colour to the list, then use the Copy button beside any entry to take its hex.

Example

Input: Click the middle of a solid #4f46e5 header bar
Output: #4f46e5 · rgb(79, 70, 229), added to the top of the picked list

The list is capped at eight and de-duplicated by hex, so clicking a colour you already hold moves it back to the front instead of adding it twice. Images wider than 900px are drawn at reduced scale, which means that on a photograph or a gradient you are sampling a resampled pixel rather than the original file's — flat areas of colour are unaffected.

What happens to your data

Browsers refuse to let a page read pixels back out of a canvas once an image from another origin has been drawn on it; this works precisely because your file never crosses an origin — it becomes a blob URL pointing at memory in your own tab, is decoded there, and is sampled a pixel at a time with getImageData. Only the hex and rgb strings of your eight picks are retained afterwards, and the image itself is released the moment you open another.

Last updated August 2026

Someone sends a logo as a flat PNG and asks for it in the right colour. A screenshot of a site you cannot open in developer tools has a background you need to match. A photograph of a painted wall has to become a value you can put on an order. The question underneath all three is a small one: what are the three numbers behind that pixel.

Decide first which of two jobs you have. Sampling a flat region — a solid header bar, a filled shape, a block of brand colour — gives an answer you can rely on, since every pixel there carries identical values. Sampling a photograph, a gradient or any textured surface does not: you are taking one pixel out of millions and its neighbour differs, so click across the area a few times and see where the readings settle.

Worth knowing too is what a hex value cannot carry: three channels and nothing else, no transparency and no colour profile. A translucent panel over white photographs as the blend, and the blend is what you read rather than the panel's own colour.

The common mistake is where people click. Anti-aliasing turns every boundary between two colours into a ramp of intermediate pixels, and small text is made almost entirely of them. Click deep inside a shape or on the thickest part of a stroke; an outline hands you a colour that exists nowhere in the design.

How it works

Toolvore draws your picture onto a canvas element inside the page and then asks that canvas for one pixel at a time. The pointer's position becomes canvas coordinates through the ratio between the displayed size and the size the image was drawn at, so a large picture shown shrunk to fit still samples the point you are over. The three bytes that come back are formatted twice, as two hex digits per channel and as an rgb() string. The weak spots follow from that mechanism. Nothing is painted behind the image before it is read, so a fully transparent area of a PNG reports as black rather than as whatever shows through on screen. Pixels arrive in the canvas's own colour space, which need not be the space the file was authored in, so a wide-gamut photograph will not return the numbers its editor displays. Only the first file of a drop is used, and the colours you collect are page state rather than storage, so a reload empties them.

Common use cases

Pulling the hex out of a logo sent as a flat image
Matching a background colour from a screenshot
Building a small palette from a photograph
Reading brand colours off a page exported as an image
Checking whether two screenshots use the same grey
Getting rgb() values for a CSS variable from a mockup
Sampling a paint or fabric colour from a photo

Frequently asked questions

How do I find the hex code of a colour in an image?＋

Open it in something that can read pixels back, point at the part you want and read the value — that is all any picker does. The choices that matter are about where you point. Aim well inside a solid region, keep away from edges and small text, and on anything photographic take several readings before believing one, since neighbouring pixels in a JPEG disagree by a few units. If what you need is the colour someone specified rather than the colour this file happens to hold, an image only gets you close; the brand document is the authority.

What is the difference between hex and rgb, and is one more accurate?＋

They are the same colour written two ways and neither is more precise. Hex is base sixteen with two digits per channel, so #4f46e5 means red 79, green 70, blue 229 — exactly what rgb(79, 70, 229) says. Both carry eight bits per channel in sRGB, both reach the same 16.7 million values, and CSS accepts either. The difference is habit and legibility: brand guidelines and design tools quote hex because it is one compact token, while decimal numbers are easier to reason about when you are nudging a single channel by hand.

Why does the colour I picked not match the brand colour I was given?＋

Several things sit between the value a designer typed and the pixel you sampled. JPEG discards colour detail in blocks, so an area that was flat no longer is. A screenshot taken on a scaled display is resampled, which blends neighbours. Anything rendered with opacity, a shadow, a gradient or a blend mode reaches the file as the mixed result rather than the ingredient you wanted. A reading a unit or two off the official hex usually means the file, not an error — where an official value exists, use that.

Can I pick a colour from a website or from anything on my screen?＋

Not directly: this reads image files, so whatever is on screen has to become one first, usually by taking a screenshot — and a screenshot captures the rendered result, including any opacity or filter applied on top. For a live web page, developer tools answer better, since inspecting an element shows the colour as it was declared rather than as it was painted. Operating systems also ship samplers that read anywhere on screen, such as the colour meter bundled with macOS. A page inside a browser tab has no such reach, by design.

Is my image uploaded anywhere when I pick colours from it?＋

No. The picture becomes a blob URL, a handle to memory inside your own tab, is decoded there, and every reading is taken from the copy the page drew for itself. Nothing is sent, and with no account there is nothing for a file to be attached to. Open a second image and the handle to the first is released; it goes again when you leave the page. The picked values are ordinary page state rather than saved preferences, so closing the tab loses them. That matters, because what people sample is often a screenshot of everything else on screen.

Why does a transparent PNG give me black?＋

Because transparency is not a colour and something has to be reported. A fully transparent pixel usually stores zeros in its colour channels alongside its zero alpha, and nothing is painted underneath the picture before it is sampled, so what comes back is red 0, green 0, blue 0. The white or grey behind the logo belongs to the page, not to the file. A part-transparent pixel behaves the same way: you read the colour it holds, not the blend your eye sees. If you need it as it appears over a background, flatten it in an editor and sample the export.

How do I get a full colour palette out of a photograph?＋

Nothing is extracted automatically here — every colour in the list is one you clicked, and the list holds eight. Chosen well, eight is plenty: the lightest area, the darkest, the dominant mid-tone and one or two accents that occupy a small part of the frame describe most photographs. Sample away from specular highlights, which are near white in any photo and say nothing about the subject. If you want the mathematically dominant colours instead, the result of clustering every pixel, that is a different job needing a tool built for it.

Does a colour picker work properly on a phone or tablet?＋

Less well than on a desktop. The live readout follows mouse movement, and a touchscreen has nothing to hover with, so what you see after touching the picture depends on how the mobile browser emulates mouse events rather than on anything built for touch. The real limit is precision: a fingertip covers far more pixels than a crosshair, and your finger hides the spot you are aiming at. If it has to be done on a phone, crop the image first so the region fills more of the screen, and leave anything near an edge until you are at a desktop.