How the colours are picked
The tool samples pixels across your image, groups similar shades into buckets, and surfaces the most dominant, visually distinct ones. It deliberately merges near-identical colours — otherwise a photo would return twenty barely-different blues instead of one good blue plus the accents that actually make the image work.
Each swatch gives you a hex code (like #17604A) — the standard way to specify an exact colour in Canva, Figma, Photoshop, CSS and virtually every design tool. Tap any swatch to copy it.
Turning a palette into something that looks designed
Extracting colours is easy; using them well follows a simple rule — the 60-30-10 split:
- 60% a dominant neutral or background colour — usually the lightest or most muted in your palette.
- 30% a secondary colour that supports it and carries most of your content.
- 10% an accent — the loudest colour, used only for the thing you want people to look at.
- The common mistake is using all five colours equally. A palette isn't a list of colours to use in equal amounts; it's a hierarchy.
Where creators use this
For an Instagram feed, pulling a palette from one photo you love and reusing it across edits is the single easiest way to make a grid look intentional rather than random. For presentations and thumbnails, extracting from your hero image means your text and shapes never clash with your visuals.
One accessibility note worth caring about: a beautiful colour pair can still be unreadable. If you're putting text on a colour, check the contrast — light grey on white looks elegant in your head and is invisible to a real reader on a phone in sunlight.
Frequently asked questions
›How do I get the colour codes from an image?
Upload the image above and the tool extracts its dominant colours, each with a hex code. Tap any swatch to copy the code, then paste it into Canva, Figma, or wherever you're designing.
›What is a hex code?
A six-character code like #17604A that specifies an exact colour — the standard format used by Canva, Figma, Photoshop, CSS and nearly every design tool. Copying the hex guarantees the exact shade, rather than eyeballing it.
›How many colours should a palette have?
Three to five is the sweet spot for most work. More than five and things start to look chaotic. Use them in a hierarchy — roughly 60% dominant, 30% secondary, 10% accent — rather than in equal amounts.
›Is my image uploaded to a server?
No. The image is read and analysed entirely in your browser — nothing is transmitted or stored. You can turn off your internet after the page loads and the extraction still works.
›Why do the extracted colours look slightly different from the image?
The tool merges near-identical shades so you get a usable palette instead of twenty versions of the same blue. Each swatch represents a cluster of similar pixels, so it's the representative colour of that group rather than any single pixel.