Pick exact colours from any image
Drop in a photo, screenshot or design mockup and click any pixel to read its exact HEX and RGB colour. It’s the browser eyedropper designers and developers reach for when they need the precise colour from a reference image, brand asset or screenshot.
How it works
The image is drawn onto a <canvas> at its native resolution. When you click,
the tool converts the click position to image coordinates (scaling for any
display shrink), then calls ctx.getImageData(x, y, 1, 1) to read that single
pixel’s red, green and blue bytes. Those are formatted as a #rrggbb hex code and
an rgb(r, g, b) string. Each pick is stored in a swatch history of the last 12
unique colours, and any value copies to the clipboard with one click.
Example
You click a leaf in a product photo and the tool reports #3f8f4a and
rgb(63, 143, 74) at pixel (412, 588). Click another spot to add it to the
history, then build a small palette and copy each value straight into your CSS or
design file.
| Output | Format | Use |
|---|---|---|
| HEX | #3f8f4a | CSS, design tools, hex inputs |
| RGB | rgb(63, 143, 74) | CSS, code, alpha tweaks |
The image is read directly from a <canvas> in your browser — it is never
uploaded, so even private screenshots stay on your device.
When to use it
- Brand colour extraction — a client sends a logo and you need the exact brand HEX to use in their CSS. Upload the file, click the key colour, done.
- Screenshot matching — a designer sends a static mockup and you need to match button colours precisely in code without guessing.
- Photography and print — identify the dominant colour of a flower, fabric or paint swatch so you can find complementary tones or order a matching colour sample.
- Accessibility auditing — sample the foreground and background colours from a screenshot to feed into a contrast checker.
Practical tips and edge cases
Anti-aliased edges — clicking on the transition between two colours (e.g. the soft edge of a logo on a white background) will return a blended pixel — slightly off from both original colours. For crisp logos, click well inside the colour region, not at its border.
JPEG compression — a heavily compressed photograph introduces colour noise, so two visually identical pixels may return slightly different values. If you need a “brand exact” value, work from a lossless PNG or SVG, not a JPEG export.
Retina / HiDPI images — the canvas reads the native pixel data regardless of screen density, so the sampled pixel is always from the true image resolution, not the CSS display size. Colours are accurate even on a 2× retina screen.
Building a palette — each pick is added to the swatch history. Sample 5–8 colours methodically — shadows, midtones, highlights — then copy each HEX in turn to assemble a palette without reloading the image.
SVG files — most browsers rasterise an SVG to the canvas at the displayed size, so you get the rendered colour at that zoom level. For vector fills, reading the SVG source directly gives a more reliable value.