How to Extract a Color Palette from Any Image

By ImgScale Team  ·  June 2026  ·  7 min read · by kizura

Every great design starts with a palette. And the best palettes often don't come from a color wheel — they come from images: a sunset photo, a retro movie poster, a favorite piece of fabric. Extracting those colors precisely is harder than it sounds, because the "dominant" colors in an image aren't always the most visually prominent ones.

This guide explains how palette extraction actually works, why some tools give better results than others, and how to put a PixelLab-extracted palette to use in your workflow.

How palette extraction works

When you drop an image into the Palette Extractor, here's what happens under the hood:

1. The image is downscaled to 220 px on its longest edge. This speeds up processing without meaningfully changing the color distribution.
2. Every opaque pixel is sampled and fed into a median-cut quantization algorithm that finds N representative colors.
3. After the palette is built, every pixel in the image is re-assigned to its nearest palette color using a perceptual distance formula (redmean weighting). This produces the percentage figure you see under each swatch — the actual pixel-count share of each color.

Median-cut vs k-means

Most people have heard of k-means clustering. It's used everywhere. But for dominant color extraction, median-cut is usually better. Here's why:

K-means

• Starts with random seed positions in color space
• Iterates until cluster centers stabilize
• Result depends on random seed — same image can give different palettes
• Tends to find colors that minimize average distance, which can produce palette colors nobody actually sees in the image

Median-cut

• Deterministic — same image always gives same palette
• Recursively splits the color space along whichever axis has the widest range
• Each "box" in the final partition contributes one palette color (the average of its contents)
• Naturally biases toward colors that cover large chunks of the image

Choosing the right number of colors

The color count slider goes from 3 to 16. Here's a rough guide:

• 3–4 colors — For brand identity work, where you need a minimal, punchy palette that works on everything from a business card to a billboard.
• 5–6 colors — The sweet spot for most design palettes. Enough variety to build a complete UI color system (primary, secondary, accent, background, text).
• 8–10 colors — For mood boards and reference palettes. Captures more of the image's nuance without overwhelming you with options.
• 12–16 colors — For detailed color analysis, or when you're extracting a palette to use in pixel art or illustration and need every major hue represented.

Understanding the sort modes

Once extracted, colors can be sorted three ways:

Dominance

Sorted by pixel count, highest first. This is usually what you want for design work — the most important color (the one that covers the most image area) comes first.

Hue

Sorted by hue angle (0°–360° around the color wheel, starting at red). Useful when you want to see the palette as a rainbow progression, or when you're checking for complementary relationships.

Lightness

Sorted from lightest to darkest by luminance. Useful for checking contrast ratios and building a tonal scale.

Using your palette in CSS

Select the CSS export format to get a :root block with custom properties:

:root {
  --color-1: #1B2A6B;
  --color-2: #9A5FB0;
  --color-3: #F4A259;
  --color-4: #2C6E49;
  --color-5: #FFD98A;
  --color-6: #ECE7DF;
}

Paste this into your CSS file and reference the variables throughout your stylesheet. To build a full design system from these six colors, you typically use the darkest as your background, lightest as your text base, most saturated as your primary action color, and the remaining three as accents and neutrals.

Using your palette in Tailwind

Select the Tailwind export format to get a config-ready object:

// tailwind.config.js → theme.extend.colors
{
  'brand-100': '#ECE7DF',
  'brand-200': '#FFD98A',
  'brand-300': '#F4A259',
  'brand-400': '#9A5FB0',
  'brand-500': '#2C6E49',
  'brand-600': '#1B2A6B',
}

Paste this into the theme.extend.colors section of your tailwind.config.js. You can then use bg-brand-500, text-brand-100, etc. in your templates.

Using your palette in Figma

The easiest approach is to copy individual HEX codes from the swatches (just click any swatch) and paste them as Fill colors in Figma. For a more systematic setup:

1. Download the palette strip PNG from PixelLab.
2. Import it into Figma as an asset.
3. Use the eyedropper on each color in the strip to create Figma Color Styles.
4. Name the styles consistently (Brand/Forest, Brand/Sand, etc.) so they appear organized in the Styles panel.

If you prefer the JSON export, you can also use a Figma plugin like Tokens Studio to import a JSON token file directly, mapping each color to a design token.

Tips for better palettes

• Use a high-quality source image. A compressed JPEG with visible artifacts will produce a palette with dirty, desaturated colors. Use a PNG or high-quality JPEG for clean results.
• Crop to the area you care about. If a photo has a large white border or a distracting background, the palette will include those colors. Crop first, then extract.
• Use Dominance sort for design work, Hue sort for checking balance. A palette sorted by dominance tells you what matters most. A palette sorted by hue tells you whether you have a good spread across the color wheel.
• 6 colors is usually enough. More than 8 colors in a design palette is usually noise. Extract 8–10, then manually pick the 5–6 that feel most useful.
• Check lightness spread. A good design palette needs at least one very light, one very dark, and a few mid-tone colors. Switch to Lightness sort to check.
• For illustration, extract more. If you're using the palette as a reference for digital painting, 12–16 colors gives you enough nuance to capture the image's full tonal range.

Extract your palette now

Drop any image into the free Palette Extractor. Click any swatch to copy its HEX code, then export as CSS, Tailwind, SCSS, or JSON — all in your browser, nothing uploaded.

Related: How to Turn Any Photo into Pixel Art  ·  How to Reduce GIF File Size