Color picker from image

How to pick a color from an image

1. Drop an image on the box, click Choose an image, or copy a screenshot and press Ctrl+V (⌘+V on a Mac). No file handy? Try a sample picture loads a small illustrated landscape.
2. Move the pointer over the picture. The round loupe on the right magnifies the 19 × 19 pixels around the crosshair about eight times, and the bar below it shows the live color.
3. Click (or tap and lift) to keep that color. It is added to Picked colors and copied to your clipboard at the same time.
4. Copy the whole list as plain HEX codes or as CSS custom properties when you are done.

On a keyboard, tab to the image, steer the crosshair with the arrow keys (hold Shift to jump 10 pixels) and press Enter to pick.

Single pixel or an average?

Photos are noisy. Zoom into a "flat" blue sky and you will find neighbouring pixels that differ by 5 to 15 values per channel, thanks to sensor noise and JPEG compression. If you click one pixel you may land on an outlier.

The Sample size menu fixes this. "3 × 3 average" takes the mean of the nine pixels around the crosshair, "5 × 5" uses 25, and "11 × 11" uses 121. Use:

• 1 pixel for screenshots, logos, icons and flat UI, where every pixel of a shape is identical.
• 3 × 3 or 5 × 5 for product photos, skin, fabric and paint swatches.
• 11 × 11 to get the overall color of a textured surface such as a brick wall or a wooden floor.

Example: a JPEG of a teal mug

Three neighbouring pixels on a photographed teal mug might read #2F7F7A, #358581 and #2B7774. Each is a fair answer, but none is "the" color of the mug. Their average is #307E7A, and that middle value is the one to use if you want to match the mug rather than a speck of noise on it. The averaging options do this for you over 9, 25 or 121 pixels.

Your image stays on your device

The picture is decoded by your browser and drawn onto a canvas element on this page. Reading a pixel is a call to the canvas, not to a server. Nothing is uploaded, which also means the tool keeps working if you go offline after the page has loaded. Very large images are scaled so their longest side is 4,096 pixels, which keeps memory use reasonable on phones without visibly changing the colors.

File formats

Anything your browser can display works: JPEG, PNG, WebP, GIF (first frame), AVIF, BMP and SVG. iPhone HEIC photos open in Safari, which decodes them natively; Chrome and Firefox on Windows cannot decode HEIC, so share the photo as "Most Compatible" or export a JPEG first. We decided against bundling a several-megabyte HEIC decoder for everyone on every visit.

Why a picked color can look "wrong"

The HEX value is exactly what is stored in the file, but that is not always what you expected.

• White balance. A photo taken under warm indoor light makes a white wall come out cream, something like #F2E3C9. The picker reports the cream because that is what the camera recorded.
• Shading. The same red car can measure #B0161B on the lit side and #5E0B0F in shadow. Pick from a part of the object that faces the light evenly.
• Color profiles. Some phones save photos in Display P3. Browsers convert them to sRGB when drawing to the canvas, so very saturated reds and greens can be clipped slightly.

For real-world objects, the camera color identifier gives you a quick name, and the tip list there covers lighting in more detail.

What to do with the colors you pick

• Five or six picks from one photo make a palette. If you would rather let the computer choose the dominant colors, use palette from image.
• Paste a picked color into the color name finder to learn what it is called.
• Check text readability on a picked background color with the contrast checker.
• Convert a pick for print with HEX to CMYK.

FAQ

Can I pick a color from a website or another app?

Yes. Take a screenshot (Win+Shift+S on Windows, ⌘+Shift+4 on a Mac) and paste it here. In Chrome or Edge, the screen color picker can sample the screen directly without a screenshot.

Does it work on a phone?

Yes. Tap Choose an image to open your photo library or camera. Touch and drag to move the crosshair, and lift your finger to pick.

How many colors can I save?

The list keeps the 40 most recent picks for as long as the page is open. Copy them out before you close the tab.

Why is the background around my image gray?

It is a neutral #808080 gray on purpose. A colored or bright white surround changes how you perceive the colors in the photo.