How to Extract a Color Palette From an Image

The technique

K-means clustering finds the most common color groups in a photo and returns each group's centroid color plus the percentage of pixels it covers.

The algorithm works in three steps. First, it samples pixels from the image (usually every Nth pixel for speed). Second, it picks K random starting centroids in color space. Third, it repeatedly assigns each pixel to its nearest centroid and moves the centroid to the average of its assigned pixels, until the centroids stop moving. The result is K cluster centers that represent the dominant colors.

Color space choice matters. Running k-means in RGB is fast but doesn't match human perception well — distances in RGB don't correspond to perceived color differences. Running in LAB or HSL color space produces palettes that feel more accurate but cost slightly more CPU. The freeimgtool extractor uses LAB by default for that reason.

Step-by-step

Using our free palette extractor:

• Open the Color Palette tool.
• Drop a photo.
• Pick 5 (a useful default; raise to 8-10 for richer palettes).
• Click Extract palette.
• Copy each hex code into Figma or CSS.

Designing from extracted palettes

Hero photo for a landing page → palette → use the dominant color for backgrounds and a contrasting secondary for CTAs. Album art → palette → music player skin. Product photo → palette → consistent shop feed.

A common pattern: pull the palette, then sort the swatches by lightness. Use the lightest one as your background, the darkest one as your text, and the most saturated middle swatch as your accent. That gives you accessible contrast almost automatically because the photo's natural light range maps onto the contrast you need for readable UI.

Don't use every color in the palette in the final design. Pick three: a dominant neutral, a darker text color, and one accent for emphasis. The other extracted colors are useful as informed alternates when you need a fourth or fifth color for charts or illustrations.

K-means versus other algorithms

Median cut is the older alternative. It splits color space at each step along the axis with the widest range. It's faster than k-means and used to be the default in image quantisation (the algorithm that turns true-color images into GIF palettes). For palette extraction, median cut produces more uniform coverage but misses small accent colors that occupy only a few pixels.

Octree quantisation builds a tree where each node represents a region of color space, and merges nodes until only K leaves remain. It produces good results for photographic content but is harder to tune for stylistic palettes.

Modal color extraction picks the single most common color in the image and is essentially useless for design work — it always returns whatever shade of beige or gray dominates the photo. K-means is the right default for design palettes because it balances frequency and perceptual distinctness.

Real-world: how brands use extracted palettes

Spotify's Now Playing screen famously extracts a palette from the album cover and uses the dominant color as the background tint. The implementation pulls the top three swatches and picks the one with sufficient contrast against white text. The result is that every artist's page feels custom without designers touching it.

E-commerce product pages do the same: extract a palette from the hero shot and tint the page accent (badges, hover states, the active filter color) to match. A shopper browsing a navy blue jacket sees navy-tinted UI; the same template viewed on a coral dress shows coral accents. The shift is subtle but increases the perceived polish of the catalog.

Bands and DJs pull palettes from cover art for their merch and ticketing pages. Tour books and event microsites lifted from an album palette stay visually anchored to the music without a designer building a separate palette for each release.

When extracted palettes don't translate to good design

Photos with murky lighting or mixed white balance produce palettes with desaturated, muddy swatches. The palette technically represents the photo, but it doesn't make a good brand. Re-shoot the source or pick a different photo.

Heavily filtered photos (heavy Instagram filters, retro tints) produce palettes that match the filter, not the underlying subject. If you want the palette of the actual product, extract from a clean, neutral-lit shot, not the social-ready edit.

Stock photos with a heavy color cast — that gold-tinted lifestyle photography style, or the blue-tinged tech aesthetic — produce palettes dominated by the cast color. The accent swatches that come out are usually the only useful ones; ignore the dominant neutrals if they're just the filter showing through.

Frequently asked questions