MSRX Tools

Color Palette Extractor

Pull the dominant colours out of a picture as hex, RGB or CSS.

Everything runs inside your browser. Your files never leave your device.

Drop your files here

.jpg, .jpeg, .png, .webp, .avif, .gif, .bmp · they stay on this device

Ask about Color Palette Extractor

Questions about what this tool does, which option to pick, or what it can and cannot handle.

The question you type here is sent to an AI provider to be answered — your files and whatever you put in the tool above are not, and the assistant cannot see them. Answers are generated and can be wrong. The tool itself is not guessing: it runs deterministic code on your device.

About the Color Palette Extractor

Pulling the dominant colours out of an image is how a design gets tied to a photograph, how a brand palette gets derived from a logo, and how a page gets a background that belongs with its hero image.

This samples the picture and reports the colours it is actually built from, as hex, RGB, HSL or as CSS custom properties, alongside a swatch strip you can check by eye.

The algorithm is median cut rather than averaging or k-means, and the difference is visible. Averaging a photograph gives you brown, every time, because averaging distant colours lands in the middle of the colour space. K-means gives slightly better centroids but needs several passes and a starting guess. Median cut repeatedly divides the colours into boxes along their widest axis and takes the centre of each, which returns the colours the image is composed of rather than a blend of them.

Near-white and near-black are filtered out by default, and that filter is doing more work than it appears. Most photographs are substantially sky or shadow and almost every screenshot is mostly background, so without it the palette comes back as five shades of off-white and one real colour. The filter can be switched off when the background genuinely is the subject.

The sampling runs on a scaled copy of the image, which makes the result identical on a phone and a laptop and fast on both. Colours are ordered by lightness so the strip reads as a ramp.

One thing to check before using a pair as text on background: run them through a contrast checker. A palette that came from a photograph has no obligation to be accessible.

How to use it

  1. 1Drop in the image you want a palette from.
  2. 2Choose how many colours to extract — five or six is usually enough to characterise a picture.
  3. 3Leave the near-white and near-black filter on unless the background is genuinely the subject.
  4. 4Download the swatch to check by eye, and test any text-on-background pairing for contrast before using it.

Questions

Why not just average the colours?
Because averaging distant colours lands in the middle of the colour space, which is brown. Median cut divides the colours into groups first and reports the centre of each, so you get the colours present rather than a blend of them.
Why is the white background not in my palette?
It is filtered out by default, because most images are mostly background and the palette would otherwise be several shades of off-white. Switch the filter off to include it.
How many colours should I extract?
Five or six characterises most images. More than eight and the extra entries are usually variations of ones already listed rather than distinct colours.
Are the colours accessible for text?
Not necessarily. A palette taken from a photograph reflects the photograph, not any contrast requirement. Check any pairing you intend to use for text against a contrast checker before relying on it.