What does a colour palette extractor do?
A colour palette extractor analyses an image pixel by pixel, groups similar colours together, and identifies the most dominant or representative colours in the image. The result is a small set of colours — typically 5–12 — that captures the visual essence of the image. These colours can be used to build colour-consistent UI themes, create brand palettes, match design elements to photography, or understand the colour distribution in a dataset of images.
The k-means clustering algorithm
The tool uses k-means clustering to find dominant colours. The algorithm starts by sampling the image pixels, then picks k initial cluster centres (one per colour in the palette). It then repeatedly assigns each pixel to its nearest cluster and recalculates each cluster's centre as the average of its assigned pixels. After several iterations, the centres converge to stable values that represent the dominant colour regions in the image.
Very dark (near-black) and very light (near-white) pixels are excluded from sampling by default, because these extremes often represent shadows, highlights, and image backgrounds rather than the actual subject's colours.
Choosing the right palette size
Five colours gives a lean, high-contrast palette with the most dominant hues — good for brand palettes and limited-colour design systems. Eight colours (the default) is a good balance for most purposes — rich enough to capture secondary colours and accent tones. Twelve colours is useful for photography analysis, where you want a more complete picture of the colour distribution including subtle background tones.
Export formats
CSS variables export produces a :root block that you can paste directly into your stylesheet and use as var(--color-1) through var(--color-8) throughout your project. JSON array export produces a simple array of hex strings, compatible with any tool that reads JSON data. HEX list produces a plain newline-separated list of hex codes, suitable for pasting into Figma, Sketch, Adobe products, or any tool with a hex colour import.
Practical applications
Brand palette extraction from photography: upload your brand's hero image and extract the palette to ensure your UI colours harmonise with your visual style. UI theme generation: extract colours from a product photo and use them to build a product-specific card or banner theme. Content-aware design: for editorial or news sites, extract palettes from article hero images and apply them to article headers for a visually cohesive feel. Competitive analysis: extract the dominant palette from a competitor's landing page screenshot to understand their visual positioning.