Color Palettes from Images: How Extraction Works & Best Practices

Ever seen a photo with a perfect color scheme and wished you could steal it? You can — legally. Here is how palette extraction works, which images give the best results, and how to get those colors into your CSS in one click.

How extraction works

A photo contains millions of pixels but only a handful of dominant colors. Extraction algorithms find them in two steps. First, the image is sampled — every Nth pixel is read into a list of red/green/blue values. Then comes quantization: the classic median-cut algorithm looks at which color channel varies the most, splits the pixels in half at the median of that channel, and repeats until it has as many groups as you asked for. Each group is averaged into a single swatch, and the groups are ranked by how many pixels they contain — the biggest group is your most dominant color.

Fancier tools use k-means clustering, which starts with random guesses and iteratively refines them. It is slower but can produce slightly cleaner palettes on tricky images. For most design work, median-cut is plenty — and it runs instantly, even on a phone.

Best images for palettes

Not every photo yields a useful palette. The best sources are images with rich, varied color: landscapes, product shots, illustrations, film stills, packaging. What to avoid:

• Nearly single-color images — a white wall gives you twelve shades of white.
• Photos under harsh artificial light — sodium lamps tint everything orange.
• Heavy filters or Instagram presets — they compress the color range.

One technical note: JPEG compression shifts edge colors slightly. If you are matching an exact brand color, work from a PNG original. For mood boards and inspiration, JPEG is fine.

From palette to stylesheet

A row of swatches is nice. A :root block you can paste into globals.css is what saves time. Good extractors export directly to the formats developers use:

• CSS variables — --color-1: #3D5AFE; etc.
• Tailwind v4 theme — @theme { --color-brand-1: … }
• JSON tokens — for Figma or design systems.

Pair each swatch with a contrast check (WCAG ratio) so you know at a glance whether white or black text reads better on it — our tool shows this under every color.

Privacy: keep it in the browser

Many palette tools ask you to upload the image to their server. If it is client work, a logo, or a personal photo, that is an unnecessary exposure. Prefer a tool that does the whole pipeline — decode, sample, quantize — in your browser via the Canvas API. The pixels never leave your device, and you can confirm it: open your browser's Network tab while using the tool and watch for any image upload. There should be none.