Does it give HEX and RGB values?

Yes. Each pick shows both the HEX code and the RGB value, and either can be copied with a single click.

Is my image uploaded?

No. The image is drawn to a local canvas and read pixel-by-pixel in your browser — it never leaves your device.

Can I pick more than one color?

Yes. Recent picks are kept in a swatch history (up to 12 colours) so you can copy any of the last colors you sampled.

How accurate is the colour reading?

It reads the exact RGB value of the single pixel you click, straight from the image data — no averaging or approximation. The click point is scaled to the image's native resolution, so it's pixel-accurate even when the image is displayed smaller.

What image formats can I sample?

Any format your browser can display — JPG, PNG, WebP, GIF, BMP and SVG. Drop a photo, screenshot, logo or design mockup.

Why is the copy button not working?

Copying uses the browser clipboard API, which needs a secure context (https) and clipboard permission. On an insecure page or if permission is denied, the value still displays but may not copy automatically.

Can I get the colour as RGB for CSS?

Yes. Each pick gives a ready-to-paste rgb(r, g, b) string alongside the #hex code, so you can drop either straight into CSS.

Color Picker from Image

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.