deftools.io Design

Image Color Picker

Click on any pixel in an image to get its exact color in HEX, RGB, and HSL. Includes magnified preview for precise color picking.

🖱️

Drop an image here or click to upload

PNG, JPG, WebP · processed locally in your browser

About this tool

Image Color Picker lets you upload any image and click on individual pixels to get their exact color values in HEX, RGB, and HSL formats. The magnified preview makes it easy to pick the precise pixel you need — essential for recreating a color palette from a screenshot, matching brand colors from a design mockup, or analyzing a photograph's color composition.

Upload a reference image (PNG, JPG, or WebP), hover to see a magnified view of the area under your cursor, then click to capture the pixel's color. Picked colors accumulate in the history panel so you can copy them one at a time or all at once.

Example: Upload a logo screenshot → click on the brand blue → copy #2B5FD7 → paste into your CSS. The magnifier shows exactly which pixel you're targeting, so you never miss the right spot.

FAQ

Does this work on any image?

Yes, as long as the image is a PNG, JPG, or WebP file that loads in your browser. Images loaded from a different domain (cross-origin) may taint the canvas and prevent pixel reading due to browser security restrictions — in that case, save the image to your device first and upload it locally.

What color formats are shown?

The tool shows HEX (e.g. #2B5FD7), RGB (e.g. rgb(43, 95, 215)), and HSL (e.g. hsl(221, 68%, 51%)) for each picked pixel. Click any value to copy it. Use the "HEX first" toggle to control the order in the history list.

Can I pick multiple colors from the same image?

Yes. Every click adds the pixel color to the history panel below, up to 40 colors. Use "Copy All" to grab them all at once, or click individual chips to copy one color.

Is the image uploaded to a server?

No. Every pixel operation happens locally in your browser using the Canvas API. The image never leaves your device.

What is the difference between Image Color Picker and Color Palette?

The Image Color Picker lets you click individual pixels with a magnified preview to get exact per-pixel color values. <a href="/color-palette">Color Palette</a> extracts dominant colors from the entire image (median-cut quantization) — you get a small set of representative swatches sorted by frequency. Use this tool on this page when you need a precise pixel match from a specific spot; use Color Palette when you want a summary of the main colors in an image.

Related design tools

Copied!