Colour Palette Extractor

An algorithm that clusters image pixels by colour and returns the cluster centres as a representative palette. This tool uses k-means – a standard, fast algorithm that settles on k colours in 20 iterations or fewer.

5 is a good default for most brand palettes. Try 3 for a minimalist scheme, 8-10 for richer illustrations, and 16 for dense photographs where you want to capture every tonal group.

Hex (#FF5733) is the web-native compact form. RGB names the Red/Green/Blue channels explicitly (rgb(255, 87, 51)). HSL (hsl(9°, 100%, 60%)) separates hue from lightness – easier for humans to reason about. The tool emits all three for every swatch.

No. Decoding, downsampling, sampling, k-means, and rendering all happen in your browser. The image never leaves your device – there are no fetch calls on your image data.

Yes. The k-means routine tracks the final cluster pixel counts and exposes them on every colour object. The frequency sort is real – earlier builds of the tool had a comment saying this was “skipped for now”, but the current build implements it properly (and shows the percentage under each swatch for transparency).

K-means starts from random initial centroids, so different runs converge to slightly different local optima. The Re-extract button lets you try another run; for most images the differences are minor and the dominant colours are stable.

Anything with a side longer than 2000 px is downsampled to a maximum of 400 px before clustering. This keeps the pixel count manageable and makes extraction complete in well under a second. For palette work the downsample has no visible impact – colour clusters are scale-invariant.

Yes. Pixels with alpha ≤ 128 are ignored during sampling, so transparent or near-transparent areas don’t contaminate the palette with background grey.

Three ways. JSON gives you the full data structure (hex, RGB, HSL, count, frequency%). CSS gives you :root custom properties (--color-1, --color-2, …) ready to drop into a stylesheet. SVG gives you a horizontal swatch strip for Figma / Illustrator / design tool import.

That’s exactly the intended use. Upload a photograph, brand asset, or artwork, pull the palette, and drop the CSS into your design system. The frequency stat makes it easy to spot the true “hero” colour vs. supporting tones.