ColorMuse

How the colours are chosen

The obvious approach — count how often each exact colour appears and take the top six — works badly on photographs. A photo of a beach contains thousands of subtly different blues, none of them individually common, so counting returns six near-identical shades of sky and misses the sand entirely.

This uses median cut instead. Every sampled pixel starts in one box. The box with the widest spread in any single colour channel is sorted on that channel and split in half at the median, and that repeats until there are as many boxes as colours you asked for. Each box then averages to one swatch. Because the splitting follows where the colours actually spread out, you get the sky and the sand.

Swatches are ordered by how much of the image they represent, so the first one is the closest thing to a dominant colour.

When to pick by hand instead

Averaging is what makes the palette representative, and it is also its weakness. A single small object in a strong colour — a logo, a warning light, one flower — gets averaged into its surroundings and never appears as a swatch.

Click anywhere on the image to sample that exact pixel and add it to the palette. Hand-picked colours are marked and appear after the extracted ones, so a brand colour you need to match exactly comes out exact rather than approximated.

A palette is a starting point, not a design

Colours pulled from a photograph are related to each other in ways that are hard to invent, which is why the technique works. But dominant is not the same as usable: the most common colour in a photo is often a mid-tone that is too dark for a background and too light for text.

Treat the extracted set as raw material. Pick one as an accent, lighten or darken the others for surfaces, and check any text pairing with a contrast checker before committing — a palette that looks beautiful in a row of swatches can still fail at 4.5:1.

Formats and file types

HEX is the default because it is what most design tools and stylesheets expect. RGB and HSL are available from the format menu, and switching re-renders the swatches without re-analysing the image. HSL is the useful one if you intend to build a scale: hold the hue, move the lightness.

Anything your browser can decode works — JPEG, PNG, WebP, GIF, SVG. HEIC photos straight from an iPhone are the exception: only Safari decodes them natively, so on other browsers you will need to export as JPEG first.

Drop in a photograph and ColorMuse pulls out a usable palette — not just the most common colours, but a balanced set you can actually build an interface from.

It's one of the free tools in the util.quest collection — nothing to install, and no account needed. Found a bug or want a feature? Reach out at [email protected].