How to Extract Colors From Images

Pulling a palette out of an image looks like magic but it’s just clustering. Given a photo of millions of pixels, you reduce them to a handful of representative colors and output the result as a set of hex codes. Designers use this to derive palettes from moodboards, brands use it to reverse-engineer competitor assets, and developers use it to match UI accents to uploaded content. This guide covers the two algorithms that matter (k-means and median-cut), the difference between “dominant” and “average,” how to extract clean palettes from logos, and the gotchas — JPEG artifacts, transparent PNGs, near-duplicate colors — that make naive extractions look messy.

What “extracting colors” actually means

An image is a cloud of points in 3D color space (R, G, B). Extracting a palette of N colors is the task of finding N cluster centers that best represent that cloud. Different algorithms define “best” differently, which is why two tools can give you two different palettes from the same photo.

All extractors do some version of: downsample the image, choose a color space, pick N centroids, iterate. The quality bar is “does the output reproduce the feel of the image.”

K-means clustering

The workhorse algorithm. Pick N random centers, assign each pixel to its nearest center, recompute centers as the mean of their assigned pixels, repeat until stable.

1. init N centroids randomly
2. for each pixel: assign to nearest centroid
3. update each centroid = mean of its pixels
4. repeat 2-3 until movement < epsilon

Pros: simple, predictable, gives you exactly N colors. Cons: sensitive to initial seeds, can merge distinct small-but-important colors (a brand red inside a mostly-blue image), and distances in raw RGB don’t match human perception.

Median-cut

The algorithm GIF and PNG palette builders use. Recursively split the color space: find the channel with the widest range, split at its median, repeat on each half until you have N boxes.

box = all pixels
while box count < N:
  pick the box with the largest channel range
  split it at that channel's median
output = average color of each final box

Pros: deterministic, good at preserving outliers, standard for image-quantization tasks. Cons: can give you oddly-similar neighbors if the image has narrow distributions.

Dominant vs average

These are two different questions:

Dominant color = the most common color (the largest cluster). For a photo of a sunset, the dominant color is the dominant cloud/sky color, not some weighted blend.

Average color = the mean of all pixels. For a red-and-blue image, the average is muddy purple — a color that doesn’t actually appear in the image.

Use dominant when picking a single representative accent. Average is usually wrong; it tends to output dirty browns for anything colorful.

Perceptually uniform color spaces

Clustering in raw RGB means distances don’t match what your eye sees. Two blues that look nearly identical can be 40 units apart in RGB while a dark green and a light yellow are only 30 apart. Better results come from Lab, OKLab, or HSL.

RGB:  fast, wrong (doesn't match perception)
HSL:  okay, intuitive, weak on luminance
Lab:  perceptually uniform, mildly slow
OKLab: newer, perceptually excellent, fast

If your output palette has near-duplicate colors, the extractor is probably clustering in RGB. Switch tools or convert to Lab/OKLab first.

Extracting brand colors from a logo

Logos are special: they usually have 2–4 sharp, flat colors with transparent or white backgrounds. Extraction rules:

• Ignore pure white pixels (they’re usually the background).
• Ignore near-transparent pixels (rendering artifacts).
• Collapse colors that are within 5 units of each other.
• Return 3–5 colors max — brand palettes are small.

If your logo is a JPEG, you’ll pull compression artifacts: halos around edges, subtle banding. Convert to SVG or redraw in Figma before extracting for color spec.

Extracting palettes from photos

Photos have gradients. Millions of unique colors. Extraction choices:

How many colors? Five is the sweet spot for a palette people can read. Eight gives you tint variation. Above ten, users can’t tell some swatches apart.

Saturation filter? Dropping low-saturation pixels before clustering emphasizes the “colorful” colors and avoids a palette full of beige. Useful for moodboards.

Resize before processing. A 4K photo has 8M pixels; resizing to 200px wide is 50K pixels and 99% as accurate. Always downsample first.

The “muddy middle” problem

K-means on a photo with lots of skin tones tends to pull a narrow range of tans — all technically correct, all visually useless. Mitigations:

Cluster more centers (say 16) then keep the 5 most spread out. This “over-extract and deduplicate” trick reliably produces interesting palettes.

Weight pixels by saturation before clustering, so vivid colors have more influence than neutrals.

Transparent PNGs

If you skip the alpha channel, fully-transparent pixels contribute “colors” that depend on the image’s undefined RGB for transparent areas — often arbitrary. Always filter pixels by alpha > 50% before clustering.

Output formats

Hex is what developers want; RGB is what some design tools want; HSL is what CSS loves. A good extraction tool outputs all three plus the percentage of the image each swatch represents.

#4a6fa5  RGB(74,111,165)    HSL(215,36%,47%)   38%
#c8a862  RGB(200,168,98)    HSL(41,51%,58%)    24%
#2e2b29  RGB(46,43,41)      HSL(24,6%,17%)     18%
#e4e1d7  RGB(228,225,215)   HSL(46,17%,87%)    12%
#8c3a2f  RGB(140,58,47)     HSL(7,50%,37%)     8%

Reproducibility

K-means with random seeds is non-deterministic — run it twice, get slightly different palettes. Good tools seed the PRNG for stable output or use median-cut which is deterministic by construction. If you’re extracting palettes as part of a design pipeline, reproducibility matters.

Common mistakes

Trusting average color. It’s almost never what you want. Use dominant or the top-N cluster centers.

Extracting from a compressed JPEG. JPEG chroma subsampling and block artifacts introduce colors that aren’t really in the original. Work from PNG or raw source when possible.

Skipping the alpha channel. Transparent PNGs contribute ghost colors if you don’t filter.

Clustering in RGB and wondering why the palette looks wrong. Lab or OKLab align with human vision far better.

Asking for 20 colors. The human eye can only distinguish 5–8 palette entries reliably. More than that is noise.

Not downsampling. Extracting from a 24MP photo at full resolution is wasteful and doesn’t improve accuracy.

Forgetting to rank by frequency. A palette sorted aesthetically can bury the dominant color. Rank by pixel count so users know which one is the hero.

Run the numbers

Drop an image into the color extractor for an instant palette with hex, RGB, and HSL. Fine-tune a single color with the color picker and convert any swatch between formats with the color converter when you need the value in a format your design tool actually understands.