Image color picker for HEX, RGB and HSL

How to pick a color from an image

Choose an image from your device; the first pixel at coordinates 0, 0 is sampled automatically so a result appears right away. Click anywhere on the preview, or focus it and use the arrow keys to move one pixel at a time. For an exact pixel, type its X (column) and Y (row) and select Select pixel. Each selection updates the HEX, RGB, HSL and alpha fields and the color swatch immediately.

Copy any value with its own Copy button, which uses your clipboard when available and falls back to selecting the text field. Download color text saves a small text file with the coordinates, the image size and all four values. Clear the image or leave the page to release it from memory; Cancel & clear also stops an image still loading.

1. Choose an image from your device.
2. Click a pixel, use arrow keys, or type its X and Y coordinates.
3. Read the HEX, RGB, HSL and alpha values, then copy or download them.

What the color values mean

HEX packs the pixel's red, green and blue bytes into 2 hexadecimal digits each, prefixed with #; RGB lists the same 3 bytes from 0 to 255. HSL restates the color as hue in degrees, plus saturation and lightness percentages rounded to 2 decimal places. HEX, RGB and HSL are three ways to write the same decoded 8-bit sRGB color. Each hex pair runs from 00 to FF, the same 0-255 range spelled in base 16 instead of base 10.

A pixel with any transparency switches to the 8-digit HEX8, RGBA and HSLA forms, adding an alpha component so the value states exactly how transparent the pixel is instead of guessing from what shows through it. The alpha field also states the raw byte, out of 255, next to its percentage. Copying HEX, RGB, HSL or alpha copies only that one string. Use the tool as a color extractor: to get hex codes from an image, select each pixel in turn and copy its HEX value.

Transparency and pixel accuracy

A fully transparent pixel has no color left to read, so its original RGB cannot be recovered. For a partly transparent pixel the browser stores color multiplied by alpha, so the RGB can be off by a small amount. The tool reads the image itself, never the checkerboard behind it or the selection marker.

These are the decoded pixel's values from your browser's own canvas, not a raw file inspector: embedded color profiles, wide-gamut or HDR conversion and browser-specific decoding can all shift a stored source value before it is sampled. The preview is at most 640 pixels tall, but each sample reads the full-resolution image. On a large image one screen pixel covers several image pixels, so use X and Y or the arrow keys to reach a single pixel. Decoding and sampling run in a background Web Worker, separate from the page.

Limits

The tool opens any image your browser can decode. It also has its own decoders for TIFF, AVIF and SVG, so those files open even in a browser that cannot show them. An animated image or a multipage TIFF is reduced to one decoded frame or page before sampling. An SVG is rasterized at its own decoded size, without loading external resources or active content, so missing fonts can change its appearance.

The tool samples one pixel per selection; it does not extract a full palette, search for a color by name, or read a screen, camera or website. Available browser memory and canvas limits decide the largest image you can open, and an unsupported or damaged file shows an error asking for another image. Each run holds 1 image; choosing a new file replaces it immediately rather than adding it to a queue, since there is no batch mode for several images at once.