ImageColorPick
Menu

Color Palette From Image

To make a color palette from an image, open it below and the tool finds its main colors automatically, sorted by how much of the image they cover. Choose 3 to 12 colors, then copy the HEX codes or download the palette as a PNG or CSS file. Your image stays on your device.

Color palette generator from image

The color picker needs JavaScript. Below is the sample image; the text on this page explains every format and formula.

Sample photo: a sunset over the sea with green hills and a red boat

How to use it

  1. Open your image in the tool. A palette with 6 colors appears automatically.
  2. Choose 3 to 12 colors in the menu. The palette is recalculated in a second.
  3. Click a palette color to dim everything else in the image and see where that color is.
  4. Download the palette as PNG or CSS, or copy the HEX list or JSON.

How the palette is found

The tool takes up to 10,000 pixels spread evenly over a smaller copy of your image and groups them with the k-means method. It starts with well-spread seed colors (k-means++), then repeatedly moves each group’s center to the average of its pixels until the groups stop changing. Each final center is one palette color, and its percentage is the share of sampled pixels in that group.

Fully or mostly transparent pixels are left out, so a logo on a transparent background does not get a "black" or "white" color that is not really there. The calculation runs in a background worker, so the page stays responsive even with a large photo.

Getting a better palette

  • Fewer colors (3–5) give the broad mood of the image: sky, ground, main subject.
  • More colors (8–12) bring out small accents, such as a red boat in a blue sea.
  • Crop first if a large background dominates. A product photo on white will otherwise use one or two palette slots for white and gray.
  • Pick by hand for an accent that covers only a few pixels: click it in the image and the color is added to your recent colors.

Export formats

  • PNG: a strip of swatches with each HEX code underneath, for mood boards and messages.
  • CSS variables: :root { --color-1: #1e3f6e; … }, ready to paste into a stylesheet.
  • HEX list: comma-separated codes for design apps and color tools.
  • JSON: HEX, RGB and share for each color, for developers.
  • Save palette: keeps the codes in this browser so you can find them later in the history.

When the palette is ready, check how it looks to color-blind people: two palette colors that differ mainly in red and green can look alike to many viewers.

Frequently asked questions

How do I extract a color palette from an image?

Open the image in the tool on this page. It groups similar pixels and shows the main colors at once, with the share of the image each one covers. Change the number of colors in the menu and copy or download the result.

How many colors should a palette have?

For a website or brand, 3 to 5 colors are usually enough: one or two main colors, a neutral and an accent. Use 8 to 12 when you want to study an image in detail or need more shades to choose from.

Why does my palette change a little if I pick another number of colors?

k-means divides the pixels into exactly the number of groups you ask for. With more groups, a large area may split into a light and a dark shade, and the centers move. The same image and number always give the same result here.

Can I get the palette as CSS?

Yes. Copy CSS variables puts a :root block with --color-1, --color-2 and so on on your clipboard, ordered from the most to the least common color. Download CSS saves the same text as a .css file.

Does the palette ignore transparent areas?

Yes. Pixels that are more than half transparent are skipped, so PNG logos and icons only give the colors you can actually see. The edges of a logo are often half transparent, which keeps soft outlines from adding extra shades.

Are my palettes saved?

Only if you press Save palette, and then only in your own browser’s local storage on this device. The image itself is never saved. Clear history removes saved colors and palettes.

Last updated: October 15, 2026

More color tools