CODDY Tool

Image Color Picker

Pull the real colour palette out of any image, ordered by coverage.

Extract the colours an image is actually made of, with each one's share of the picture, then export as CSS variables, a Tailwind object or JSON. Runs entirely in your browser.

Your files are processed locally in your browser and are never uploaded to our servers.

Loading tool…

About Image Color Picker

Pulling a palette out of a photograph is a harder problem than it sounds, because a photograph does not contain six colours — it contains tens of thousands. Reducing that to a handful means deciding which differences matter, and the obvious approaches decide badly.

Picking the most frequent exact colours fails because in a photo almost no two pixels are identical; you get six shades of the same sky. Rounding every channel to a fixed grid fails differently, producing colours that are near-misses of everything and matches of nothing. This uses median cut, which repeatedly splits the colour space along whichever axis is most spread out, so the palette adapts to the picture: a sunset spends its entries on oranges rather than on greens it does not contain.

Each colour is then reported with the share of the image it actually covers, and the swatches are sized to match. That ordering is what makes the first entry a genuine dominant colour — median cut produces its boxes in the order it happened to split them, which has nothing to do with prominence.

Transparent pixels are excluded. A logo on a transparent background is mostly alpha zero, and averaging those in builds a palette out of the parts nobody can see.

How to extract a palette

  1. Add your image

    JPG, PNG or WebP. It is read in this browser tab and never uploaded.

  2. Choose how many colours

    Between two and sixteen. Fewer gives broad themes, more picks up accents.

  3. Click a swatch to copy it

    Band widths show how much of the image each colour covers.

  4. Export

    CSS custom properties, a Tailwind colour object, or JSON with the coverage figures.

Dominant colour versus average colour

These are different things and the difference matters. The average colour of an image half red and half blue is purple — a colour that appears nowhere in it. Averaging is useful for a background tint that will not clash, and actively misleading as a description of what a picture looks like.

The dominant colour is the palette entry covering the most area, which for that same image is red or blue. That is almost always what people mean when they ask what colour something is, so it is what leads the palette here. The average is shown separately, and labelled.

Frequently asked questions

Why are the colours slightly different from the original image?

Because each palette entry is the average of a whole region of similar colours rather than one sampled pixel. That is what makes it representative — picking a single pixel would give you one shade of sky rather than the sky.

How many colours should I extract?

Five or six for a design palette, which captures the themes without noise. Go higher when you want the accents — a small bright object often only appears once you pass ten.

Does it work on images with transparency?

Yes. Transparent pixels are excluded entirely, so a logo on a transparent background gives you the logo's colours rather than whatever is stored in the invisible areas.

Is my image uploaded?

No. It is decoded and analysed in this browser tab, so an unpublished photograph or an unreleased design stays on your device.

Image Color Picker is free to use with no account, no watermark and no usage limits. Last updated 14 August 2026.