Image color palette extractor
Upload a photo or paste it with Ctrl+V and get its real palette of dominant colors with k-means++ clustering. HEX, RGB, HSL, dominance share, CSS variables and JSON export. All analysis happens in your browser.
Drop an image here, paste it with Ctrl+V or pick one:
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Harmonic palettes are invented from a base color; this tool does the opposite: it reads the colors already in your image. It reduces the photo to a grid of thousands of pixels, clusters them with k-means++ (the smart-initialization variant that avoids poor groupings from bad luck), and returns each cluster as a color with its dominance share — how much of the image that color really carries. No servers, no cloud AI: the clustering runs in your browser with Canvas and integer math, with a fixed seed so the same image always produces the same palette.
Features
- ✓K-means++ with fixed seed: deterministic palette
- ✓3 to 12 colors ranked by real dominance
- ✓HEX, RGB and HSL with one-click copy
- ✓Export as CSS variables or JSON
- ✓Drag and drop, paste with Ctrl+V or file picker
How to extract a color palette from an image?
- 1
Load the image
Drag it into the box, paste it with Ctrl+V or pick the file. It is never uploaded to any server.
- 2
Choose the color count
Adjust the slider from 3 to 12 colors; the palette recalculates instantly.
- 3
Read the colors
Each swatch shows HEX, RGB, HSL, its dominance share and which text color is readable on top.
- 4
Copy or export
Copy all HEX values, the CSS variables for your stylesheet, or download the palette as JSON.
Frequently asked questions
How is this different from the Palette Generator you already have?
The Palette Generator creates harmonic combinations from a color you pick (complementary, analogous, triadic). This tool invents nothing: it reads the dominant colors actually present in an image, with their real pixel weight.
Why do two similar images give somewhat different palettes?
K-means clusters by distance in RGB space, so small exposure or compression shifts move the centroids. What doesn't change is the seed: the same image with the same color count always produces exactly the same palette.
What resolution does it actually analyze?
The image is downscaled to at most 320 px per side and sampled to 60,000 pixels — more than enough for stable dominants, and it keeps the calculation under a second even with large photos.
Related tools
Embed Image Color Palette Extractor on your site
Add Image Color Palette Extractor to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/color-palette-extractor"
width="100%"
height="700"
frameborder="0"
title="Image Color Palette Extractor — miguelacm.es"
></iframe>