Color palette extractor
How the colors are found
The tool counts how many pixels fall into each shade, then splits the shades into groups with a method called median cut: it repeatedly divides the biggest group along its widest color range. Each group becomes one color, using the true average of its pixels, so a solid red area comes out as exactly that red.
Colors that look too alike are merged, measured with the CIELAB color space that models human vision. That keeps the palette varied instead of returning five shades of the same blue. The result is the same every time for the same image.
Good to know
- Your image is analyzed in your browser and never uploaded.
- Transparent pixels are ignored. Turn on "Ignore white" to skip a white background.
- The percentage shows how much of the image each color covers.
Using a palette in a design
Start with the largest color in the image for backgrounds or main areas, then use a smaller accent color for buttons or headings. Copy the hex codes exactly, because a small change in a hex code can change the color. If a white background is crowding out the colors you want, turn on Ignore white and extract again.
Questions
Is my image uploaded?
No. The colors are calculated in your browser and the image stays on your device.
Are the hex codes exact?
Each color is the average of a group of similar pixels, rounded to the nearest whole value. A flat area of one color returns that exact color.
Why did I get fewer colors than I asked for?
If an image has fewer distinct colors than you requested, only those colors are returned.
How do I use the palette in my design?
Copy the CSS variables into a stylesheet, copy the JSON for a design tool or script, or save the palette image to share.
Does it read the colors of a photo accurately?
It reads the pixels as your browser shows them, in the sRGB color space. Photos taken in wider color spaces are converted by the browser first.
How many colors should I extract?
The tool lets you choose 4, 6, 8, 10 or 12. Start with 6, the default, and ask for more only if the result misses a color you need. Colors that look too alike are merged, so you may get fewer than you asked for.
Can I use the colors in CSS?
Yes. Copy the palette as CSS variables, or as JSON if you are building a design system or a script. The hex, RGB and HSL values are shown for each color.