Your files never leave your device. All processing happens in your browser.
Add an image to the Img Stop Color Palette Extractor and pick the Number of colors, from 2 to 12. The tool finds the main colors and shows how much of the image each one covers. Click a color to copy its HEX code, copy the CSS variables, or download a palette PNG.
About the Color Palette Extractor
The Img Stop Color Palette Extractor finds the main colors in a picture. It groups similar pixels together using k-means clustering and returns between 2 and 12 colors, sorted by how much of the image each one covers. Every color shows its HEX code and share in percent, plus RGB and HSL values in the side list. Transparent areas are ignored.
A palette taken from a real photo gives you colors that already look good together. It is a fast way to build a brand style from a logo, match a website to a product photo, or plan a room, outfit or wedding theme from an inspiring picture. The tool also writes CSS custom properties you can paste into a stylesheet, and makes a palette image to share.
Key features
- 2 to 12 colorsChoose how many main colors to extract with a slider.
- Color shareSee what percent of the image each color covers.
- HEX, RGB and HSLCopy any color in the format you need.
- CSS variablesGet ready :root custom properties and copy them in one click.
- Palette PNGDownload a 1200 × 400 palette image with HEX labels.
- Smart groupingK-means clustering groups similar shades into clear main colors.
How to use the Color Palette Extractor
- Add an image Drop a photo, logo or artwork on the box, or paste it with Ctrl+V.
- Set the number of colors Move the Number of colors slider between 2 and 12. The palette updates right away.
- Copy colors Click a color bar to copy its HEX code, or click HEX, RGB or HSL values in the list.
- Export the palette Click Copy CSS for the variables, or Download palette PNG to save the palette image.
Color Palette Extractor at a glance
| Price | Free |
|---|---|
| Input formats | JPG, PNG, WebP, GIF, SVG and other browser images |
| Colors | 2 to 12 main colors |
| Exports | HEX, RGB, HSL, CSS variables, palette PNG |
| Method | K-means color clustering |
| Processing | In your browser – files are not uploaded |
When to use it
- Build a brand color scheme from a company logo.
- Match a website or social theme to a product photo.
- Get colors from a painting or nature photo for an art project.
- Plan colors for a wedding, room or outfit from a picture you like.
- Share a palette image with a designer or client.
Tips for the best result
- Use 5 or 6 colors for a balanced design palette. Use more to catch small accent colors.
- Large areas such as sky or walls take the top places. Crop the image first to focus on the part you care about.
- Use the Color Picker when you need one exact pixel color rather than the overall main colors.
Frequently asked questions
How do I get a color palette from a picture?
Add the picture to the Color Palette Extractor. It shows the main colors right away as color bars with HEX codes. Change the Number of colors slider to get a smaller or bigger palette, then copy the codes or download the palette PNG.
What do the percentages under each color mean?
The percent shows how much of the image is closest to that color. A color with 40% covers about two fifths of the picture. Colors are sorted from the largest share to the smallest, so the first one is the most dominant color.
How do I use the palette in CSS?
Click Copy CSS. You get a :root block with variables named --color-1, --color-2 and so on. Paste it at the top of your stylesheet and use the colors anywhere with var(--color-1).
Why does my palette not show a small bright color?
The tool finds the colors that cover the most area, so tiny accents can merge with nearby shades. Raise the Number of colors to 10 or 12, or crop the image closer to the area with that color.
Can I extract colors from a logo with a transparent background?
Yes. Transparent pixels are skipped, so the empty background does not appear as a color in the palette. Only the visible parts of the logo are used, which makes it easy to get clean brand colors.
Last updated October 29, 2026 by the Img Stop team.