image tool
Palette extractor
Drop a photograph and get the colours it is actually made of, shown as a band at their true share of the picture, with a background, a body text colour and an accent already picked out and checked for contrast.
Runs on your device. Nothing is uploaded.
Loading the tool…
How to use it
- 1
Drop an image
A photograph, a screenshot or a logo. It is decoded in this tab and never uploaded.
- 2
Read the proportion band
The band under the picture is the palette at its true share of the pixels, so you can tell a colour that is in the image from a colour that is the image.
- 3
Tap a swatch to find it
The picture redraws with everything outside that cluster greyed back, so you can see exactly where the colour lives. The hex is copied at the same time.
- 4
Take the roles, not just the hexes
Background, surface, border, heading, body text and accent are assigned for you and checked against each other, with anything invented marked as derived.
- 5
Copy it into the project
One tap gives you CSS custom properties. Advanced options add Tailwind, SCSS, JSON and a downloadable swatch sheet.
Why the clustering happens in CIE Lab
Pixels are grouped by k-means, seeded with k-means++ so the starting centres are spread out rather than lucky, and the whole thing runs in CIE Lab rather than in RGB. That matters because a step of ten in Lab looks roughly like a step of ten anywhere in the space, while a step of ten in RGB means something quite different in a shadow than it does in a highlight. Clustering in RGB is what produces the muddy near duplicates you see from a lot of extractors.
What the sampling does and does not change
A large photograph is reduced before clustering, using nearest neighbour rather than smooth scaling. Smooth scaling averages neighbouring pixels and invents in between colours that were never in the picture, which is exactly the wrong thing to do when the question is which colours are present. Nearest neighbour throws pixels away instead, so every value that survives is a value that was really there. Clusters that settle on visually identical colours are then folded together, which is why asking for eight can hand back five.
Share is the number that changes a design
A colour at forty per cent of the pixels is the background of your layout. A colour at two per cent is where the eye should go. The old sixty, thirty, ten split is a rough version of the same idea, and the band under the picture shows you what the split already is. Building a theme from the largest number alone tends to produce something that looks like the photograph rather than something that works next to it.
Roles are the part you actually use
A list of hex codes is not a palette. The page picks a background from the extreme end of the lightness range, takes the highest contrast colour for text, and if that colour does not clear four and a half to one it moves its lightness in OKLCH until it does, keeping the hue so it still reads as the same colour. Borders and surfaces are mixed from the background. Every derived value says so.
Your image never leaves the page
The file is decoded by your browser and drawn onto a canvas in this tab. There is no upload, no account and no server, which you can confirm in the network tab: choose a file and watch nothing happen. That matters for the ordinary case where the picture is a product shot before launch, a screenshot with customer data in it, or a photograph you were trusted with.
Limits
- A swatch is the average of its cluster, so it is representative rather than an exact pixel. Use the colour picker when you need the exact value.
- Sampling stops at ninety thousand pixels, which is ample for the dominant colours and will miss a rare one.
- Pixels that are more than half transparent are skipped.
- A canvas reads decoded pixels, so a wide gamut file such as a Display P3 photograph can report values a colour managed editor shows differently.
What it does not do
- It does not invent colours beyond the surface and border roles, and those two are labelled as derived.
- It does not build a full tint and shade scale. The colour converter has a ramp for that.
- It does not store palettes, and there is no account to sign into.
Questions people ask
How many colours should a palette have?
Three to five for a design: one dominant, one secondary, one accent and your text colours. Ten is useful for understanding a picture, not for building with, because a layout using ten colours usually reads as having none. Start at the default of six, look at the proportion band, and cut the ones with a tiny share unless you want them as accents.
Why did I ask for eight colours and get five?
Because clusters that land on visually identical colours are merged afterwards, using the CIEDE2000 difference rather than a raw hex comparison. A flat graphic or a logo genuinely has only a few colours, so asking for more just splits one of them in two. Handing you five real colours is more useful than eight where three are the same blue.
Why is a swatch slightly different from the picture?
Each swatch is the average of every pixel in its cluster, which is what turns thousands of shades into a handful you can design with. A sky is not one blue, it is a gradient, and the swatch is its centre. When you need the value at one specific point rather than a representative one, the colour picker gives you the exact pixel.
What does the percentage next to a colour mean?
It is the share of the sampled pixels that fell into that cluster, so it answers how much of the picture the colour accounts for. It is not a measure of importance. A logo occupying three per cent of a photograph can still be the thing the picture is about, which is why the accent role looks at saturation as well as size.
Can I use these colours straight away?
The roles below the palette have already been checked, and any text colour that did not clear four and a half to one has been adjusted until it did. The raw swatches have not. A palette lifted from a photograph very often has two mid tones that look lovely together and fail as text on background, so run the pair through the contrast checker first.
Does it work on screenshots and logos?
Yes, and it is often better there than on a photograph. A screenshot has large flat areas of brand colour, so the clusters come back almost exactly, and merging removes the antialiased edges that would otherwise appear as near duplicates. It is a quick way to recover a palette from an old design when the source files are long gone.
Is my image uploaded anywhere?
No. It is decoded by your browser, drawn onto a canvas in this tab and read back from there. No network request is made after the page loads, there is nothing to sign into and nothing is stored. Close the tab and the image is gone from the page along with everything derived from it.
Design something in these colours
Take what you made here into flyers.
Create a flyer with OneCraftRelated tools
- Colour picker from imageDrag a magnifier across a picture and read the pixel under it as hex, RGB, HSL and OKLCH, with sample averaging, arrow key nudging and a history of picks.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
- Flatten a PDF formRead every field in a filled PDF form with its answer, fix what is wrong, then bake the answers into the page. Runs in your browser with nothing uploaded.
- JPG to PDFEach photo becomes a page you can see, turn, reorder and remove before the PDF exists. Drag with a finger or the arrow keys. In your browser, nothing uploaded.
- Image colour changerTap a colour in the image, pick its replacement, and see a mask of exactly which pixels change. Runs on your device, so the artwork is never uploaded.
Written and checked by the OneCraft team. Last checked .