Dominant Color
Color Palette Extractor
Upload any image and extract its dominant colors using k-means clustering. Copy HEX, RGB, or HSL values instantly — or export as CSS, JSON, or PNG.
Drop an image here
PNG, JPG, WebP, GIF, AVIF — processed entirely in your browser
orBrowse file
Extracted Palette
Clustering colors…
Upload an image and click Extract to see the palette here.
Advertisement
About this color palette extractor
This tool pulls a real colour palette straight out of any image you give it. Drop in a photo, logo, screenshot, or illustration and it runs k-means clustering over a sampled subset of the pixels — grouping similar colours into 6, 8, or 10 dominant clusters and reporting each as precise HEX, RGB, and HSL values with the percentage of the image it covers.
Because it reads the actual pixels rather than guessing, the result reflects what a viewer truly sees. From the dominant colour it also derives five harmony groups — complementary, triadic, analogous, split-complementary, and tetradic — so you get a usable scheme, not just a list of swatches. People use it to:
- Reverse-engineer the exact colours in a brand logo, poster, or competitor's site screenshot.
- Turn a mood-board photo or piece of artwork into a coordinated UI or design palette.
- Generate matching complementary and analogous accents from a single hero image.
- Export CSS custom properties, JSON tokens, or a shareable PNG swatch sheet for a design system.
Everything is local and in-browser: the image is decoded onto a hidden canvas and analysed on your device. Nothing is uploaded to a server, so it is safe for confidential brand assets and NDA-protected client work.
How to use
- Upload an image — drag & drop onto the box, click Browse file, or paste from clipboard with Ctrl/Cmd V.
- Choose how many colours to pull out (6, 8, or 10) using the Colors dropdown.
- Pick a Sort by order — frequency, hue, brightness, or saturation — then click Extract.
- Review the dominant colour, its harmony groups, and every swatch's coverage percentage; click any HEX / RGB / HSL chip to copy that value.
- Export the whole palette as a PNG swatch sheet, CSS variables, or JSON tokens, or hit Change image to start over.
FAQ
It runs k-means clustering on a sampled subset of the image's pixels. The image is scaled to a maximum of 800px, sampled on a grid, and similar colours are grouped into the number of clusters you ask for. The clustering iterates up to 12 times to settle on stable averages, and each cluster's centre becomes one palette colour.
From the dominant extracted colour the tool builds five classic colour-theory schemes: complementary (the opposite hue), triadic (two hues 120° apart), analogous (neighbouring hues), split-complementary, and tetradic (a four-colour rectangle). Each derived swatch is shown with its HEX so you can click to copy and build a coordinated scheme.
The dropdown offers 6, 8, or 10. Use 6 for a tight brand or UI palette, 8 — the default — for a balanced design system, and 10 to surface subtler tones in a detailed photo. More colours reveals minor accents; fewer keeps only the most dominant ones.
Yes. The Sort by dropdown reorders swatches by frequency (largest coverage first), hue (rainbow order), brightness, or saturation. Changing it re-sorts the existing palette instantly without re-running the extraction.
Every swatch shows HEX, RGB, and HSL chips — click any chip to copy that exact value to your clipboard. For the whole palette, the export buttons give you CSS custom properties, a JSON object with all three formats plus coverage, or a downloadable PNG swatch sheet.
Click CSS to copy a :root block of --color-1 … --color-n custom properties you can paste straight into a stylesheet. Click JSON for structured tokens to import into a design system, or paste any copied HEX into Figma, Sketch, or your editor's colour picker.
No. The image is decoded onto a hidden canvas and all analysis runs in your browser on your own device. Nothing is transmitted to a server, so it is safe for confidential brand assets and NDA-protected client files.