Color Palette Extractor

What is this for?

This tool reads an image, samples a few thousand pixels, and groups them into 3–10 dominant colour buckets using a hand-rolled median-cut quantization algorithm. The result is a small set of representative hex colours you can use as the seed of a design system, the basis of a moodboard, or a quick way to lift the brand colours out of someone else's logo. Everything runs in your browser; the image is never uploaded.

When to use it

• Lift the dominant colours out of a brand logo so you can build a matching theme.
• Seed a Tailwind config or CSS custom-properties block from a hero image.
• Build a moodboard palette from a photograph or piece of artwork.
• Sanity-check that a design hero image and the page's accent colour agree.

How median-cut works

1. Down-sample the image to keep the pixel count manageable.
2. Find the longest axis of the pixel cloud (R, G, or B range).
3. Sort along that axis, split at the median.
4. Recurse into each half until you have the number of buckets you asked for.
5. Return the average colour of each bucket.

Common gotchas

• Transparent regions are skipped. Pixels with alpha < 50% don't contribute to the palette — useful for logos on transparent backgrounds.
• Photos with one dominant colour (e.g. a beach shot with lots of blue sky) will give you several shades of that colour rather than a varied palette. Crop to a more colourful region if you want range.
• Median-cut is fast but not perceptually perfect. If you need colour-theory quality output (complementary, analogous), you'll still want a designer in the loop — the algorithm just picks the most common, not the most aesthetically pleasing.
• The slider counts buckets, not "important" colours. Asking for 10 from a 2-colour logo will still give you 10 — they'll just be near-duplicates.