How to choose colours from an image
Compare dominant, balanced and saturated colour palettes. Learn why extractors differ and how to check sampled colours for contrast and practical use.
By ToolsNow · Published
Different palette methods can return different colours from the same picture. One may favour large areas of colour; another may make room for small, bright details.
In the image palette tool, compare dominant, balanced and most-saturated results. Pick the colours that suit your project, then check contrast separately if you will use them for text.
What the palette is meant to represent
A two-megapixel photograph contains up to two million colour values, and typically several hundred thousand distinct ones. You want six.
There’s no correct answer to which six. There are only different reasonable procedures, and choosing between them is a design decision most tools make silently on your behalf.
Method one: counting
The obvious approach is to count how often each colour appears and take the most common ones.
Applied naively to a photograph, this fails completely. Nearly every pixel has a unique 24-bit value, so the “most common” colour appears four times and your top six are meaningless. The fix is to round before counting: reduce each channel from 256 levels to 32 by dropping the low three bits, which groups visually indistinguishable colours into the same bucket. Now the counts mean something.
What you get is exactly “what is most of this image made of”. On a portrait against a wall, the answer is mostly wall. That isn’t a failure. It’s the correct answer to a question about area.
The weakness is that it spends slots on near-duplicates. A sky shifting gradually from one blue to another can fill four of your six slots with four blues that look the same.
Method two: dividing the colour space
Median cut, from Paul Heckbert’s 1982 paper, comes at it differently. Put every pixel in one box. Repeatedly find the box with the largest spread, split it along its widest axis at the median, and stop once you have as many boxes as you want colours. Each box’s average becomes a palette entry.
Splitting at the median means each box ends up holding a similar number of pixels. Splitting along the widest axis means boxes covering a wide range of colour get subdivided in preference to tight ones, which is exactly what stops four near-identical blues taking four slots.
The method has a limit, and it’s routinely overstated. Median cut halves the pixel population at each split, so a minority colour needs roughly 1/2ⁿ of the image to survive n splits. A colour occupying 1.5% of the frame won’t appear in a four-colour palette whichever method you pick. Give it eight slots and median cut finds it, while a popularity count still doesn’t.
One useful property: median cut is deterministic, so the same image always gives the same palette. K-means clustering, the other common approach, needs a random starting point, so hitting “regenerate” gives you a different answer each time. That sounds like a feature right up until you’re trying to reproduce yesterday’s result.
Method three: filtering first
Neither method above has any idea what an accent colour is. Both will happily hand you six greys from a photograph that’s mostly grey, even though the one vivid thing in the frame is what you actually wanted.
Filtering to pixels above a saturation threshold before clustering fixes that. It needs two guards. Exclude very dark and very light pixels as well, because hue goes numerically unstable near black and white and a saturation sort will otherwise surface essentially random values. And it needs a fallback, because a genuinely monochrome image has no vivid pixels, and an empty palette is a worse answer than a muted one.
Why “similar” is the hard part
Every method has to decide when two colours are close enough to group. The obvious measure is straight-line distance in RGB, and it disagrees with human vision badly.
RGB isn’t perceptually uniform. A distance of 30 units in the green region is barely perceptible; the same distance among dark blues is obvious. So clustering in RGB over-splits regions the eye barely distinguishes and merges ones it separates easily.
CIELAB, defined by the CIE, was built to fix precisely that. It’s designed so equal distances correspond to roughly equal perceived differences, with an L axis for lightness and a and b carrying the colour. Comparing in Lab gives noticeably better groupings, and costs you a matrix multiply and a cube root per conversion.
Even Lab is only approximately uniform, and it’s known to be least accurate in the blue region. Later formulas (CIE94, CIEDE2000) exist to patch that. For palette work the simpler CIE76 distance is almost always enough, because the ranking rarely changes.
Then there’s a subtler trap: gamma. sRGB channel values are gamma-encoded,
so averaging them directly isn’t averaging light. The midpoint of black and
white in sRGB arithmetic is #808080, which is far darker than half the
light. Any operation that blends colours, averaging a cluster or generating
tints, should convert to linear light first. Skip that and your results
come out consistently too dark.
Sampling, and why percentages are estimates
Reading every pixel of a 24-megapixel photograph to build a six-colour palette is wasted work. A sample of forty thousand pixels gives an indistinguishable result in a fraction of the time. Almost every tool samples, and few of them say so.
Which means reported frequencies are close estimates and not exact counts. For choosing colours that’s irrelevant. For a claim like “this image is 31.2% blue” it matters, and that figure deserves one decimal place fewer than it usually gets.
Transparency
Fully transparent pixels still have colour channel values, and in most PNGs exported by most editors those values are pure black. Include them and every palette from every logo drifts toward black.
Excluding them is why extracting from a logo on a transparent background gives you the logo’s colours instead of a black entry. It’s also a good quick test of whether a tool has thought about the problem at all.
Why these aren’t the brand’s colours
Be careful with this claim, because it gets made constantly and it isn’t true.
Several lossy steps sit between a brand’s specified colour and the pixels you’re sampling:
- JPEG compression shifts colour, and shifts it most in exactly the regions brands care about, since chroma subsampling stores colour at half resolution.
- Screenshots capture whatever the display and the operating system did, colour management included.
- Photographs add lighting, white balance and the camera’s own rendering.
- Colour profiles mean identical bytes are meant to be displayed differently. Ignore the embedded profile and you’ll get the wrong colour from a perfectly good file.
- Rendering and antialiasing blend edge pixels with the background.
An extracted palette is an accurate reading of this file. Where an official brand reference exists, that’s the authority. Extraction is a good way to get close and a bad way to be certain.
Contrast is a separate question
A palette that looks good tells you nothing about whether text will be readable on it. That’s a measurable property: the WCAG contrast ratio, computed from the relative luminance of both colours, running from 1:1 to 21:1. AA wants 4.5:1 for normal text and 3:1 for large. AAA wants 7:1 and 4.5:1.
Two things worth flagging. The ratio depends only on luminance, so two colours can be wildly different hues and still fail. A red and a green of similar lightness are nearly unreadable together, and they’re also the pair most likely to be indistinguishable to a colour-blind reader.
And a contrast result should always be stated in words as well as shown as a swatch, because a verdict communicated only by a red or green indicator is inaccessible to exactly the people it’s meant to help.
Sources and further reading
- Heckbert, P. “Color Image Quantization for Frame Buffer Display.” SIGGRAPH ’82 — median cut
- CIE 15:2018 Colorimetry — the definition of CIELAB and colour difference
- IEC 61966-2-1 — sRGB, including the gamma transfer function
- W3C — WCAG 2.2 Contrast (Minimum), with the relative luminance formula
- ITU-R BT.709 — the luma coefficients used for relative luminance
- International Color Consortium — what an embedded colour profile does
Last reviewed 31 July 2026.
More help with this topic
- Floyd–Steinberg, Atkinson and Bayer dithering compared
Compare dithering methods for photos, gradients and animation. See how error diffusion, ordered patterns and halftone dots change a limited-colour image.
- How to convert an image to pixel art with crisp edges
Choose a pixel grid, palette and export scale for a crisp result. Learn how image resizing, dithering and display settings affect pixel-art edges.
- How to cut a sprite sheet into animation frames
Set frame size, margins and spacing, fix a misaligned grid and export animation frames. Includes a practical sprite-sheet cutting workflow.
Published by ToolsNow. Read how tools and sources are checked.
Found a mistake or an outdated detail? Send a correction with the article title and the detail to review.