Matching a color from a photo or screenshot to your design — a brand color, a UI accent, a logo tone — usually means eyeballing it and guessing the HEX code, which rarely lands exactly right. A pixel-precise color picker solves this in seconds.
This guide covers how to pick a color from an image online for free and get its exact HEX, RGB and HSL values.
Key Takeaway: A browser-based color picker reads pixel data directly from the Canvas API, so the value you get is the exact color of that pixel — not an approximation.
Why Eyeballing Colors Doesn't Work
- Screens vary — the same color can look slightly different across displays, so visual guessing is unreliable
- Anti-aliasing — edges and gradients blend pixels together, so the "obvious" pixel might not be the one you actually want
- Design tools need exact values — CSS, Figma and Photoshop all require a precise HEX/RGB/HSL code, not an estimate
HEX vs RGB vs HSL — Which One Do You Need?
| Format | Looks like | Best for |
|---|---|---|
| HEX | #f472b6 | CSS, web design, most design tools |
| RGB | rgb(244,114,182) | Programmatic color manipulation, canvas/graphics code |
| HSL | hsl(330,86%,70%) | Adjusting lightness/saturation while keeping the same hue |
Tip: Use the magnifier loupe before clicking — it zooms in 4x so you can confirm you're landing on the right pixel, especially near edges or gradients.
Step by Step: How to Pick a Color from an Image
TinyPNG Now includes a free color picker that runs entirely in your browser.
- Open the Color Picker tool and drag in your image, or click to browse.
- Move your cursor over the image — the magnified loupe and live HEX/RGB/HSL values update as you move.
- Click the exact pixel you want to sample. It's added to your Picked Colors list.
- Click any HEX, RGB or HSL value to copy it straight to your clipboard.
Frequently Asked Questions
How do I get the exact HEX code of a color in a photo?
Upload the photo, hover over the exact pixel you want, and click it. The HEX value appears next to the live swatch — click it to copy it to your clipboard.
What color formats does the tool give me?
It shows HEX, RGB and HSL simultaneously for every color you sample, so you can copy whichever format your design tool or CSS needs.
Why does the magnifier loupe matter when picking colors?
The loupe zooms in 4x around your cursor so you land on the exact pixel you mean, which matters on small details like gradients, text edges or thin lines where neighboring pixels can differ noticeably.
Can I build a small palette from one image?
Yes — every color you click gets added to a Picked Colors strip below the image, so you can collect several colors from one photo and copy any of them afterward. For a full automatic palette, try the Color Palette tool.
Is my image uploaded anywhere to pick colors from it?
No. The tool reads pixel data directly from the Canvas API in your browser — your image is never sent to a server.
Summary: Open the free TinyPNG Now color picker, hover with the magnifier loupe, then click to capture the exact HEX, RGB and HSL — free, private, and instant.