Click a colour to copy its HEX code. The percentage is how much of the image it covers; near-identical shades are merged, so simple images may show fewer colours.
This color palette extractor finds the main colors in a photo, logo or screenshot. Drop an image to get its palette as HEX and RGB codes, see how much of the image each color covers and copy them in one click.
How to use the Color Palette Extractor
- 1 Drop an image on the box or click to choose it.
- 2 Choose how many colors you want in the palette.
- 3 Click a color to copy its HEX code, or copy the whole palette as a list, CSS or JSON.
Worked examples
Input: logo.png, 5 colors
Result: #4F46E5, #FFFFFF, …
Copy them as CSS variables for your website.
Input: beach.jpg, 8 colors
Result: Sand, sea and sky tones
Sorted from the most to the least common.
How the color palette extractor works
The image is first reduced to about 128 pixels across, which keeps its colors but makes the analysis instant. The pixels are then grouped with k-means clustering, a standard technique that finds the given number of colors which together represent the image best. Each color is the average of its group, and the percentage shows how much of the image the group covers.
Colors are compared with weights that roughly follow human vision (the eye is most sensitive to green), so the palette matches what you see rather than raw numbers. Fully transparent pixels are ignored, so a logo's transparent background does not count. The same image always gives the same palette.
Using the palette
- Web design: copy the palette as CSS variables and paste it into your style sheet.
- Brand colors: extract the exact HEX codes from a logo when no style guide is available.
- Presentations and social posts: match text and backgrounds to a photo.
- Developers: copy the JSON, with HEX, RGB and share for each color.
How many colors?
Five or six colors capture the overall mood of a photo; choose more to see the smaller accents too. Shades the eye cannot tell apart, such as the soft edges around a logo, are merged into the main color, so a logo with three flat colors shows just those three.
Private by design
Your images are processed by your own browser and never uploaded to a server, so they stay on your device. There is no watermark, no sign-up and no limit on how many images you convert.
Frequently asked questions
How are the colors chosen?
With k-means clustering on a reduced copy of the image: the pixels are grouped into the number of colors you choose, and each color is the average of its group.
What does the percentage mean?
How much of the image is closest to that color.
Why is a color slightly different from the one in my logo?
Edges and anti-aliasing blend colors, which shifts the averages slightly. Choose more colors to separate them, or pick the exact pixel in an editor.
Is my image uploaded?
No. The analysis runs in your browser.
Related tools
Image to PDF Converter
Combine JPG, PNG and WebP images into one PDF, one image per page. Reorder pages and choose A4, Letter or the image size.
JPG to PDF Converter
Convert JPG photos to PDF: one or many JPG images into a single PDF, in the order you choose. Free, no upload.
PNG to PDF Converter
Convert PNG images and screenshots to PDF without quality loss, one or many pages in one file. Free, no upload.
PNG to JPG Converter
Convert PNG images to JPG with adjustable quality and a background colour for transparent areas. Batch conversion, no upload.
JPG to PNG Converter
Convert JPG (JPEG) images to lossless PNG in your browser. Batch conversion, no quality loss from re-saving, no upload.
WebP to PNG Converter
Convert WebP images to PNG, keeping transparency. Open WebP pictures in any program. Batch conversion, no upload.