Image Color Picker
Pick any color from an image with this free online eyedropper. Click any pixel to get HEX, RGB and HSL. Copy colors, keep a history of up to 12 picks. 100% browser-based.
Click, drop, or paste an image
🔒 100% browser-based · No upload to server · No signup
Pixel-Perfect Eyedropper
Click any pixel on your image to capture its exact color. The image is drawn to an offscreen canvas at full natural resolution (capped at 8192px per side for mobile safety), and ctx.getImageData reads the exact RGBA at the pixel you clicked.
HEX · RGB · HSL Output
Every pick is shown in three formats: HEX (#RRGGBB, uppercase), RGB (r, g, b — 0-255 each), and HSL (h, s%, l% — hue 0-360, saturation and lightness 0-100). One-click copy any format.
12-Color History
Your last 12 picks are kept in a history list — deduped by HEX so you never get repeats, most-recent first. Click any swatch to re-select it, or use its per-swatch copy button.
100% Private
Your image never leaves your device. All color picking happens in your browser using the Canvas API. No upload, no signup, no watermark. No download either — this is a picker, not an editor.
Is the color picker free?
Yes. 100% free, no signup, no watermark, no daily limit. Pick as many colors as you want from as many images as you want.
How does the eyedropper work?
When you upload an image, it is drawn to an offscreen canvas at its full natural resolution (capped at 8192px per side for mobile safety). When you click a pixel on the displayed image, the click position is mapped back to the image's natural pixel coordinates by scaling with (naturalWidth / displayedWidth) and (naturalHeight / displayedHeight). The canvas coordinates are then derived proportionally, and ctx.getImageData(x, y, 1, 1).data returns the exact RGBA at that pixel.
What color formats do I get?
Three: HEX (#RRGGBB, uppercase, e.g. #FF8A00), RGB (e.g. rgb(255, 138, 0) — 0-255 per channel), and HSL (e.g. hsl(32, 100%, 50%) — hue 0-360, saturation and lightness 0-100). Each format has its own Copy button.
How does the copy button work?
It uses navigator.clipboard.writeText when available, with an execCommand("copy") fallback for older browsers or non-HTTPS contexts. After copying, the button shows a "Copied!" state for 1.8 seconds. The per-swatch copy buttons in the history list work the same way.
How is the click position calculated when the image is scaled?
The displayed image element's bounding rect is read with getBoundingClientRect. The click position relative to that rect is scaled by (naturalWidth / rect.width) and (naturalHeight / rect.height) to get the natural pixel coordinates. Because the <img> element preserves aspect ratio under max-w-full and max-h constraints (no explicit width/height attributes), the bounding rect maps directly to the displayed image area — no letterboxing to account for.
Does my image leave my device?
No. All processing happens in your browser using the HTML5 Canvas API. Your image is never uploaded to any server. There is also no download — this is a picker, not an editor. The only output is the color values you copy.
Ready to try Image Color Picker?
Free, no signup, no watermark. 100% browser-based. Your image never leaves your device.
Start Now