Get the colour palette from an image

Extract the colours that actually make up a picture, with the share of the image each one covers, hex codes you can click to copy, and CSS variables ready to paste.

Getting the tool ready…
Next?Favicon makerFilters & adjustConvert format
Your file never leaves this device. How that works

How to pull a colour palette out of an image

STEP 1

Add an image

A photo, a screenshot, a poster, a piece of packaging. Anything with colour in it.

STEP 2

Choose how many colours

Four for a tight scheme, eight for a usable palette, sixteen when you want the detail.

STEP 3

Copy what you need

Click any swatch for its hex code, or copy the whole set as CSS variables.

Why this is not just the most common colours

Counting the most frequent colours in a photograph gives you a useless answer. A sunset is thousands of near identical oranges, so the top eight come back as eight oranges that differ by a shade nobody can see.

This treats the picture as a cloud of colours and repeatedly splits whichever part of that cloud still covers the widest range, along its most varied axis. A region holding a single flat colour has no range left, so it is never split again and never returned twice. Swatches too close for an eye to separate are folded together.

The percentage next to each swatch is how much of the picture that colour covers. The largest share is very often the background, so the colours worth building with are usually a little further down the list.

Green is weighted more heavily than red and blue when deciding where to split, because human vision resolves far more detail in green. It is a small adjustment that makes the palettes noticeably closer to what your eye picks out.

Questions

Is my file uploaded anywhere?

No. The work happens inside this tab, on your own machine. Open your browser's network tab while you use the tool, there is no request carrying your file.

Is there a file size limit?

None set by us. Very large files are limited only by your device's memory, and we warn you before that becomes a problem.

Do I need an account?

No, and there is no daily limit either. There is nothing to sign up for.

How many colours should I pick?

Eight is the useful default. Four gives a tight scheme, sixteen is for when you want the range rather than a palette.

Can I get the CSS?

Yes, the whole set is offered as CSS custom properties, ready to paste into a stylesheet.

Does it handle transparency?

Transparent areas are ignored, so a logo on a transparent background gives you the logo's colours and nothing else.

Next, you might want to

Favicon makerEvery icon size a site needsFilters & adjustBrightness, contrast, saturation, B&WConvert formatJPG, PNG and WebP, both directionsCompress imageJPG, PNG and WebP, one or a hundred