Colour Extractor
Pull a palette out of any image
Image
Result
No image yet
Drop in an image and the palette appears here.
The percentage is how much of the image area that colour family covers.
Building a design around a photograph, a logo or a piece of packaging is much easier when you can see its actual colours as numbers. Drop in an image and get the dominant tones with their hex codes.
How to use
- 1 Drop in an image.
- 2 Choose how many colours you want in the palette.
- 3 Click any swatch to copy its hex code.
- 4 Or copy the whole set as CSS custom properties.
Frequently asked questions
How are the colours chosen?
Pixels are grouped into clusters of similar colour, and each cluster contributes its average. That is why you get a handful of representative tones rather than the single most common pixel value.
How many colours should I extract?
Five is a good default — roughly a background, a foreground, an accent and two supporting tones. More than eight tends to produce near-duplicates that are not useful as a palette.
What does the percentage mean?
How much of the image area belongs to that colour cluster. A colour at 40% dominates the picture; one at 3% is a small accent, which is often exactly the one you want for buttons.