Lift a specific shade out of a photograph for use in a design. Match a UI accent colour to a brand asset whose hex you don't have. Pull individual brand colours out of a logo image one click at a time. Build a moodboard palette from a film still or piece of artwork. Sanity-check that two regions of an image are actually the same colour (vs looking similar but differing in the underlying pixels).

Anti-aliasing on text. Letters have soft edges that don't represent the underlying ink colour. Click the middle of a thick stroke, not an edge. JPEG compression artefacts. Heavily compressed photos drift in colour across what looks like a flat region. If you need a clean colour, prefer PNG sources. Image is scaled for display. Very large images are downscaled to ~700px wide for performance. The pixel you click is from the displayed canvas, not the original. For pixel-perfect extraction of a tiny element, crop to that element before uploading. HSL is derived, not stored. The browser stores RGB; HSL is a different way to describe the same colour. Round-trips can introduce tiny drift due to rounding.

Image Color Picker

Upload an image and click anywhere to get the hex, RGB, and HSL of that pixel. Build a custom palette by clicking multiple points. Pure browser, no upload.

Pick or drop an image (PNG, JPG, WebP)

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (hover to magnify, click to pick)

No image yet.

Current pixel

HEX —

RGB —

HSL —

Locked palette

Click the image to lock colours into a custom palette.

What is this for?

This tool turns any uploaded image into a clickable colour source. Hover anywhere to read the exact pixel under your cursor as hex, RGB, and HSL — with a magnifier loupe that zooms 8× so you can pick pixels precisely without squinting. Click to lock a colour into a custom palette: build the palette by clicking multiple points on the image. Click a swatch in the palette to remove it. The image never leaves your browser.

When to use it

Lift a specific shade out of a photograph for use in a design.
Match a UI accent colour to a brand asset whose hex you don't have.
Pull individual brand colours out of a logo image one click at a time.
Build a moodboard palette from a film still or piece of artwork.
Sanity-check that two regions of an image are actually the same colour (vs looking similar but differing in the underlying pixels).

How precision works

Single-pixel sampling is exact but noisy — anti-aliased edges, JPEG artefacts, and screen subpixel rendering all cause neighbouring pixels to disagree slightly. The 8× loupe lets you see and click the specific pixel you mean, rather than relying on the average. For brand-colour extraction this matters; for moodboard work you can ignore it.

Common gotchas

Anti-aliasing on text. Letters have soft edges that don't represent the underlying ink colour. Click the middle of a thick stroke, not an edge.
JPEG compression artefacts. Heavily compressed photos drift in colour across what looks like a flat region. If you need a clean colour, prefer PNG sources.
Image is scaled for display. Very large images are downscaled to ~700px wide for performance. The pixel you click is from the displayed canvas, not the original. For pixel-perfect extraction of a tiny element, crop to that element before uploading.
HSL is derived, not stored. The browser stores RGB; HSL is a different way to describe the same colour. Round-trips can introduce tiny drift due to rounding.