Add your input
A browser-readable image and a point selected on its preview.
Design bench
Image color picker
Pull an exact color from a reference while keeping the picture private.
Privacy built inYour work stays with you
Choose a JPG, PNG, WebP, GIF, or other browser-supported image, then select any pixel.
HEX
#0EA5E9RGB
rgb(14, 165, 233)HSL
hsl(199, 88.7%, 48.4%)Your work stays private in your browser while you use this tool.
What does image color picker do?
Load a browser-readable image into a canvas and sample the displayed pixel you select. The sampled color is shown as HEX, RGB, and HSL for copying.
- Input
- A browser-readable image and a point selected on its preview.
- Result
- The sampled color in HEX and RGB.
- Price
- Free
- Account
- Not required
How to use image color picker
Choose your settings
Pull an exact color from a reference while keeping the picture private.
Save or copy
The sampled color in HEX and RGB.
A practical tip
Sample a small cluster of nearby pixels when compression noise makes a single pixel misleading.
When to use image color picker
Match a CSS accent to a pixel in a logo or supplied mockup.
Inspect the exact displayed RGB value of a background, icon, or screenshot region.
Sample a reference image before checking the resulting color pair for contrast.
Worked example
A concrete image color picker example
- Input
- A PNG containing a solid #14B8A6 area; select a pixel in that area
- Result
- The result is #14B8A6, rgb(20, 184, 166), and hsl(173, 80.4%, 40.0%). A semi-transparent sampled pixel would also retain alpha in the HEX value.
What to expect
How it works
The file is read as a data URL, decoded by the browser, scaled to fit within a 760 × 440 canvas, and drawn with Canvas 2D. Pointer coordinates are mapped into canvas coordinates and getImageData() reads the selected RGBA pixel. Keyboard activation samples the canvas center.
Know before using
Limits and edge cases
- Images larger than the preview bounds are resampled before selection, so a displayed pixel can be a blend rather than the exact source-file pixel.
- Files over 20 MB and formats the current browser cannot decode are rejected; the tool also does not average a region or expose the source image's embedded color profile.
Standards and sources
Common questions
Image color picker FAQ
Is image color picker free to use?
Yes. Image color picker is free to use.
Does image color picker keep my work private?
Yes. Your work stays private while you use the tool — nothing you enter is uploaded.
Why can a sampled color differ from an image editor?
The browser may color-manage and rescale the image before Canvas exposes its displayed sRGB-like pixel values. Large previews are explicitly reduced to fit, which can blend neighboring source pixels.
What does keyboard activation sample?
When the image button is activated without pointer coordinates, the tool samples the center pixel of the rendered canvas.