Sort the Colours in an Image
Pull the colours out of an image and order them around the wheel instead of by how much of the picture they cover.
Describe the edit — the AI assistant does it on the canvas.
2 free credits · No signup · ~10 seconds
Drop an image
PNG, JPG, WebP or SVG — up to 30 MB
Runs entirely in your browser. Your image is never uploaded.
Why sorting by hue helps
Coverage order hides relationships
A palette listed by how much of the image each colour covers puts unrelated hues next to each other. Sorting by hue puts the reds together and the blues together, which is what makes the underlying structure of the palette visible.
Hue is one axis of three
Sorting by hue alone means a pale pink and a deep crimson sit adjacent because they share a hue angle, despite looking very different. That is usually what you want for seeing structure, and occasionally misleading — check lightness separately.
It exposes gaps
Ordered around the wheel, it becomes obvious which parts of the spectrum an image never uses. That is often more useful than what it does use, particularly when you are choosing an accent colour that will stand out against the whole set.
Building a swatch sheet
A sorted palette is the natural input for a style tile or a brand sheet, where colours are presented as a considered system rather than in the arbitrary order an algorithm found them.
Runs in your browser
Extraction and sorting both happen on a canvas locally. Nothing is uploaded.
How to sort the colours in an image
Upload your image
Drop in a photo, logo, or graphic.
Choose how many colours
Drag the slider for how many to extract before sorting, from two to twenty-four.
Copy what you need
Click a swatch to copy one hex, or copy the sorted set.
Sort the Colours in an Image — in the editor
The real editor, start to finish — no signup needed to try it yourself.
2 free credits · No signup · ~10 seconds
Where a sorted palette helps
Brand sheets
Present extracted colours as an ordered system rather than a raw list.
Finding gaps
See which parts of the spectrum an image never touches before picking an accent.
Mood boards
Arrange reference colours so the direction reads clearly.
Swatch libraries
Build an ordered set for a design system or a style tile.
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.
Sort your image colours
Upload an image and see its palette ordered by hue.