Image Color Picker
Trying to match a brand colour from a logo screenshot or pull a wall hue from a photo usually means opening Photoshop. This picker loads any image into a zoomable canvas and shows the HEX, RGB and HSL value of whichever pixel you click, with a 10×10 average so you can sample an area instead of a single pixel and avoid JPEG noise artefacts.
How to pick a colour from an image
-
1
Upload or drop an image
JPG, PNG, WebP: the picker scales to fit your viewport.
-
2
Zoom into the area
Scroll to zoom; drag to pan to the exact spot you want to sample.
-
3
Click a pixel
Instant readout in HEX, RGB, HSL, plus a magnified swatch.
-
4
Copy the notation you need
One click copies HEX, rgb() or hsl() to your clipboard.
-
5
Save multiple samples
Collect a palette of 6-10 colours from across the image for a design reference.
Getting accurate samples
A single-pixel colour pick is almost never what you want from a real photo, JPEG compression, noise and lighting variation create pixel-to-pixel variation even in a visually uniform area.
Sampling modes
| Mode | What it does | When to use |
|---|---|---|
| Point | Single pixel under the cursor | Sampling a screenshot from a design tool |
| 3 × 3 avg | Mean of 9 pixels around the click | JPG photos with light compression |
| 10 × 10 avg | Mean of 100 pixels | Heavily compressed or noisy photos |
| Area avg | Draw a rectangle, average every pixel inside | Logos and flat-colour design assets |
Colour space caveats
- Screenshots from a display show sRGB values; the picked colour matches the original source.
- Photographs from a camera may be in Adobe RGB or DCI-P3; the picker shows sRGB, so a vivid red from a wide-gamut phone photo looks slightly desaturated.
- PNG with ICC profile: the picker converts to sRGB before sampling so outputs are consistent.
Common use cases
- Matching a client’s logo colour from a screenshot instead of guessing.
- Building a palette from a reference photo (landscape, mood board, film still).
- Checking hex values on a rendered web page that lost its design tokens.
- Verifying a brand colour was applied correctly by a stakeholder.
Privacy
The image is loaded into your browser canvas and never uploaded, the picker uses purely client-side canvas reads, so confidential designs stay confidential.
Frequently Asked Questions
JPEG compression shifts colours slightly, especially in gradients and near edges. If the source is a JPG, try the 10 × 10 average mode; if you have access to the original PNG or SVG, sample from that for an exact match.
Not directly. Take a screenshot of the frame you want and load that. For rigorous video-to-palette work, extract frames with a video tool and sample each one.
It samples from whichever frame is displayed when you click. Pause or scrub to the frame you want before sampling.
Up to 20 per session. Palettes are stored locally, so refreshing the page keeps them but clearing browser data wipes them.
Related Tools
Image Resizer
Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.
QR Code Generator
Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.
Meme Generator
Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.
Barcode Generator
Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.
Image Compressor
Compress JPG, PNG and WebP images to reduce file size while preserving visual quality. Entirely in your browser, no upload.
GIF Maker
Turn a sequence of images or a short video into an animated GIF. Set frame rate, loop count and dimensions before exporting.