Extract Colors from Image
Upload a photo and get its dominant colours as a real palette, each with its share of the image, plus a click-to-sample eyedropper.
Click or drop an image here
JPG, PNG, WebP or GIF
How to use this tool
- Upload or drag in a photo.
- Choose how many swatches to extract; the palette updates instantly.
- Each swatch shows its hex code and the percentage of the image it covers, largest first.
- Click anywhere on the image itself to sample that exact pixel's colour with the eyedropper.
- Copy the palette as a plain hex list, CSS custom properties, or a Tailwind colours snippet.
About this tool
Turn a photo into a usable colour palette: upload an image and this tool works out its dominant colours automatically, using median-cut quantisation, the same family of algorithm image editors use to reduce a photo to a limited colour set. Each swatch also reports the percentage of the image it actually covers, largest first, which most colour extractors leave out. That number is what tells a real brand colour apart from a stray highlight or a shadow: five near-identical greys with no share figures attached are much less useful than one dominant colour at 42% and four accents trailing behind it. Clicking the image itself works independently as an eyedropper, sampling the exact pixel under the cursor rather than an averaged region, for when you need one specific colour rather than the whole palette. The palette exports as a plain hex list, CSS custom properties ready to paste into a stylesheet, or a Tailwind config colours snippet, so picking a palette and using it are the same step. Everything happens on a canvas inside your browser; the photo is never uploaded, which matters for anything under embargo, a client's unreleased product shot, or a personal photo you would rather not hand to a server.
Frequently asked questions
How does this extract colours from a photo?
The image is drawn to a canvas and its pixels are grouped by similarity using median-cut quantisation: the algorithm repeatedly splits the pixels into groups along whichever colour channel varies most, until it has as many groups as swatches you asked for, then averages each group into one representative colour.
What does the percentage next to each swatch mean?
The share of the image's pixels that group represents, so a swatch at 38% is genuinely more dominant in the photo than one at 4%, not just listed first by coincidence. This is what tells a real dominant colour apart from a small accent or a shadow.
How is the eyedropper different from the extracted palette?
The palette summarises the whole image into a handful of representative colours. The eyedropper instead reads the exact colour of a single pixel wherever you click, useful when you need to match one specific spot in the photo rather than get an overview of it.
How many colours can I extract?
Between 3 and 12 swatches, chosen with the buttons above the palette. Fewer swatches merge more of the image into each colour; more swatches picks out finer distinctions, at the cost of some very similar-looking colours appearing separately.
Can I export the palette for use in code?
Yes, as a plain list of hex codes, as CSS custom properties you can paste straight into a stylesheet, or as a Tailwind config colours object. All three update together with the palette.
Is my photo uploaded anywhere?
No. The image is decoded and analysed entirely on a canvas inside your browser using JavaScript. It is never transmitted to a server, which matters for unreleased product photos, client work, or anything personal.