Image color picker
Drop in a photo or paste a screenshot, move over it, and read the color under the pointer. A loupe magnifies the pixels so you can see exactly what you are about to take, and you can average a small square instead of one pixel, which is what a photograph usually needs. Nothing is uploaded: the picture is read in your browser and stays on your device.
Drop an image here
Or paste a screenshot, or choose a file. Nothing leaves your device: the picture is read in your browser and never uploaded.
Why one pixel is usually the wrong answer
Pick a single pixel out of a photograph and you often get a color that is visibly not the one you were aiming at. That is not the tool being imprecise. It is the file.
JPEG stores brightness at full resolution and color at a quarter of it or less, because the eye notices detail in brightness far more than in hue. It then compresses in blocks, which leaves faint ringing around every edge. The result is that a patch of sky that looks perfectly flat is made of pixels differing by several levels in each channel, and which one you land on is decided by where your hand stopped.
Averaging a small square fixes it, which is what the size control does. Twenty-five pixels is enough to step over the noise without reaching into whatever is beside your target, and a hundred and twenty-one is right for a large flat area like a wall or a sky.
The exception is a screenshot. An interface screenshot holds exact values rather than photographic noise, so a single pixel is precisely the design's own color and averaging would only smear a border into it. That is the case where one pixel is the right setting, and it is why the tool asks rather than choosing for you.
One thing no color picker can fix: the color in the file and the color on your screen are not necessarily the same. Your display has a profile, and the browser has transformed the image through it before you saw anything. What you get here is what the file says, which is what you want for a code you are about to write into CSS.
Common questions
- Is my image uploaded anywhere?
- No. The file is read by your own browser, drawn into a canvas there, and the pixels are measured on your device. Nothing is sent to a server, which also means it works with the network off and that a screenshot of something confidential stays confidential.
- How do I get the color code from a picture?
- Drop the image on this page, paste it from your clipboard, or choose a file. Move the pointer over the picture and the color under it is read live, magnified in a loupe so you can see the individual pixels. Click to keep it, then copy the hex, RGB, HSL or any of the other notations.
- Why does the color I picked look different from the color I see?
- Usually because you sampled one pixel of a photograph. JPEG stores color at lower resolution than brightness and leaves ringing around edges, so neighbouring pixels in what looks like flat sky can differ by several levels. Sampling an average of a small square instead is what the size control is for. The other cause is your display profile: what you see has been through a color transform that the file itself does not carry.
- Which sampling size should I use?
- 1 pixel: Exactly what is under the cursor. Right for screenshots and flat graphics, where the color is a single true value and averaging would blur an edge into it. 5 by 5: The average of 25 pixels. A good default for photographs: enough to step over JPEG noise without crossing into whatever is next to your target. 11 by 11: The average of 121 pixels. For large flat areas like sky or a painted wall, where the thing you want is the overall color rather than any one point in it.
- Can I pick a color from a screenshot?
- Yes, and it is the case a single pixel is right for. A screenshot of an interface holds exact values rather than photographic noise, so set the size to one pixel and what you take is precisely what the design used. Paste straight from the clipboard: there is no need to save the file first.
- What is the difference between this and the palette extractor?
- This picks one color you choose. The palette extractor looks at the whole image and works out the five or six colors it is built from, assigning each a role. Use this when you know which color you want and need its code; use that when you want a scheme out of a photograph.
- Can I pick a color from my screen, outside an image?
- Yes, where the browser allows it. Desktop Chrome, Edge and Opera expose an EyeDropper API that samples any pixel on your screen - another app, another window, another tab - and on those browsers this page shows a "Pick from your screen" button that uses it. You aim, you click, and the one pixel you chose comes back as a code; nothing is captured or uploaded, and pressing Escape cancels. Firefox and Safari do not support the API, so the button simply does not appear there - take a screenshot and paste it into this page instead, which works everywhere and adds the loupe and averaging the API lacks.