Image Color Picker: Pick Colors from Any Image

Image Color Picker (Eyedropper)

Upload a local image, then move over a detail to inspect it in the magnifier. Click to select the displayed color and copy its HEX, RGB, HSL, or OKLCH value. For example, you can sample a button from a screenshot when matching a design or check a color in a product photo. The image is processed in this browser tab and is not uploaded.

How it works

The browser opens your selected file through a temporary local object URL and draws it onto an HTML canvas at its natural resolution. The picker maps the pointer's displayed position back to the source pixel coordinates, then reads that point with Canvas getImageData(). No file contents or color values are sent to a server.

The magnifier shows nearby source pixels as a crisp grid with a crosshair on the current target. Choose a 1×1 sample for one exact pixel, or use 3×3 and 5×5 to average a small neighborhood. The wider settings can reduce the effect of anti-aliased edges or image noise; they can also blend nearby colors, so use 1×1 when you need the exact center pixel. Samples stop at image edges. RGB averaging weights partially transparent pixels by their alpha; fully transparent pixels do not affect an area average. The output formats do not include alpha.

Color formats and limits

HEX is a compact code widely used in CSS, RGB lists the red, green, and blue channels from 0 to 255, and HSL expresses hue, saturation, and lightness. OKLCH expresses lightness, chroma, and hue in a perceptual color space, which can make it easier to compare visual steps when building a palette. The tool derives these values from the browser's canvas pixel data and rounds them for display. Browser color management and image transparency can affect how a pixel looks on screen compared with its copied RGB values. To pick colors from a web page or another part of the screen instead of an uploaded image, use the Screen Eyedropper.