Palette extractor
What Palette extractor actually does
Most palette extractors give back five or six colours and a percentage beside each one, and almost none of them will tell you what the percentage counts. It matters, because there are two numbers a tool can print there and only one of them is about your picture. Quantizers work by cutting the colour space into boxes and most cut each box so that half the pixels fall on either side, which means the population of a box is decided by the algorithm before it ever looks at the image; print that and every palette comes out at fifty, twenty five, twelve and a half percent no matter what you feed it. The number worth having is the other one: assign every sampled pixel to whichever published colour is nearest it, then count. That is what this page reports, and because the same assignment paints the picture beside the swatches, selecting a colour shows you exactly the pixels the percentage counted. A palette you can check is a different thing from a palette you have to trust. Colour is read after the browser converts the image to sRGB, which matters more than it sounds: a photograph from a recent phone is usually tagged Display P3, and reading its raw channel numbers as hex gives codes that are wrong by as much as forty eight levels once a stylesheet paints them.
How to use it
- Choose an image. It is decoded in this tab and sampled down to at most 256 pixels on the long edge, which is plenty to decide dominance and keeps a 48 megapixel photograph responsive.
- Pick how many colours you want, between 2 and 32. Median cut proposes that many candidates, then one refinement pass moves each candidate onto the pixels that actually chose it, so a colour that is not in the picture does not end up in the palette.
- Read the coverage. Each swatch carries its percentage and its raw pixel count, and selecting a swatch greys out everything the colour did not claim so the number can be checked against the picture rather than believed.
- Shape the output. Rename a variable, drop a colour you do not want, switch between CSS, SCSS, Tailwind, JSON and bare hex, then edit the code directly before copying or downloading it.
Useful for
- Take the colours out of a photograph, a screenshot or a logo and paste them straight into a stylesheet as custom properties or Tailwind theme values.
- Work out which colour in an image is genuinely dominant rather than merely present, which is the difference between a background and an accent.
- Check a palette a different tool produced, by comparing its percentages against a coverage map that shows where each colour actually falls.
- Get a readable ink colour for each swatch, chosen by WCAG contrast, so text placed on that colour is legible without guessing.
Limits worth knowing
- The palette is median cut with one refinement pass, not k-means. It is deterministic and fast and it will sometimes split a smooth gradient where a person would not.
- Sampling is capped at a 256 pixel long edge. The cap bounds the analysis, not the decode, so a very large image is still fully decoded before it is sampled.
- Colour is read in sRGB after the browser converts the image. The original wide gamut values are not preserved, and neither is the embedded profile.
- Pixels that are less than half opaque are ignored, so a mostly transparent image is judged on the part of it that is actually there.
- Animated GIF and animated WebP are read as their first frame.
Questions people ask
Why do the percentages differ from another palette tool?
Most tools report the population of the cluster or box they cut, which is largely fixed by the algorithm. This page assigns every sampled pixel to its nearest published colour and counts, so the number describes the image. Selecting a swatch shows the pixels that were counted.
Why are the hex codes different from what my camera app shows?
A recent phone usually tags its photographs Display P3. The browser converts the image to sRGB before the colours are read, so the codes here are the ones a stylesheet will actually paint. Reading the raw channel values instead can be wrong by up to forty eight levels on a saturated colour.
Is my image uploaded?
No. The image is decoded and sampled in this tab and nothing is sent anywhere.
Why did I ask for eight colours and get six?
Median cut stops when no box can be split any further, which happens when the image does not hold that many distinct colours. The page says so rather than padding the palette.