How to Get the Exact Colour from an Image

Matching a colour to an image comes up constantly — a button that should pick up a tone from a hero photograph, a slide background drawn from a product shot, a chart that has to sit alongside a brand image without clashing. Guessing from the screen is unreliable, because your display, the ambient light and any colour management in between all shift what you see.

Step by step

1. Open the Image Colour Picker.
2. Drop in your image.
3. Click anywhere on it to sample that pixel.
4. Click any value or swatch to copy it.

HEX, RGB or HSL?

• HEX — what you paste into CSS and design tools. #1B6E80.
• RGB — when you need the channels separately, or want to add an alpha value.
• HSL — when you want to keep a hue and change how light or saturated it is. Far easier to build a tint and shade scale from HSL than from HEX.

The dominant colour palette

Alongside the pixel you clicked, the tool groups every pixel into colour buckets and shows the eight busiest, with the share of the image each covers. That is usually a better starting point for a palette than any single sample, because it tells you what the image actually is — a photo that reads as "blue" often turns out to be mostly grey with one strong blue accent, which changes how you would design around it.

Transparent pixels are excluded so a PNG's empty background does not skew the result.

A note on accuracy

Large images are scaled down for display, but the click is mapped back to the underlying pixel data, so the value you get is the real pixel rather than a resampled approximation. Everything is read into a canvas in your browser — the image never leaves your device.

Pick a colour now →