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.
Free preview · No signup · ~10 seconds
Drop an image
PNG, JPG, WebP or SVG — up to 20 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.
Free preview · 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.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Duotone Image in Figma (Building One From Blend Modes)
Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.
How to Make a Logo White in Photoshop (3 Methods, One of Them Non-Destructive)
Color Overlay, Lock Transparent Pixels, and why Hue/Saturation is the wrong tool even though Lightness looks like it works — plus the fringe that makes a white logo look dirty on a dark background, and how to remove it.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Sort your image colours
Upload an image and see its palette ordered by hue.