Image Color Picker
Sample exact pixel colours from an image and read them as HEX, RGB, and HSL values.
Browser onlyYour data never leaves this device.
Sampling runs entirely in your browser. The image and the pixels you read are never uploaded, stored, or logged.
Details: Privacy policy
Input
Drop files here or Browse
Drag and drop works here too.PNG, JPEG, WebP, or GIF up to 20 MB. Drag and drop or browse.
Colours are read pixel by pixel from the decoded image in this browser. The image is not resized or re-encoded for sampling, so the values match the source file exactly.
Result
No image yet.
Choose an image, then click it or use the keyboard to sample exact pixel colours.
Image Color Picker reads single pixel values straight out of an image you choose: click the picture to sample a colour and get its HEX, RGB, and HSL notations, or focus the image and step pixel by pixel with the arrow keys. The magnifier shows a nearest-neighbour zoom of the sampling point, and the recent palette keeps the last twelve distinct colours with their coordinates. Samples come from the decoded image pixels, so a scaled preview still reports the source colour rather than the browser's on-screen interpolation.
How to use Image Color Picker
- Choose a PNG, JPEG, WebP, or GIF image up to 20 MB.
- Click the pixel you want, or focus the image and use the arrow keys plus Enter for exact single-pixel control.
- Copy the HEX, RGB, or HSL value, or download the whole recent palette as a text file.
What you get
- HEX, RGB and HSL values for the sampled pixel, including its alpha when the pixel is partly transparent.
- A recent palette of up to twelve distinct colours, newest first.
- A magnified, keyboard-navigable view, because one CSS pixel on a large image can cover several source pixels.
When to use Image Color Picker
- Match a brand or UI colour by sampling it from a logo, screenshot, or design export instead of guessing a hex code.
- Check the exact background or border colour of a design file before writing it into CSS.
- Collect several colours from one image into a palette list you can paste into a stylesheet or a design handoff document.
Frequently asked questions about Image Color Picker
Are the colours read from the original image or from the resized preview?
From the original. The decoded image is drawn into a canvas at its full pixel size and each sample reads one pixel from it, so the value is the source pixel value — not a blend from the on-screen scale.
How do I sample one exact pixel on a large photo?
Focus the image with the keyboard and use the arrow keys: each press moves the sampling point by one source pixel, Shift moves ten, and the magnifier shows a nearest-neighbour zoom so you can see which pixel is selected before copying its value.
Why does the HEX value sometimes have eight digits?
Eight digits include the alpha byte. When a sampled pixel is partly transparent the tool reports #RRGGBBAA and an rgba() value instead of hiding the transparency, so the colour you copy still matches the source.
Can I pick a colour from an animated GIF?
Only from the first frame. The browser decodes animated files to their first frame for drawing, and this tool samples what is drawn, so later frames are not available.
Tools related to Image Color Picker
- Color Blindness Simulator
Color blindness simulator to test UI designs, screenshots, and artwork under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
- Color Converter — convert any colour between HEX
Convert any colour between HEX, RGB, HSL, HSV and CMYK, with WCAG luminance.
- Contrast Checker
Check WCAG AA and AAA contrast for any text and background colour pair, with a fix suggestion.
- Image Cropper — cut any rectangle out of PNG
Cut any rectangle out of PNG, JPEG, and WebP images locally.
- Aspect Ratio Calculator
Reduce two dimensions to their simplest ratio, find the missing width or height, and check a size against a ratio.
- Base64 to Image — decode a data URL or raw Base64 string back into a
Decode a data URL or raw Base64 string back into a verified PNG, JPEG, WebP, or GIF image.
⚡Embed Image Color Picker on Your Site & Get Badge↓
Embed this in-browser tool into any blog, documentation, or dashboard. Includes an optional dofollow backlink badge to credit Tools Hub.
<iframe src="https://salaq.com/embed/image/image-color-picker" title="Image Color Picker — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Powered by <a href="https://salaq.com/tools/image/image-color-picker" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Image Color Picker on Tools Hub</a></p>Feedback
Send feedback about this tool (placeholder — feedback collection is not wired up yet).