Colour Palette from Image
Dominant colours from a photo or logo in your browser — median cut, 2–16 swatches ranked by share, near-duplicates merged — as hex, RGB, HSL and CSS variables.
Swatches in order of how much of the image they cover, each with hex, RGB, HSL, its share and the readable text colour on it, plus a :root block of CSS variables to copy.
Example: A photo sampled to 160 px wide gives 6 swatches: the sky blue at 38 %, sand at 27 %, two greens, a shadow grey and a near-white — white and black pixels are left out unless you widen the bounds.
Median cut,
ranked by how much of the picture.
How the pixels are sampled, how the swatches are found, and what the options change.
Sampling
The image is drawn on a small canvas (160 px wide, proportional height) and its pixels read back — a few thousand samples that represent the picture well enough for a palette while keeping the work instant. Transparent pixels are skipped. Pixels lighter or darker than the bounds you set (near-white paper, near-black shadows) are left out unless you widen the bounds, because they dominate most photos without being colours anyone wants.
Median cut
All sampled pixels start in one box. Repeatedly the box with the largest spread on any RGB channel is split on that channel at the median pixel — at the nearest boundary between different values, so identical colours are never divided — until there are as many boxes as swatches asked for. Each swatch is the mean colour of its box, ranked by how many pixels the box holds, which is why the first swatch is the dominant colour. Boxes closer than the merge distance are combined.
Reading the swatches
Share is the box's share of the pixels that were kept, and the text colour is chosen by relative luminance (black above 0.179, white below). A swatch is an average, so it may not match any single pixel exactly. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- Median cut (Heckbert, 1982): split the colour box on its widest channel at the median until k boxes, take each box mean; pixels sampled from a downscaled canvas; nothing uploaded
Last reviewed 22 September 2026. How results are checked: How we verify.