Image colour picker with magnifier
Pick any pixel colour from an image with a magnifier loupe. Copy HEX, RGB, HSL or Swift values, keep a pick history and extract a dominant palette.
- Runs in your browser
- Files are never uploaded
- Free, no account
Magnifier
Move over the image
Hover the image, then click to lock a colour in.
How to pick a colour from an image
- Drop in a screenshot, photo or logo.
- Move the pointer over the image. The magnifier shows an 11 × 11 pixel neighbourhood so you can see exactly which pixel you are on.
- Click to lock the colour in. It is added to the history, and every notation — HEX, RGB, RGBA, HSL, a CSS custom property and a UIColor initialiser — is ready to copy.
- Use the palette panel for the overall colour story of the image rather than one pixel.
Keyboard use
Precision with a mouse is hard at the edge of a letterform or a one-pixel border. Tab to the image, then use the arrow keys to move the sample point one pixel at a time — hold Shift for ten-pixel jumps — and press Enter to pick. The coordinate readout next to the magnifier tells you exactly where you are, which also makes it easy to sample the same pixel from two versions of the same screenshot.
Reading the colour notations
| Notation | Example | Where you would use it |
|---|---|---|
| HEX | #3b82f6 | CSS, design tools, almost everywhere |
| RGB | rgb(59, 130, 246) | CSS, canvas APIs, image editors |
| RGBA | rgba(59, 130, 246, 1) | When the source pixel is semi-transparent |
| HSL | hsl(217, 91%, 60%) | Building tints and shades — change only the lightness |
| CSS variable | --picked: #3b82f6; | Dropping straight into a token file |
| UIColor | UIColor(red: 0.231, …) | iOS and macOS development |
HSL is the one worth learning. Because hue, saturation and lightness are separate numbers, you can build a whole scale from one sampled colour by changing lightness alone — something that is guesswork in HEX.
How the dominant palette is built
The palette uses median cut, the same quantisation algorithm that built GIF palettes for thirty years. Up to 24,000 pixels are sampled evenly across the image and treated as points in RGB space. The single box containing them is split at the median along whichever channel has the widest spread; that produces two boxes, and the process repeats on whichever box is widest until there are as many boxes as swatches you asked for. Each box is then averaged to give its swatch, and the percentage shown is that box's share of the sampled pixels.
The consequence worth knowing: median cut divides by population, so a large area of near-identical sky produces several similar blues, while a small but vivid logo may not get its own swatch at all. Raise the swatch count if a colour you can clearly see is missing, and sample it directly with the eyedropper if it still does not appear.
Accuracy notes
- JPEG artefacts. A nominally flat area in a JPEG varies by a few units per channel, especially near edges. Sample from the middle of a large flat region, or work from a PNG, when you need an exact brand colour.
- Colour profiles. The browser decodes the image and applies any embedded profile, so what you sample is what you see on screen. An image tagged Display P3 will therefore give different numbers than the same file read as raw sRGB.
- Screenshots beat photos. A photograph of a screen carries the camera's white balance and the display's own tint. To pick a UI colour, screenshot the UI.
- Transparency. The alpha channel is reported as-is; the swatch is shown over a checkerboard so semi-transparent pixels are obvious rather than silently composited.
Nothing is uploaded — including the palette
The image is read once into an ImageData buffer with getImageData and everything
after that is arithmetic on that buffer. No pixels are sent anywhere, which matters more than
it sounds: the screenshots people sample colours from are usually unreleased product designs,
internal dashboards or client work under NDA.
Related tools
HEX to RGB Converter for converting a value you already have, Image Metadata Viewer to inspect the colour profile and camera data of a file, and Meme Generator or Add Text to Image if you sampled the colour in order to match some text to the picture.
Questions
How precise is the picker?
Exact. The image is read once into an ImageData buffer at full resolution, and the value you see is the literal RGBA of that pixel — not a sample from a downscaled preview. The loupe shows an 11 × 11 pixel neighbourhood so you can see what you are aiming at.
Can I use it without a mouse?
Yes. Tab to the image, then use the arrow keys to move the sample point one pixel at a time (hold Shift for ten) and press Enter to lock the colour into the history.
How is the dominant palette calculated?
With median-cut quantisation, the same algorithm used to build GIF palettes: the pixel cloud is split repeatedly along its widest colour axis until there are as many boxes as swatches you asked for, then each box is averaged. The percentage next to each swatch is that box’s share of the sampled pixels.
Why does a JPG photo of a flat colour give slightly different values?
JPEG is lossy, so a nominally flat area varies by a few units per channel around block boundaries. Sample from the middle of the area, or from a PNG original, if you need the exact brand colour.