Overview
Colour work constantly hits the same wall: you can see the colour you want but you cannot name it. Screenshots of a competitor's site, a photo with the perfect accent, a mockup from a designer who has gone offline — the colour is right there, trapped behind glass. An eyedropper breaks the glass.
This picker draws your image to a canvas and reads it pixel by pixel as you move. Hovering previews colours live; clicking locks one into a history of your last twelve, each swatch clickable to re-copy. HEX copies with a single tap for stylesheets, while RGB and HSL sit alongside for canvas code and design tools. Nothing uploads — the image is decoded, read and forgotten on your device.
What is a pixel's colour, really?
Every pixel on your screen is three numbers: the intensities of red, green and blue light, each from 0 to 255. Full blast on all three is white; all off is black; everything you have ever seen on a screen is a mixture. HEX notation like #FF7A00 is simply those three bytes written in hexadecimal — the dialect stylesheets speak. HSL rearranges the same colour as hue, saturation and lightness, which matches how humans think about adjusting it.
The picker reports the colour as stored in the image file, read straight from the canvas bytes. That is the value you want for web work: paste the HEX into CSS and the browser renders the same stored colour. Your screen's own colour profile may shift how it looks slightly, but the numbers are the source of truth.
Features
- Hover preview reads colours live as you move across the image.
- Click-to-lock eyedropper pins a pixel's colour on demand.
- HEX, RGB and HSL shown together for every pick.
- One-tap copy on the HEX value and on every history swatch.
- Twelve-colour history keeps your recent picks one click away.
- Drag-and-drop or browse loading, with large images auto-scaled.
- Fully private: pixels are read locally, nothing is uploaded.
Benefits
- End 'close enough'. Sample the actual colour instead of eyeballing it.
- Bridge designer and developer: the mockup's colour becomes copy-pasteable.
- Steal like an artist — legally: lift palettes from your own photos and screenshots.
- Zero setup: no extensions, no desktop app, no account.
Who can use it
Front-end developers matching a design comp, designers sampling references and screenshots, brand managers auditing colour consistency, bloggers lifting accent colours from their photography, and anyone settling a debate about 'what colour is that, exactly'. If a colour exists on your screen, this tool can name it.
How to use
- Drop an image onto the panel or click to browse for one.
- Move your pointer over the image to preview colours live.
- Click any pixel to lock its colour into your history.
- Read HEX, RGB and HSL; click the HEX or a history swatch to copy.
- Load another image any time — nothing is kept after you leave.
Frequently asked questions
The picked colour looks off — dark, or washed out. Why?
You likely clicked a shadow, a highlight, or an anti-aliased edge where two colours blend into an in-between shade. Zoom in mentally and click a flat area of the colour you actually want — edges always lie, flat areas tell the truth.
Why does the HEX differ from what my design tool shows?
Colour profiles. The picker reports the raw stored value; your screen and your app each apply display profiles on top. For web work the HEX is what matters — browsers render it consistently, which is why it is the source of truth.
Can it pick colours from a video?
Take a screenshot of the frame first and drop it in — the result is identical. Direct screen-picking needs the EyeDropper API, which only some browsers offer; the image route works everywhere.
What formats can I drop in?
Anything your browser displays: PNG, JPEG, WebP, GIF (first frame), AVIF, SVG. Large images are scaled for display, and picking reads the displayed pixels accurately.
Is my image sent anywhere?
Never. It is decoded and drawn to a canvas entirely on your device. When you leave the page, it is gone — there is nothing to delete because nothing was stored.
Conclusion
The colour you want is already on your screen. Drop the image, click the pixel, copy the HEX — the distance between 'that colour there' and #ThatColour is exactly one click.