HelperCrateImage Color Picker
Pixel-accurate colour picking with loupe, palette export and contrast checks.
Your files never leave your device. Everything runs in your browser.
What Image Color Picker does
Image Color Picker reads the exact colour of any pixel in a picture, with a magnified loupe so you can aim precisely. It returns the value in every format you are likely to need — HEX, RGB, HSL, HSV, CMYK, CSS name and alpha — and keeps a palette of everything you pick.
A zoom control up to 10×, drag-to-pan and arrow-key movement make it practical to hit a single pixel on retina screenshots. For noisy photos, the Average sampling option blends a 3×3, 5×5 or 11×11 block around the cursor, which gives a truer impression of the colour than any single pixel.
The saved palette can be checked for contrast pairs with WCAG grades, copied as CSS variables or JSON, or downloaded as a palette image — handy for matching a design to an existing photo.
How to use Image Color Picker
- Drop the image onto the page or click the dropzone to browse.
- Zoom in with the ± controls, the mouse wheel or pinch gestures, and pan by dragging.
- Hover over the pixel you want — the loupe and colour readout follow the cursor. For precision, nudge with the arrow keys.
- If the area is noisy, switch Average to 3×3, 5×5 or 11×11 to sample a block instead of a single pixel.
- Click to save the colour to the palette, then copy any value format from the card.
- Select two saved colours to check their contrast ratio and WCAG grade, and use the export buttons for CSS variables, JSON or a PNG palette.
Features
- Magnified loupe with 1–10× zoom, wheel zoom, drag panning and arrow-key pixel nudging.
- Average sampling over 3×3, 5×5 or 11×11 blocks for noisy photos and gradients.
- Every common format per colour: HEX, RGB, HSL, HSV, CMYK, nearest CSS colour name and alpha.
- A saved palette with one-click copying and a count of picked colours.
- Pairwise contrast checker with WCAG grades for any two saved colours.
- Exports as CSS variables, JSON or a downloadable palette PNG.
Tips and common mistakes
- Use the average sampler on photos and the point sampler on flat graphics and UI screenshots.
- Check contrast before using a photo-derived colour for text — attractive colours are often too light or too dark to read.
- Save all the colours of a design first, then export CSS variables to move the palette into code in one step.
Frequently asked questions
How accurate is the colour value?
The value is read directly from the image pixels the browser has decoded, so it is as accurate as the file itself. On a photo, remember that a single pixel sits inside noise and compression artefacts — use Average sampling for a representative colour.
Why are some pixels not pickable?
Fully transparent pixels have no colour, so they are excluded from picking and from averaging. If a value looks wrong near an edge, it may be blending with transparency; move inside the shape.
What does the contrast checker do?
Select two saved colours and it calculates their contrast ratio, graded against the WCAG thresholds for normal and large text. It is the quickest way to confirm that a colour from a photo will be readable as text on your page.
Is the palette saved after I close the page?
The palette lives in the page session, so export or copy the values you want to keep. Downloading the palette PNG or copying the CSS variables takes only a click.
Can I pick colours from a screenshot on my phone?
Yes — paste works with clipboard images on most mobile browsers, and touch long-press is supported for picking. Zoom in first for precise results.
Related image tools: Image Compressor, Image Converter, Image Resizer.
Colour picking runs on the decoded image in your browser. The picture is never uploaded and the palette stays on your device.