Image Color Picker

Upload an image and click any pixel to get its HEX, RGB, and HSL color values.

Drop an image or click to browseThen click any pixel to pick its color. Hover to magnify; arrow keys move the crosshair and Enter adds the colour to the palette.

Pick colors from images without uploading

Click any pixel to get the exact HEX, RGB, and HSL color values — useful for matching brand colors, sampling UI screenshots, or extracting palette colors from photos. For building a full color palette, try the Color Palette Generator. To convert between color formats, use the Color Converter.

Built and maintained by Meet Shah · Last updated 2 August 2026

What this tool is used for

Picking an exact colour out of a screenshot or a photograph.
Extracting a brand colour from a logo image when no token exists.
Sampling several pixels to find a surface's real colour.
Getting hex, RGB and HSL for one picked pixel at once.
Matching a design to a colour in a reference image.

Frequently Asked Questions

Is my image uploaded to pick a colour?: No. It is drawn to a canvas in your browser and the pixel is read back with `getImageData`, so the file never leaves the machine — which matters when the image is a client mockup or an unreleased screenshot.
Why does the colour look different in my design tool?: Colour management. The canvas reports raw sRGB byte values, while your screen and your editor may apply a display profile — so a Display-P3 photograph shows one colour and reports another. For brand work, take the value from the source file, not from a screenshot.
What is the magnified square for?: Picking exactly the pixel you meant. Around any edge the neighbouring pixels are anti-aliased blends of two colours, so a one-pixel miss returns something that is in neither. The loupe shows the grid so you can land inside a flat area.
Why can a picker fail on an image from the web?: Cross-origin tainting. Drawing an image from another domain onto a canvas makes `getImageData` throw a security error unless that server sends CORS headers. Loading a local file, as here, avoids the problem entirely.
Which format should I copy?: Hex for CSS and design handoff, RGB when a value is going into code that does arithmetic, and HSL when you intend to derive a lighter or more muted variant — that is the one where the adjustment is a single number.
Why does the picked colour differ from what I see?: Because the displayed pixel has been through the monitor's colour profile, and the image may carry its own. The value read is the file's stored colour, which is the correct one to use even when it looks different on screen.

Common errors and gotchas

Picking from a lossy image, where compression has shifted the pixel away from the intended colour.
Sampling an anti-aliased edge, which is a blend rather than either colour.
Assuming a screenshot preserves colour exactly, when profiles and scaling can change it.
Picking one pixel from a gradient and treating it as the colour.
Sampling from an image that a display profile has already transformed.