Overview
Every colour you admire on screen — a brand's exact blue, a photo's perfect sunset orange — is just three numbers. The frustration is going from “that colour there” to the numbers. This picker closes the gap: drop in any image, point at any pixel, and read its precise HEX, RGB and HSL values instantly.
The image never leaves your browser. It is drawn to a canvas, read pixel by pixel with the standard canvas API, and discarded when you leave. Designers use it to sample brand colours from screenshots; developers use it to match mockups; the merely curious use it to settle “what colour is that, exactly?”
How does a screen store colour?
As three intensities: red, green and blue light, each usually 0–255. Your screen mixes those three primaries additively — all three at full blast make white, all off make black, and everything else is a mixture. HEX is just those three bytes written in hexadecimal (#FF7A00); HSL describes the same colour as hue (position on the colour wheel), saturation and lightness, which humans find more intuitive to adjust.
The picker reads the raw pixel bytes, so what you get is the colour as stored in the image — before your screen's colour profile shifts it slightly. For web work that is exactly what you want: the value you paste into CSS will render the same stored colour.
Features
- Click-to-lock eyedropper plus hover preview as you move across the image.
- HEX, RGB and HSL readouts for every picked pixel.
- Click-to-copy on the HEX value and on any history swatch.
- Pick history keeping your last 12 colours one click away.
- Drag-and-drop or browse for loading images, auto-scaled for the page.
- Fully private: pixels are read locally; nothing is uploaded.
Benefits
- Name any colour you see. Screenshots, photos, mockups — point and read.
- Match designs exactly. The stored pixel value, not an eyeballed guess.
- Fast workflow. Hover, click, copy — three seconds per colour.
- No account, no upload. Your images stay yours.
Who can use it
Designers sampling colours from references and screenshots, front-end developers matching a mockup's palette, brand managers checking colour consistency, and anyone who has ever opened a colour picker and thought “but I want THAT one”. Bloggers lifting accent colours from their own photos will find it quietly indispensable.
How to use
- Drop an image onto the panel or click to browse for one.
- Move your mouse over the image to preview colours live.
- Click any pixel to lock its colour and add it to your history.
- Read the HEX, RGB and HSL values; click the HEX (or a history swatch) to copy.
- Load another image any time — the page never keeps your files.
Frequently asked questions
Why does the picked colour look slightly different in my design tool?
Colour profiles. The picker reports the colour as stored in the image file; your screen and your design app each apply their own display profile on top. For web work this rarely matters — the HEX value is the source of truth, and browsers render it consistently.
Can I pick colours from a video or my screen?
From a video, take a screenshot first and drop it in. Direct screen-picking needs the EyeDropper API, which only some browsers support — the image route works everywhere and gives identical results.
What image formats work?
Anything your browser can display: PNG, JPG, WebP, GIF (first frame), AVIF and SVG. Very large images are scaled down for display, but picking still reads the displayed pixels accurately.
Is my image uploaded anywhere?
No. It is decoded and drawn to a canvas entirely on your device; the file never leaves your machine and nothing is stored after you leave.
The colour looks wrong — very dark or washed out. Why?
You may have clicked a shadow, highlight or anti-aliased edge pixel. Zoom mentally: edges between two colours blend into intermediate shades. Click a flat area of the colour you actually want for the truest reading.
Conclusion
Colour you can point at is colour you can use. Drop the image, click the pixel, copy the HEX — the gap between “that colour” and #ThatColour is now one click wide.