image tool
Colour picker from image
Press anywhere on a picture and a magnifier follows, showing the pixels around your finger at ten times the size with the one you are on outlined, so you take the colour you meant rather than the one next to it.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Drop an image
It is decoded in this tab. Nothing is uploaded, and the picture is shown at up to 2400 pixels on its long side so the pixels you inspect are the real ones.
- 2
Press and slide
The magnifier follows your finger or your pointer and sits above the point, never under it, so your hand is not covering the thing you are trying to see.
- 3
Nudge to the exact pixel
With the image focused, the arrow keys step one pixel at a time and shift steps ten. That is the difference between the edge of a logo and the logo.
- 4
Copy, then compare
One tap copies the hex. Every pick is kept, and the two most recent are compared by delta E and by contrast ratio, which is how you tell two brand blues apart.
Why a magnifier and not just a click
A picture on a phone is displayed at maybe a third of its real size, so one screen pixel covers nine or more source pixels and a tap lands wherever it lands. The magnifier shows the grid of actual pixels around the point with the current one outlined, which turns a guess into a decision. It also makes the antialiased fringe around a letter or a logo visible, and that fringe is the single most common reason a picked colour comes out slightly wrong.
Sample size, and why one pixel is often the wrong answer
Photoshop has offered point sampling alongside three by three, five by five and larger averages for decades, and the reason is noise. A photograph of a red wall is not one red: sensor noise, compression blocks and lighting spread it over dozens of values, and any single pixel you land on is one sample of that spread. The default here is a five by five average, which cancels the noise. Switch to one pixel in advanced options when the image is flat artwork and you want the exact value.
The whole screen, when the browser allows it
Chromium based browsers expose an EyeDropper API that opens a system level picker and returns the colour of any pixel on your screen, including one in another window. When the browser has it, a second button appears and offers that. It is the only part of this page that reaches outside the tab, it still sends nothing anywhere, and it is hidden entirely in browsers that do not support it rather than failing when you press it.
Nothing is uploaded, and nothing is stored
The file is decoded by your browser and read back from a canvas in this tab. No network request is made after the page loads. Your history of picks lives in the page and disappears when you close it. That matters when the picture is an unreleased design, a screenshot with a customer name in it, or a client photograph you would rather not hand to a website.
Limits
- A canvas reads decoded pixels. An image tagged with a wide gamut profile such as Display P3 can report values a colour managed editor shows differently, so check anything brand critical against the source file.
- Very large images are drawn at 2400 pixels on the long side, so a pick on a huge scan is the average of a few original pixels.
- Averaging is done in linear light, which is the true mean of the light those pixels emit. A tool that averages the encoded numbers instead will read very slightly darker.
- The whole screen option needs a browser that supports the EyeDropper API, which is Chromium based ones today.
What it does not do
- It does not edit the image. The image colour changer replaces colours.
- It does not build a palette from the whole picture. The palette extractor does that.
- It cannot read a pixel from another site, because a cross origin image would lock the canvas.
Questions people ask
Why does the picked colour differ from Photoshop?
Two reasons. A browser canvas reads the decoded pixel without applying an embedded ICC profile the way a colour managed editor does, so a Display P3 or Adobe RGB file can genuinely report different numbers. The second is sample size: Photoshop may be set to point sampling while this page averages five by five. Set the sample to one pixel and compare again.
How do I hit an exact pixel on a phone?
Press and slide rather than tapping. The magnifier appears above your finger, so you can see the target while you move, and the value updates live. Lift when the outlined cell is the one you want. On a keyboard, focus the image and use the arrow keys, which move one pixel per press and ten with shift held.
What does the sample size actually do?
It averages a square of pixels centred on your point instead of reading one. Five by five reads twenty five pixels and cancels the noise and compression artefacts in a photograph, which is why it is the default. On flat artwork, a screenshot or a logo there is no noise to cancel, so one pixel is the honest answer and gives you the exact value.
Why compare two picks by delta E?
Because the difference between two hex codes tells you nothing about whether anyone can see it. Delta E is a perceptual distance where roughly one unit is the smallest change a person can notice, so a pair at 0.8 is effectively the same colour and a pair at 12 is plainly two colours. The contrast ratio next to it answers a different question: whether one works as text on the other.
Can I pick a colour from a website?
Not by pasting a link, because a browser locks a canvas that has loaded an image from another origin and refuses to let a page read pixels from it. Take a screenshot and drop that in instead. In a Chromium browser you can also use the whole screen option, which reads any pixel on your display without involving this page at all.
Does it handle transparency?
Yes. When the pixel under the magnifier is not fully opaque, the alpha value is shown next to the coordinates, and the advanced options include a copy button that gives you the value as rgba. Bear in mind that the colour you see on screen is that pixel composited over whatever is behind it, not the value itself.
Is my image uploaded?
No. It is decoded by your browser and drawn onto a canvas in this tab, and there is no network request after the page loads. There is no account, no storage and no server involved. Close the tab and the picture and every colour you took from it are gone.
Use this colour in a deck
Take what you made here into presentations.
Create a presentation with OneCraftRelated tools
- Palette extractorCluster a photograph in CIE Lab and get the colours it is made of, each with its share of the pixels and a suggested design role. Runs in your browser.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
- Image colour changerTap a colour in the image, pick its replacement, and see a mask of exactly which pixels change. Runs on your device, so the artwork is never uploaded.
Written and checked by the OneCraft team. Last checked .