Color Palette from Image

How a palette is pulled out of an image

An image can contain tens of thousands of distinct colors, but a usable palette has only a handful. Reducing one to the other is a clustering problem: group all the pixels into a few buckets so that the pixels in each bucket are as similar as possible, then report the average color of each bucket. This tool solves it with k-means clustering, the same algorithm used across data science to find natural groupings in numerical data. Here each pixel is a point in three-dimensional RGB space, and the "average" of a cluster is the average of its pixels' red, green, and blue values.

Everything happens locally. The image is drawn onto a hidden <canvas>, the pixels are read back with getImageData, and the clustering runs in JavaScript on your device. Your photo is never uploaded to a server.

The algorithm, step by step

To keep things fast, the image is first scaled down to at most 200×200 pixels, and the tool samples up to 5,000 of those pixels (skipping any that are more than half transparent). Then k-means runs for up to 20 iterations:

1. Seed. Pick k random pixels as the starting cluster centers, where k is the color count you chose (5 to 10).
2. Assign. Put every sampled pixel into the cluster whose center is nearest. Distance is measured as squared RGB distance: (r1−r2)² + (g1−g2)² + (b1−b2)².
3. Update. Move each center to the mean color of the pixels now assigned to it.
4. Repeat until no pixel changes clusters or 20 passes elapse.

The clusters are then sorted by size, so the colors that cover the most of the image appear first. Each swatch is shown as HEX, rgb(), and hsl(), and the card's label text flips between dark and light based on the swatch's luminance (0.299·R + 0.587·G + 0.114·B) so it stays readable.

A worked example

Imagine a beach photo: a wide band of blue sky, paler blue sea, golden sand, and a few bright umbrellas. Ask for 6 colors and k-means will likely settle on two blues (one for sky, one for water), a warm sand tone, and a couple of saturated umbrella hues. Because clusters are size-sorted, the sky blue — covering the most pixels — leads the palette, while a tiny red umbrella that occupies few pixels may not earn its own cluster at all. Raising the color count to 9 gives the smaller regions a better chance of separating out.

Three styles, and what they filter

Both filtered styles also drop near-black and near-white extremes. If a filter would leave nothing, the tool falls back to the full dominant set so you always get a result.

Common use cases

Designers use extracted palettes to build a color scheme around a hero photograph, so the interface and the imagery agree. Front-end developers export the palette as CSS custom properties (--color-1 through --color-n) and wire them straight into a theme. Data-visualization authors pull distinct hues from a brand image for chart series, and presentation makers match slide accents to a cover photo. The JSON export gives the same colors in HEX, RGB, and HSL for use in any other tool.

Tips and common mistakes

• Results shift slightly between runs. k-means starts from random seeds, so re-extracting the same image can reorder or nudge colors. Run it twice and keep the version you prefer; this is expected, not a bug.
• Photos with one giant flat area starve the smaller colors. If a logo sits on a huge white background, much of the palette becomes shades of white. Crop to the area you care about first.
• Pick the right style for the job. Choosing Vibrant on a soft pastel photo can leave very little to work with — Muted or Dominant will represent it better.
• More colors is not always better. Asking for 10 from a simple two-tone graphic just produces near-duplicate swatches. Match the count to the image's real complexity.