MultiKit

Color Palette Extractor: The Main Colors of a Picture

  • Free
  • No sign-up
  • Runs in your browser
  • Version 1.0.1
  • Last updated 2026-10-25
Report a problem

Drop in a picture and get its main colors as hex codes, most common first, each with roughly how much of the picture it covers. Useful for matching a brand color, building a palette from a photo, or picking colors for a design.

Everything you enter is processed in your browser and is never sent to a server.

How to use

  1. Drop a picture onto the box, or choose it.
  2. Choose how many colors to find, from 4 to 12. Fewer gives the boldest, most distinct colors; more picks up smaller details.
  3. Press Copy next to a color to copy its hex code, or Copy all as CSS variables to get all of them at once, ready to paste into a stylesheet.

Examples

A photo of a red apple on a white table
→ A white close to #f5f5f0 (largest share) and a red close to #c0392b
The background usually takes the largest share unless the subject fills the frame.
6 colors requested from a flat, 3-color logo
→ The 3 real colors, each with a larger share, since there is nothing else to split them with
Asking for more colors than a simple picture has just gives the same colors a cleaner split.
Copy all as CSS variables
→ A :root block with --color-1 through --color-N
Paste directly into a stylesheet.

How it works

The picture is shrunk to at most 200 pixels on the longer side before anything else, since a palette is a summary and does not need every pixel, and this keeps the page fast even on a large photo. Its pixels are quantized to the chosen number of colors with gifenc (MIT), the same open-source library used by the GIF maker, then every pixel is mapped to its nearest color in that palette and the pixels per color are counted. The colors are shown most common first, by that count.

The counting and sorting are covered by tests; the quantizing itself, a third-party routine, is exercised through the page in a real browser.

Sources

Frequently asked questions

How are the colors chosen?
By quantizing: grouping the picture's pixels into the requested number of clusters by color closeness, and taking the average color of each cluster. This is the same kind of step a GIF encoder uses to fit a picture into a limited palette, not an artistic judgement of 'good' colors.
What does the percentage mean?
The share of the picture's pixels that land closest to that color, out of all the pixels sampled. It adds up to 100% across the colors shown, since every pixel counts toward exactly one of them.
Why didn't a color I can clearly see show up?
It may be a small part of the picture, folded into a cluster with a similar nearby color at the chosen color count. Raising the number of colors to find usually brings it out.
Does it work on photos as well as flat graphics?
Yes, though a photo has far more distinct colors than a logo, so with only a few colors requested the result is more of a summary than an exact list.
Is my picture uploaded?
No. The colors are worked out in your browser.
Version history
  • 1.0.1 — Clarifies the search title with the tool's main task and whether it is free or runs online.
  • 1.0.0 — First release.

Last updated: