Tool

Image Color Picker

Drop in a photo, screenshot or artwork and click any pixel to read its exact color. A magnifier helps you land on the right one, and the whole image is distilled into a palette.

🎨

Drop an image, paste, or click to upload

PNG, JPG, WebP, GIF — everything stays on your device.

How to get a color's hex code from an image

Load an image three ways: drag a file onto the drop zone, paste one straight from your clipboard (Ctrl/Cmd+V after a screenshot), or click to browse — you can also paste a direct image URL. Move your cursor over the picture and a magnifier loupe follows it, showing the pixels around the pointer enlarged so you can land precisely on the color you want. Click to sample: the exact hex, RGB, HSL, HSV, CMYK and OKLCH values appear on the right, each with a copy button, alongside color harmonies built from the sampled color. Everything runs locally in your browser — the image is never uploaded.

An online eyedropper tool with no extension needed

Browsers ship a native eyedropper, but it only samples what's currently on screen and it isn't available everywhere. This image color picker works on any image you can drag, paste or link — a design comp, a photo, a competitor's screenshot, a moodboard — without installing a Chrome extension or opening an image editor. Alongside the single-pixel sample, it runs a median-cut analysis of the whole picture to pull out its dominant colors as a ready-made palette, so you can lift an entire color scheme from a reference image in one step, then click any swatch to inspect it in detail.

Image color picker use cases

Want the name of a color in a photo rather than just its code? Use color name from image. Once you've sampled a color, open it in the color picker for its full shade and harmony set, or feed it into the palette generator as a seed.

Getting an accurate sample from a photo

A single pixel in a photo is rarely "the" color of the object — lighting, shadows, JPEG compression and camera processing all shift it. For a reliable read, sample a few points across a well-lit, flat area of the subject and compare them; if they cluster, you have your color, and if they scatter, the object is more textured or unevenly lit than it looks. Avoid highlights (they skew toward white) and edges (they blend two colors). The magnifier loupe helps you stay off edges and specular spots. When you need the overall feel of an image rather than one exact spot, use the extracted palette instead — it averages large regions and is far more stable than any individual pixel.

Image color picker vs browser eyedropper vs extensions

The browser's built-in EyeDropper API samples anything currently painted on screen, which is great for grabbing a color from another tab or app — but it only works in some browsers, gives you a single hex with no other formats, and can't touch an image you haven't opened. A browser extension adds a persistent toolbar button but asks for broad permissions and only some support images. This page sits in the middle: paste, drag or link any image, get every format plus a palette and harmonies, and keep everything local with nothing installed. For the on-screen case, the color picker also exposes the native eyedropper where the browser supports it.

Image color picker FAQ

How do I get the hex code of a color in a picture?

Upload or paste the image, hover to line up the loupe on the pixel you want, and click. The hex code appears immediately on the right, along with RGB, HSL and every other format, each with a one-click copy button.

Is my image uploaded to a server?

No. The image is read and analysed entirely in your browser using the Canvas API — nothing is sent anywhere, so it works offline and with private or unreleased material.

Can it extract a full color palette from a photo?

Yes — as soon as you load an image, the tool runs a median-cut quantization to pull out its most prominent colors as a palette. Click any palette swatch to load it as the sampled color.

Does it work with a photo URL instead of a file?

Yes, paste a direct image link into the URL field. Note that some sites block cross-origin pixel access, in which case downloading the image and dragging it in will work.