‹ Back to Home

Palette Extractor

Find the main colors of an image and export the palette.

Find 3 to 12 main colors with their share of the picture, then copy them as HEX, CSS variables, or JSON, or save a swatch PNG.

No image selected.

You can also drop a file here.

Status

What Palette Extractor does

Palette Extractor finds the main colors of a picture and shows each one with its share of the image, most used first.

Pick from 3 to 12 colors, then copy the palette as HEX codes, CSS variables, or JSON, or save it as a swatch PNG.

How to use it

  1. Select Choose Image and pick a picture, or drop one on the file row.
  2. Move the Colors slider to choose how many colors to find.
  3. Pick a format under Export and select Copy, or select Save Swatch PNG.

Formats and limits

  • Input: one image the browser can open, such as PNG, JPG, WebP, AVIF, or GIF. For an animated GIF, only the first frame is used.
  • Colors are counted on a copy of the image scaled so its longer side is at most 256 pixels. Pixels that are more than half transparent are left out.
  • Output: text copied to the clipboard, or a PNG named after the image with -palette added, such as beach-palette.png. The PNG has one 160 by 200 pixel block per color, labeled with its hex code.

Settings explained

Colors
How many colors to find, from 3 to 12. An image with fewer distinct colors returns fewer.
Format
HEX lists one code per line. CSS variables writes a :root block with --palette-1, --palette-2, and so on. JSON lists each color with its hex code, red, green, and blue values, and percent of the image.

Privacy

The image is opened and its colors are counted in this tab. Nothing is uploaded.

FAQ

How are the colors chosen?

The pixels are split into groups at the middle of their widest color range until there is one group per color. Then each color moves to the average of the pixels closest to it a few times. The share is the part of the image closest to each color.

Why do I get the same palette every time?

The method has no randomness, so the same image and color count always give the same palette.

Related tools

All processing runs locally in your browser. This tool is provided as-is without warranty. Keep backups of your original files before processing.

By uploading media, you confirm you own the content or have permission to modify it. Please read the Terms and Conditions.