Image Color Palette Extractor
Drop any photo and pull out its dominant colours as hex codes in seconds. Export as CSS variables, Tailwind config, or SCSS - and check whether they meet contrast requirements for web use.
Drop an image to extract its palette
JPG, PNG, WebP, GIF — processed entirely in your browser
or paste from clipboard (Ctrl+V)Extracted palette
Palette stats
Color harmonies — click any swatch to copy
Learn more: why k-means beats a pixel average
Averaging pixels gives mud
If you averaged every pixel in a photo of a red apple on a green cloth, you would get a muddy brown that appears nowhere in the picture. The tool clusters the colors instead. PyImageSearch's walkthrough of k-means color clustering describes the same idea: treat each pixel's red, green and blue values as a data point and cluster the points to find the dominant colors.
The tool samples up to about 8,000 pixels, picks starting centers with the k-means++ method, which spreads them out, and then repeats two steps. It assigns every sample to its nearest center, then moves each center to the average of its pixels. It stops after at most 20 rounds, or sooner once the centers barely move. Distances are measured in RGB space, and the palette is sorted by how many pixels each color holds.
Excluding grays and vibrant only
Shadows, skies and neutral backgrounds can dominate a clustering pass without adding much to a palette. "Exclude grays" drops pixels with HSL saturation under 12%. "Vibrant only" keeps pixels with saturation of at least 25% and lightness between 10% and 92%. Both filters run before clustering.
What you can do with the palette
Each color shows its HEX, RGB and HSL values and how it contrasts with white and black on the WCAG scale. The tool also builds harmony sets from the dominant color, a UI preview, and exports as CSS variables, SCSS, a Tailwind config or a PNG swatch.
FAQ
Why does the same photo give slightly different colors each time?
The starting centers are chosen with randomness, so small differences between runs are normal, mainly when several color groups are similar in size. The dominant colors should stay the same even if the exact HEX values shift a little.
How many colors should I extract?
Enough to capture the photo without near-duplicate shades. Try a few counts and keep the one where each swatch looks distinct. The number you choose is the number of clusters.
Can I export the palette as CSS variables?
Yes. The tool exports CSS custom properties, SCSS variables and a Tailwind color config, as well as a list of HEX codes and a PNG swatch.