What is Eyedropper workflows?
Screenshots passed through desktop apps or online tools that upload your image just to read one pixel — slow, and a privacy leak for screenshots.
Color Picker from Image
Pick colors from an image as HEX or RGB
Preparing the tool…
The tool could not be loaded. Check your connection and try again.
Color Picker
Click or use arrow keys on the image to pick an exact pixel color.
Drop an image here, or press Enter to browsePNG · JPG · WEBP · AVIF · HEIC — up to 20 MP / 25 MB
- RGB
- Alpha
- X
- Y
Colors are read from the decoded image into an sRGB canvas for display. No network requests are made.
How to pick a color from an image
Open your image
Drop a PNG, JPG or WebP onto the page — it loads locally.
Click a pixel
Click or tap the pixel (or nudge with arrow keys) to lock in the exact color under the cursor.
Copy the value
Copy the HEX code straight into your CSS — the RGB value and alpha are shown to read directly.
Frequently asked questions
How do I pick a color from an image?
Drop or open your image, then click or tap the pixel you want (arrow keys also move the selection). The exact color is sampled from the canvas and shown as HEX, RGB and alpha.
Is the sampled color exact or averaged?
It is the exact pixel value from the decoded image at 1:1 zoom. If the preview is zoomed out, some browsers smooth pixels — zoom in for pixel-precise sampling.
Which formats can I load?
PNG, JPG, WebP, GIF and BMP — whatever your browser can decode. Animated GIFs are sampled from the first frame.
Are my images uploaded anywhere?
No. The image is drawn to a local HTML canvas and sampled with JavaScript on your device. There is no upload and no account.
Pixel sampling on canvas
Here is what each format is for, and when converting image pixels into color codes is the right move.
What is Canvas sampling?
The image is decoded to an sRGB canvas in your browser and read pixel-by-pixel with getImageData. Colors come back instantly as HEX and RGB with full alpha preserved.
When you need it
Use it to match a brand color from a logo, reuse a shade from a screenshot, or check what color an anti-aliased edge really is. For multi-color palettes instead of single pixels, try the color palette tool.