Image
Colour Palette Extractor
Pull the dominant colours out of any image as HEX and RGB values, with ready-to-paste CSS custom properties.
Drop an image here, or click to choose
Supports JPG, PNG, WebP, GIF, AVIF, SVG
What is Colour Palette Extractor?
Extracting a palette from a photograph is the fastest way to build a harmonious colour scheme. Pick an image whose mood you like, pull out its dominant colours, then use them for background, text and accents — the result almost always works, because those colours already coexisted in one frame.
This tool uses k-means clustering to group pixels into colour clusters, with each cluster's centre becoming a representative colour. That produces results far closer to how people actually perceive an image than simply counting the most frequent colours — photographs almost never contain two pixels of exactly the same value, so naive counting yields meaningless results.
How to use
- Drop an image onto the box, or click to choose a file.
- Drag the slider to choose how many colours to extract, from 2 to 12.
- The bar at the top shows each colour scaled to how much of the image it occupies.
- Click a swatch to copy its HEX value, or copy the whole CSS block at the bottom.
Frequently asked questions
How many colours should I extract?
Five or six covers most designs: a background, a text colour, an accent and a couple of supporting tones. Extracting many more tends to produce near-duplicates that are hard to use.
What does the percentage mean?
The share of pixels belonging to that cluster. High-percentage colours are usually the background or largest area; low-percentage ones are highlights — and those are frequently the most useful as accent colours in a design.
Why do results shift slightly when I re-run it?
K-means is iterative and depends on its starting points. This tool seeds deterministically so results are stable, but changing the colour count re-partitions every cluster rather than simply adding or removing one.