Selected decoded pixel → red, green, blue and alpha → HEX / RGB / HSLHow to use this image color picker
- Choose a still JPEG, PNG or WebP, or load the sample image. The file stays in your browser.
- Click or tap a pixel. With the image focused, use arrow keys to move by one original pixel and copy a colour value.
- Save individual colours or extract a prominent palette, then copy the codes or download a palette PNG.
Worked example
A solid red pixel with red 255, green 0, blue 0 and alpha 255 appears as #FF0000, rgb(255, 0, 0) and hsl(0 100% 50%). A partially transparent pixel includes alpha in its HEX and RGB output. The displayed composite can look different depending on the background beneath that pixel; the picker reports the underlying decoded values.
Sample the original pixel behind a scaled preview
The image preview is sized for the page, but a click is mapped back to the original decoded pixel coordinates. Sampling uses a one-pixel canvas rather than averaging the displayed preview. The keyboard moves that coordinate by one source pixel, which helps inspect thin borders and neighbouring colours. Coordinates start at zero in the top-left corner.
Extract a useful image colour palette
Extract palette samples a small 64 × 64 thumbnail and groups similar opaque colours. It returns up to six distinct, prominent estimates, not a count of every exact pixel in the source. Mostly transparent areas are excluded. For precise brand matching within this image, save your own pixel picks instead; you can keep up to eight colours and download labelled swatches as a PNG.
Understand browser colour values and transparency
HEX, RGB and HSL describe the image after the browser decodes it. A colour-managed source, compression, antialiasing or a translucent edge can differ from the nominal colour used in the design file. The picker is not a screen-wide eyedropper, a Pantone identifier or a CMYK print proof. Fully transparent pixels can lose hidden RGB information during browser decoding. Your source image remains unchanged.
Reference: MDN: reading canvas pixel data.
Common questions
Can I pick a HEX colour from an uploaded image?
Yes. Choose a supported image, click or tap a pixel and copy its HEX, RGB or HSL value. Transparent pixels include an alpha value rather than being silently treated as opaque.
Does the image color picker upload my photo?
No. Decoding, pixel sampling, palette extraction and palette PNG generation happen in this browser. No image is sent to a colour extraction API.
Is the automatic palette exact?
It estimates prominent colours from a small thumbnail and groups similar shades. Use individual source-pixel picks when you need an exact decoded pixel value; a dominant palette can contain averaged colours.
Can I use the picker with a keyboard or on mobile?
Yes. Tap the image on mobile. With the image button focused, Enter samples the centre or current point, and arrow keys move one source pixel at a time. Colour values and palette swatches have labelled copy buttons.