Skip to content

Extract

Get the colours out of an image

Drop in a photo, a screenshot or a logo and get the colours it is actually made of, as hex and RGB, with the share of the image each one covers. Shades close enough that you would call them the same colour are grouped together, so a photograph of a red car gives you one red rather than five a slider apart. Transparent areas are left out of the count, which is the usual reason a logo on a transparent background gets reported as black elsewhere. Underneath the swatches are a few measurements of the image's tone - what they mean is written next to them, and none of them is a score.

Loading the colour tools...

How to get the colours out of an image

  1. Drop in an image.
  2. Choose how many colours you want. Two gives you the broad strokes, twelve gets specific.
  3. Click any swatch to copy its hex code, or copy the whole set at once.
  4. Read the tone measurements underneath if you need them.

Supported formats

This tool accepts JPG, PNG, WebP, GIF, BMP and AVIF files. Everything is decoded by your own browser, so the formats available depend on what your browser can open - which for HEIC in particular varies between Safari and other browsers.

Frequently asked questions

Why do I get one colour where I can see several shades?

Because shades within a small distance of each other are grouped into the colour a person would name. A photograph of a red wall contains hundreds of slightly different reds - sensor noise, shadow, the angle of the light - and listing five of them as five separate colours would be technically accurate and useless. Asking for more colours widens the palette to genuinely different colours rather than splitting the wall.

How is this different from the palette in the PNG compressor?

The compressor's palette has to encode well: it keeps colours apart that are close together, because merging them would band a gradient and make the file look worse. This one has to be readable: it merges them, because you asked what colour the picture is. They are two answers to two questions, which is why they are separate and give different results.

What do brightness and contrast actually measure here?

Brightness is the mean perceived brightness of the sampled pixels, on a 0 to 255 scale, using the weighting that matches how bright each colour looks to an eye rather than averaging the channels - which is why a pure green reads far brighter than a pure blue. Contrast is the standard deviation of that same value: a low number means the tones sit in a narrow band, which is what a flat scan looks like. Neither is a verdict, and a deliberately dark or flat image is not a worse one.

Why is there no quality score?

Because a score would be a guess about what you were trying to do, presented as a measurement. A night photograph is dark, a photo through haze is flat, and a minimalist logo has two colours - none of those is a fault, and a number grading them out of ten would be wrong in a way that looks authoritative. The readings say what the pixels are and leave the judgement where it belongs.

Does it read every pixel?

No, and it says how many it did read. A large photograph is scaled down before sampling and then sampled again, which gives the same palette for a fraction of the work - the dominant colours of an image do not change when you look at it smaller. The pixel count is shown underneath the readings so you can see what the numbers are based on rather than taking them on trust.

Is my image uploaded?

No. The image is decoded and measured by your browser on your device, and nothing is sent anywhere - a content security policy the browser enforces prevents this page from making a request to another domain with your image. The colours you copy come from a canvas in this tab.

Looking for something else? Browse all ImageUtility tools.