Color Palette Extractor

What color quantization actually does

An ordinary photo holds tens of thousands of distinct colors — far too many to call a "palette". Quantization is the job of boiling that down to a small set of representative colors that still capture the image's character. This tool uses median cut, the classic algorithm behind GIF palettes and many "dominant color" extractors, because it is fast, deterministic and self-contained — no library, no server.

How median cut works here

The steps are simple enough to follow by hand:

1. The image is shrunk so its longest edge is about 200 px. That keeps roughly 40,000 pixels at most — plenty to represent the color mix, few enough to process instantly.
2. Every remaining pixel goes into one big box. Fully or mostly transparent pixels are dropped, so a logo on a transparent background doesn't add a phantom swatch.
3. The box is split along whichever channel — red, green or blue — has the widest spread, cutting at the median so each half keeps a similar pixel count.
4. Splitting repeats, always subdividing the box with the largest color volume × population, until there are 6 or 8 boxes.
5. The average color of each box becomes a swatch, and the swatches are ordered by how many pixels they stand for — so the most dominant color is first.

What you get for each swatch

Every swatch is shown in the three formats you actually paste into design tools and code:

The :root block wraps the whole palette as CSS custom properties — --color-1 through --color-6 (or -8) — so you can paste it once and then reference any swatch with var(--color-1) across a whole stylesheet.

Export the whole palette as design tokens

Below the swatches, the design-token panel writes the exact same palette in the four shapes you actually paste into a codebase, each with its own Copy button — nothing is added or invented, the values are the extracted colors reformatted:

• CSS custom properties — a :root{} block of --color-1 … --color-N.
• SCSS variables — $color-1: #…; lines for a Sass partial.
• Tailwind — a theme.extend.colors JSON snippet you drop straight into tailwind.config.js, keyed color-1 … color-N.
• JSON array — just the hex strings, for a script, token file or design tool import.

Every token is named by swatch order: index 1 is the most dominant color, so the numbering stays stable whether you pull 6 or 8 colors. The hex / rgb() toggle re-expresses those identical colors — #ff8800 becomes rgb(255, 136, 0), the same color written two ways — it never fetches or fabricates a new value. If you rename tokens by role (--brand, --accent) rather than by index, that is a quick find-and-replace after pasting.

What it's good for

• Brand and theme building — turn a logo, hero photo or mood board into a coherent set of theme colors in one step.
• Design mockups — sample the palette of a reference screenshot or a competitor's site (from an image) to match its feel.
• Data-viz and UI accents — pull a handful of harmonious colors from a photo to seed chart series or button states, then refine them.
• Matching real-world colors — extract the tones from a fabric, room or product photo when picking a scheme.

Honest limits

The swatches are perceptual approximations, not a guaranteed exact top-N of the original pixels. Two things smooth them: the image is downscaled first (which blends neighbouring pixels), and each swatch is the average of a whole box (which merges similar colors together), so a swatch can sit a few RGB units from any single pixel you could point at. Median cut also works in plain sRGB, which is not perceptually uniform — it can over-represent a large dull background and under-represent a small but striking accent, and on a very flat image asking for eight colors may return near-duplicate swatches because there aren't eight distinct regions to split. Averaging can occasionally land a swatch on a muddy mix of two vivid colors that neither appears in the image. Treat the result as a strong, fast starting point to refine by eye — and if you need the exact color of one specific spot rather than a whole-image palette, reach for the Color Converter instead. Everything is computed locally; nothing you drop is uploaded.