Extract a Color Palette from an Image

Extract a Color Palette from an Image

A color palette captures the handful of colors that define an image. This palette extractor groups the picture's pixels into clusters using k-means and returns the most representative color for each cluster, sorted by how much of the image it covers. The result is a balanced set you can drop straight into a brand kit, a slide deck, a website theme, or a moodboard.

You decide how detailed the palette is. Two or three colors give you a tight, on-brand scheme; ten or twelve capture the full range of a rich photograph. Each swatch shows its share of the image, so you can see at a glance which colors dominate and which are accents.

Exports are built for real work: a PNG swatch sheet with the hex codes baked in for sharing, a block of CSS custom properties (--color-1, --color-2 …) to paste into a stylesheet, and a JSON file with hex, RGB, HSL, and each color's share for use in code or design tooling.

How to extract a color palette from an image

1. Add your image — drag & drop, paste, or choose a file.
2. Set the count — slide from 2 up to 12 colors for the palette.
3. Copy a swatch — click any color to copy its hex code.
4. Export the set — download a PNG sheet, CSS variables, or JSON.

Tip: fewer colors for a usable theme

For a website or UI theme, start with 4–6 colors. Too many similar shades make it harder to build consistent components; a smaller palette forces clearer choices and reads as more intentional.