Image Color Picker
Upload an image and click anywhere on it — with a magnified zoom for precision — to grab that exact color's HEX, RGB, and HSL code, and build a palette as you go.
How to Pick a Color from an Image
- Click the upload area or drag in a JPG, PNG, or WebP image.
- Move your cursor over the image — a magnified zoom circle follows your cursor so you can land on the exact pixel you want.
- Click to sample that pixel. Its swatch, HEX, RGB, and HSL values appear below the image, and it's added to the palette strip.
- Click "Copy" next to any value format to copy it, or click a palette swatch to copy its HEX code.
Frequently Asked Questions
How accurate is the picked color?
It reads the exact pixel value from the full-resolution image data using the canvas getImageData() method, not an approximation from the on-screen scaled preview - your click coordinates are mathematically converted back to the image's real pixel grid first.
Does it show the alpha (transparency) value of the pixel?
No - only the RGB color channels are shown as HEX and RGB values. If you click a fully transparent area of a PNG, you'll still get a color reading (typically the underlying pixel color), just without any transparency information.
Can I pick colors from a JPG, or only PNG?
Any of JPG, PNG, or WebP works - the tool draws whatever you upload onto an internal canvas and reads pixel data from it, regardless of the original file format.
Why does the tool show HEX, RGB, and HSL instead of just one format?
HEX and RGB are exact, unambiguous representations of a color that most design and code tools accept directly, and HSL (hue, saturation, lightness) is often more intuitive for adjusting a color by eye - since different tools and codebases prefer different formats, showing all three directly copyable saves you from converting by hand.
What is the palette for, and how many colors can it hold?
Every pixel you click gets added as a small swatch to the palette strip below the picker, so you can sample several colors from the same image without losing earlier picks. It holds up to 20 swatches - click any one to copy its HEX code instantly, or click "Clear Palette" to start over.
What does the magnifier show when I hover over the image?
A zoomed-in circular preview of the pixels directly under your cursor, magnified several times over with a crosshair on the exact pixel that will be picked - this makes it much easier to land on a precise pixel, especially in small or detailed areas of an image.
Is my image uploaded anywhere to sample colors?
No. The whole picker works locally: the image is drawn to a hidden canvas in your browser and pixel data is read with JavaScript, without any network request.