Image Color Picker
Pick colors from any image by clicking a pixel. A magnifier shows exact pixels, and you get HEX, RGB and HSL values plus a history of picked colors.
Runs entirely in your browser. Your data is never uploaded.
Related Tools
View AllWhat is Image Color Picker?
Upload or paste an image and click any point to read the exact color of that pixel as HEX, RGB (or RGBA when semi-transparent) and HSL. A magnifier shows the pixels around the cursor, X/Y fields let you target an exact pixel, and every picked color is kept in a clickable history.
How to use Image Color Picker
- Drop, choose or paste an image (a screenshot pasted with Ctrl+V works well).
- Move the pointer over the image to see the magnified view, then click to pick a color.
- Or type exact X and Y pixel coordinates.
- Click a HEX, RGB or HSL value to copy it; reuse earlier colors from Picked colors.
Example
40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
When to use Image Color Picker
Use it to match a brand color from a logo or screenshot, sample colors from a photo for a design, or check the exact color of a UI element. Note that JPEG compression and anti-aliasing change pixel colors slightly, so sample flat areas rather than edges. To get a whole palette at once, use Image Color Palette.
How Image Color Picker works
The image is drawn on a canvas at its full resolution and its pixels are read once with getImageData. A click is mapped from screen coordinates to image pixel coordinates, and the RGBA value at that index is converted to HEX and HSL (hue in degrees, saturation and lightness in percent). The magnifier redraws an 11×11 pixel neighbourhood without smoothing.
Common Use Cases
- Finding the HEX code of a brand color in a logo.
- Sampling a color from a website screenshot to reuse in CSS.
- Checking whether two UI elements really use the same color.
- Collecting colors from a photo for a mood board.
Security Note
Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.
FAQs
Why does the color differ slightly from what I expected?
Lossy formats like JPEG and smoothing on edges alter pixel values. Pick from the middle of a flat area, or use the X/Y fields to choose an exact pixel.
Does it work with transparent images?
Yes. Semi-transparent pixels are shown as rgba() with their alpha value; the HEX value shows the RGB part.
Can I pick colors outside the browser?
No, only from the image you load. Take a screenshot and paste it with Ctrl+V to pick from anything on your screen.