Image Color Picker (Eyedropper)

Upload any image, then click anywhere on it to instantly read the pixel's color in HEX, RGB, and HSL. Copy any format to your clipboard with one click.

How it works

Your image is drawn onto an HTML5 Canvas element. When you click, the tool calls getImageData(x, y, 1, 1) to read the exact red, green, and blue values of that pixel and converts them to all three common color formats.

Color format guidance

HEX: 6-digit hex code used in CSS and design tools (e.g. #ff8800). The universal format for sharing colors across tools.
RGB: Red, Green, Blue channels from 0–255 (e.g. rgb(255, 136, 0)). Native format for HTML Canvas and many graphics APIs.
HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Most intuitive for making color adjustments - increase L to lighten, decrease S to desaturate.
OKLCH: a perceptually uniform color space (CSS Color Level 4). Equal numerical steps produce equal visual changes - ideal for generating accessible color palettes.

Tips for accuracy

Zoom in on the image before clicking for precise picking on small or detailed areas.
For anti-aliased edges, click several pixels and average the values to find the intended color.
For system-level color picking anywhere on screen, Chrome 95+ supports the native EyeDropper API - search for "Chrome eyedropper" in the address bar.