Click anywhere on an image to get its exact color as HEX, RGB, and HSL — free, instant, processed entirely in your browser.
JPG, PNG, and WebP supported
This tool works like the eyedropper in design software: upload a photo, screenshot, or design file, click any point on it, and get the exact color of that pixel as a HEX code, RGB values, and HSL values — with a copy button for each. It's built for web designers and developers who need to match a specific color from a reference image.
Every color you pick is added to a running history below the image, so you can build up a small palette from one photo without losing earlier picks. The image is read directly in your browser using the canvas API; it's never uploaded anywhere.
| Format | Example | Typically used in |
|---|---|---|
| HEX | #2E7D32 | CSS, design tools, most style guides |
| RGB | rgb(46, 125, 50) | CSS, canvas/graphics code |
| HSL | hsl(123°, 46%, 34%) | Adjusting shade/brightness intuitively |
How do I pick a color from a photo?
Upload the image, then click anywhere on it. The exact HEX, RGB, and HSL values of that pixel appear instantly, and get added to your pick history below so you can compare several colors from the same image.
Is this the same as an eyedropper tool?
Yes — this works like the eyedropper/color-picker tool in design software, but reads the color from an image you upload rather than anywhere on your screen.
Why does the picked color look slightly different from what I expected?
You're reading the exact value of a single pixel, which can include compression artefacts, anti-aliasing, or a shadow/highlight edge. Zoom into a flat, evenly-lit area of the color you want for the most representative pick.
Is my photo uploaded to a server?
No. The color is read directly from the image in your browser using the canvas API — the file is never transmitted anywhere.
What's the difference between HEX, RGB, and HSL?
HEX (#RRGGBB) is the compact code most used in CSS and design tools. RGB gives the same color as separate Red, Green, and Blue numbers from 0-255. HSL describes it as Hue, Saturation, and Lightness, which is often more intuitive for adjusting a color's shade.
Can I get the dominant colors of the whole image instead of one pixel?
Yes — for a full palette of the most common colors in an image with percentages, use our Image Color Analyzer instead. This tool is for picking one exact pixel's color.
Can I copy the color code?
Yes — every picked color has Copy buttons for HEX, RGB, and HSL, and every entry in your pick history keeps its own copy button too.