Color Picker from Image
Click any pixel in an image to get its HEX and RGB color.
Drop an image here, or click to upload
Click any pixel to read its color
This reads the exact colour of any pixel in an image without uploading it. The image is drawn to a canvas in your browser and the pixel under your cursor is read directly from the image data, returning its HEX and RGB values. Because it samples actual pixel values rather than estimating, what you get is the true colour recorded in the file — which is both its strength and the source of most confusion about the results. On flat-colour sources such as screenshots, exported logos and design mockups the sampled value is exactly right. On photographs it often is not, because sensor noise, JPG artefacts and lighting gradients mean two pixels in an apparently uniform wall can differ by several values per channel. The fix is to sample a few points across the region and take a middle value. Colours are read in the file's own space, so wide-gamut images may display differently elsewhere.
About the Color Picker from Image
Pick the exact color of any pixel in an image — for design inspiration, brand matching, or recreating a palette. Click anywhere on the image to read its HEX and RGB values, copy them in one click, and keep a small history of recent picks. Everything runs in your browser.
How to use the Color Picker from Image
- 01Drag and drop your image, or click to choose it from your device.
- 02Hover over the image to scan colors, then click to lock a pick.
- 03Copy the HEX or RGB value with the one-click Copy button.
- 04Use the recent palette to revisit the last colors you picked.
Why use our Color Picker from Image
- 01
Pixel-precise picking
Read the exact color of any pixel you click using the Canvas API.
- 02
HEX & RGB values
Get both formats side by side, ready to paste into your design tool or CSS.
- 03
Recent palette
The last colors you picked are kept in a small swatch row for easy reuse.
- 04
100% browser-based
Your image is decoded locally — nothing is uploaded to a server.
Why does the colour I picked look wrong?
Photographs are noisy. Two adjacent pixels in what looks like a flat area of a wall can differ by several values in each channel because of sensor noise, JPEG compression artefacts and subtle lighting gradients. Sampling one pixel gives you that pixel exactly, which may not represent the colour you perceive when looking at the region. This is why picking from a photograph often produces a value that looks wrong when applied as a flat fill. The practical technique is to sample several points across the area you care about and take a middle value, or to blur a copy of the image slightly before sampling so that local noise is averaged out. On flat-colour sources — a screenshot of a website, an exported logo, a design mockup — this problem disappears entirely, because those pixels genuinely are uniform, which is why colour picking is far more reliable on graphics than on photographs.
Compression, colour profiles and why values shift
Two effects commonly make a picked value differ from the colour someone else says the image contains. The first is JPEG compression, which stores colour information at reduced resolution — chroma subsampling means colour is often recorded at half the spatial resolution of brightness, so pixels near a colour boundary carry blended values that belong to neither side. Sampling near an edge in a JPEG therefore returns a colour that was never in the original. The second is colour management. An image tagged with a wide-gamut profile such as Display P3 or Adobe RGB stores values that mean something different from the same numbers in sRGB, and a canvas read returns the numbers after the browser has done whatever conversion it does. If you sample a brand colour from a P3-tagged photograph and it does not match the brand's published sRGB hex, this is usually why — and the published value, not the sampled one, is the correct answer.
Getting a usable palette out of an image
Building a palette from a photograph works best when you sample deliberately rather than opportunistically. Pick a dominant colour from the largest area, an accent from something saturated and small, and a neutral from a shadow or a highlight — three points chosen for their role rather than three points that happened to look nice. Sample away from edges to avoid compression blending, and away from specular highlights, which are closer to the light source's colour than the object's. Once you have raw values, they usually need adjusting: colours lifted straight from a photograph are frequently too desaturated or too dark to work as interface colours, because a photograph's colours exist in a context of surrounding tones that a flat swatch does not have. Treat picked values as a starting point to refine rather than a finished palette, and check any pair you intend to use as text on background against a contrast ratio requirement before committing.
How reliable is a picked colour?
| Source | Reliability | Why |
|---|---|---|
| Screenshot of a website | Very high | Pixels are genuinely flat |
| Exported logo (PNG) | Very high | Lossless, no artefacts |
| Design mockup | High | Flat fills, minimal noise |
| JPG photograph, flat area | Moderate | Sensor noise and compression |
| JPG photograph, near an edge | Low | Chroma subsampling blends colours |
| Wide-gamut photo (P3) | Low for brand matching | Values differ from sRGB |
For brand colours, always prefer a published hex value over one sampled from a photograph.
Frequently asked questions
Is my image uploaded anywhere?
No. The image is decoded and read in your browser via the Canvas API. Nothing is uploaded, stored or transmitted.
What is the difference between HEX and RGB?
They describe the same colour. HEX such as #3B82F6 is compact and common in CSS; RGB such as rgb(59, 130, 246) lists the red, green and blue channels directly.
Why does the picked colour look wrong when I use it?
Photographs are noisy, so a single pixel may not represent the region you perceive. Sample several points across the area and take a middle value.
Why does my sampled brand colour not match the official one?
Usually colour management. If the photo is tagged Display P3 or Adobe RGB, its numbers mean something different from sRGB. Trust the brand's published hex over a sample.
Can I pick colours from screenshots?
Yes, and screenshots are the most reliable source — their pixels are genuinely flat, with no sensor noise or compression blending.
Why are colours near edges inaccurate?
JPEG stores colour at lower spatial resolution than brightness, so pixels near a boundary carry blended values belonging to neither side. Sample away from edges.
Are my recent picks saved between visits?
No. The recent palette lives in memory only and clears when you close the tab.
How do I build a palette from a photo?
Sample a dominant colour from the largest area, an accent from something small and saturated, and a neutral from a shadow. Then refine — raw photo colours are often too muted for interface use.
Should I check contrast?
Yes, if the colours will be used for text. Sampled pairs frequently fail accessibility contrast requirements even when they look pleasant together.
Last updated
Pixel sampling via the Canvas API getImageData interface. Chroma subsampling behaviour follows the JPEG specification (ISO/IEC 10918); colour space notes follow the sRGB (IEC 61966-2-1) and Display P3 definitions.