Extract Icon Colours
Upload an icon and get its exact colours as hex codes — usually two or three, and usually needed to match something else to them.
Describe the edit — the AI assistant does it on the canvas.
2 free credits · No signup · ~10 seconds
Drop an icon
PNG, JPG, WebP or SVG — up to 30 MB
Runs entirely in your browser. Your image is never uploaded.
Reading the colours out of an icon
Icons use very few colours
A well-made icon is one or two colours plus transparency. That is deliberate: an icon has to stay legible at sixteen pixels, and detail in colour is the first thing to disappear at that size.
Matching a set
The usual reason to extract icon colours is a mismatched set — icons from different sources that need to agree. Reading the exact values off the ones that are right tells you what to recolour the others to.
Alpha is excluded
Only visible pixels are measured, so transparent areas do not appear in the results. That is why an icon may report only one or two colours even though it visually occupies a whole square.
Small icons give less to read
A 16-pixel icon has very few pixels to sample and its anti-aliasing is proportionally large, so extraction is less reliable. Use the largest version you have — the colours are the same and the reading is cleaner.
SVG is exact
If the icon exists as SVG, the colours are literally written in the file as attributes. Extraction from a raster is a very good approximation, but the source is definitive.
How to extract icon colours
Upload the icon
Drop in the largest version you have for the cleanest reading.
Choose how many colours
Most icons need two to four. Adjust the slider to match.
Copy what you need
Click a swatch to copy one hex, or copy them all.
Extract Icon Colours — in the editor
The real editor, start to finish — no signup needed to try it yourself.
2 free credits · No signup · ~10 seconds
Where icon colours are needed
Normalising an icon set
Read the correct colours so mismatched icons can be recoloured to match.
Theme matching
Match interface elements to the icons already in place.
Dark mode variants
Get the light-mode values before deriving the dark-mode ones.
Design tokens
Capture icon colours as values in a design system.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Get Your Website Ready for Google WebMCP
A step-by-step guide to exposing WebMCP tools on your site — the imperative and declarative APIs, how to test them, and the real security downsides.
The Best Free Design Tools for Indie Developers
A working set of free design tools for developers shipping solo — UI, icons, fonts, colour, illustration and asset prep — with the real free-tier limits.
How to Batch Recolor Images (Without Opening Each One)
Three honest ways to recolor a whole folder at once: a browser batch tool, a Photoshop action, and ImageMagick — plus which operations survive batching.
Extract your icon colours
Upload an icon and copy its exact hex codes.