Extract a specific shade from a photograph or mockup when you don't have the original design file or colour swatch. Pull brand colours out of a logo image one at a time to build a documented colour system. Match a UI element's accent colour to a real-world reference (product photo, brand guideline screenshot, mood image). Build a colour palette from a film still, artwork, or design inspiration without manually guessing hex codes. Verify that two regions of an image are genuinely the same colour beneath what your eye perceives as similar. Sample colours from a gradient or complex image where averaging multiple pixels would give you the wrong result.

Upload an image. Drop a PNG, JPG, or WebP file. Large images are scaled to ~700px wide for performance, but the picker always works from the displayed canvas. Hover to preview. Move your cursor over the image. The loupe magnifies an 8× view of the pixels under your pointer, and a live readout shows the hex, RGB, and HSL of the exact centre pixel. Click to lock. Click any pixel to add it to your custom palette. The colour swatch appears below the image with all three formats displayed. Remove colours. Click a swatch in your palette to delete it. You can build and refine your palette by adding and removing colours until you have what you need. Copy values. Click any format (hex, RGB, or HSL) in either the live readout or a palette swatch to copy it to your clipboard.

Anti-aliasing on text. Letters and fine lines have soft, semi-transparent edges that blend with the background. These edge pixels don't represent the true colour of the text. Click the thickest part of a stroke, away from boundaries. JPEG compression artefacts. Heavily compressed JPEGs introduce colour drift across regions that look flat to the eye. If you need a clean, reproducible colour, use PNG sources or re-encode the JPEG at higher quality before uploading. Large images are downscaled. For performance, images wider than ~700px are scaled down. You're always picking from the displayed canvas, not the original file. If you need pixel-perfect extraction of a tiny UI element, crop it to a reasonable size before uploading. HSL is computed, not stored. The browser natively stores and transmits colours as RGB. HSL is a mathematical transformation of the same data. Rounding during conversion can introduce tiny differences if you round-trip the value—usually imperceptible, but worth knowing. Subpixel rendering varies by screen. Font rendering, anti-aliasing, and subpixel optimisation on your display can affect what pixels you see. Use the loupe to inspect what's actually there, not what you expect to see.

Use the loupe to zoom in on fine details. An 8× magnification makes it easy to target a single pixel without accidentally clicking a neighbour. For brand-colour work, always use the original high-quality image—a screenshot of a screenshot compounds compression and rendering artefacts. Sample from the same lighting and background context where the colour will be used. A colour picked from a shadow may not match the same pigment in daylight.

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?

Image Color Picker extracts exact colour values from any image by letting you click individual pixels. It reads and displays hex, RGB, and HSL simultaneously, with an 8× magnifier loupe to help you target the precise pixel you need. Build a custom palette by clicking multiple points, then export or reference those colours in your own work. Everything runs in your browser—images never touch a server.

When to use it

Extract a specific shade from a photograph or mockup when you don't have the original design file or colour swatch.
Pull brand colours out of a logo image one at a time to build a documented colour system.
Match a UI element's accent colour to a real-world reference (product photo, brand guideline screenshot, mood image).
Build a colour palette from a film still, artwork, or design inspiration without manually guessing hex codes.
Verify that two regions of an image are genuinely the same colour beneath what your eye perceives as similar.
Sample colours from a gradient or complex image where averaging multiple pixels would give you the wrong result.

How it works

Upload an image. Drop a PNG, JPG, or WebP file. Large images are scaled to ~700px wide for performance, but the picker always works from the displayed canvas.
Hover to preview. Move your cursor over the image. The loupe magnifies an 8× view of the pixels under your pointer, and a live readout shows the hex, RGB, and HSL of the exact centre pixel.
Click to lock. Click any pixel to add it to your custom palette. The colour swatch appears below the image with all three formats displayed.
Remove colours. Click a swatch in your palette to delete it. You can build and refine your palette by adding and removing colours until you have what you need.
Copy values. Click any format (hex, RGB, or HSL) in either the live readout or a palette swatch to copy it to your clipboard.

Common gotchas

Anti-aliasing on text. Letters and fine lines have soft, semi-transparent edges that blend with the background. These edge pixels don't represent the true colour of the text. Click the thickest part of a stroke, away from boundaries.
JPEG compression artefacts. Heavily compressed JPEGs introduce colour drift across regions that look flat to the eye. If you need a clean, reproducible colour, use PNG sources or re-encode the JPEG at higher quality before uploading.
Large images are downscaled. For performance, images wider than ~700px are scaled down. You're always picking from the displayed canvas, not the original file. If you need pixel-perfect extraction of a tiny UI element, crop it to a reasonable size before uploading.
HSL is computed, not stored. The browser natively stores and transmits colours as RGB. HSL is a mathematical transformation of the same data. Rounding during conversion can introduce tiny differences if you round-trip the value—usually imperceptible, but worth knowing.
Subpixel rendering varies by screen. Font rendering, anti-aliasing, and subpixel optimisation on your display can affect what pixels you see. Use the loupe to inspect what's actually there, not what you expect to see.

Tips for accuracy

Use the loupe to zoom in on fine details. An 8× magnification makes it easy to target a single pixel without accidentally clicking a neighbour.
For brand-colour work, always use the original high-quality image—a screenshot of a screenshot compounds compression and rendering artefacts.
Sample from the same lighting and background context where the colour will be used. A colour picked from a shadow may not match the same pigment in daylight.