How to Extract a Color Palette From an Image

A good palette often starts with an image you already like: concept art, a film still, a photo of a place. Extracting its colors gives you a consistent starting point for illustrations, UI themes or pixel art.

How the extraction works

The palette tool shrinks the image and groups similar pixels using k-means clustering, weighting colors by how the eye perceives brightness. Each resulting color is the average of a group, and the percentage under it shows how much of the image it covers.

Step by step

1. Drop an image (it stays in your browser).
2. Choose the number of colors. 5–6 gives a mood palette; 12–16 gives a usable working palette for pixel art.
3. Click a swatch to copy its HEX code, or copy the whole list.
4. Export as CSS variables for a website, or download a .gpl file for GIMP, Aseprite, Krita or Inkscape.

Getting better palettes

• Crop first if the image has big borders or a sky that dominates.
• Try several counts: the palette for 6 colors isn't a subset of the one for 12 — each count finds its own best averages.
• Adjust afterwards: extracted colors are averages, so they can look a bit muted. Push saturation on accents and add a true dark and a true light.

Using it for UI

An extracted palette is a style reference, not an accessible color system. Check text/background contrast before using colors for text — WCAG asks for at least 4.5:1 for body text.

Working with sprite sheets? Split them into frames with the sprite sheet tool.