Image Color Picker Pinpoint any pixel, copy HEX / RGB / HSL instantly

What is the Image Color Picker?

This free online tool helps designers, developers and marketers extract the exact color of any pixel from a photo, mockup or screenshot. Drag and drop an image, hover over any spot to see a live magnifier loupe zoom in on that exact pixel, then click to instantly copy the HEX, RGB and HSL codes and add the color to a palette you can build up and compare side by side.

🔒 Everything runs 100% locally in your browser. Your image is never uploaded to any server, keeping your files and privacy fully protected.

Who is this for?

• Designers & illustrators: quickly extract exact brand colors from a client's reference image, style guide or a competitor's screenshot.
• Marketers & presentation makers: pull the primary color from a company logo so your slides match the brand perfectly.
• Front-end developers: grab the HEX code you need for CSS directly from a UI mockup screenshot, no design software required.
• Photographers & artists: analyze the tonal palette of a photo as a reference for color grading.

What are HEX, RGB and HSL?

These are the three most common ways to represent a color: HEX (e.g. #4E8AB5) is the hexadecimal code used everywhere in web design; RGB describes a color by its red, green and blue values (0–255); HSL describes hue, saturation and lightness, which often matches how humans intuitively think about color. Learn more at Wikipedia: Web colors.

How to use it

1. Drag an image into the upload area, or click Choose Image to browse your files.
2. Move your cursor over the image — the magnifier updates in real time to show the exact color underneath.
3. Click to copy the HEX code automatically and add it to the palette below; every swatch can be copied individually as HEX, RGB or HSL, or removed.

Frequently Asked Questions

Q1: Is my image uploaded to a server?

No. This tool reads pixel colors locally using the browser's native Canvas API. Your image file never leaves your device, and everything is cleared automatically when you refresh the page.

Q2: Why don't I see the Pick from Screen button?

The screen picker uses the browser's native EyeDropper API, which is currently only available in Chromium-based browsers such as Chrome and Edge (version 95+). Firefox and Safari don't support it yet. If the button is missing, the main image color picker still works perfectly.

Q3: Can image compression affect the accuracy of the color?

Yes, slightly. Lossy formats like JPG can shift pixel values a little from the original design file. For pixel-perfect accuracy, use a lossless format such as PNG whenever possible.