Numarly

Image Color Picker

Click anywhere on an image to sample its exact color.

Click to select an image, or drag and drop it here

JPG, PNG, WebP, and other image formats

What is it?

This tool lets you click anywhere on an uploaded image to sample the exact color at that pixel, shown as HEX, RGB, and HSL values, entirely in your browser.

Formula Explanation

The image is drawn onto a canvas at its full resolution. When you click, the click position is converted from the displayed (possibly scaled-down) size back to the image's actual pixel coordinates, and the canvas's pixel data at that exact point is read to get its red, green, and blue values — which are then converted to HEX and HSL for convenience.

Example Calculation

Clicking on a bright red area of a photo might show #E63946, rgb(230, 57, 70), and hsl(355, 78%, 56%) — three representations of the exact same color.

How to Use

  1. Click the upload area or drag and drop an image onto it.
  2. Click anywhere on the image to sample that pixel's color.
  3. Click any of the HEX, RGB, or HSL values to copy it.
  4. Recently picked colors appear as swatches below for quick recall.

Benefits

  • Gets the exact pixel color from any photo without installing design software.
  • Shows the color in three common formats (HEX, RGB, HSL) at once.
  • Processes everything locally in your browser — images are never uploaded anywhere.

Use Cases

  • Matching a brand or theme color from a logo or photo.
  • Picking a background color that matches a specific part of an image.
  • Sampling colors from a design mockup or screenshot to reuse in code or CSS.

What Your Result Means

The sampled color reflects exactly one pixel at full image resolution, so results can vary slightly for photos with grain, noise, or gradients — clicking a slightly different spot on the same area may give a subtly different value.

Tips

  • Zoom into fine details by uploading a cropped version of the image first (use the Crop Image tool) for more precise picking.
  • For a flat-color logo, click near the center of a solid area to avoid anti-aliased edge pixels.
  • Use the Color Converter tool if you need to convert a picked color into other formats or notations.

Common Mistakes

  • Clicking near an edge or gradient, which can sample a blended or anti-aliased color rather than a pure one.
  • Expecting sub-pixel precision — the tool samples one whole pixel at the image's native resolution.
  • Forgetting that JPEG compression can slightly shift colors from the original, especially in busy or high-contrast areas.

FAQs

Are my images uploaded to a server?

No, all processing happens locally in your browser using the Canvas API — your images never leave your device.

Does this account for image display scaling?

Yes — clicks are automatically converted from the displayed (scaled) size back to the image's true pixel coordinates, so you always sample from the full-resolution image.

Can I pick a color from a screenshot?

Yes, any image your browser can open works, including screenshots — just upload it like any other image.

Why might the same visual color give slightly different values on two clicks?

If you click two different pixels that look the same at a glance (e.g. in a gradient or noisy photo), their exact values can differ slightly — zoom in or crop first for more precision.

Images are read and sampled locally in your browser and are never uploaded to a server.

Last updated: August 1, 2026