Color Palette Extractor

// Pick the kind of palette you actually need

A dominant palette answers one specific question: which colors cover the most pixels? That is useful for understanding the overall tone of a photo, but it can bury the small bright detail that made you choose the image in the first place. A red sign in a gray street scene may be visually important while accounting for less than one percent of the image.

This extractor clusters the image once, then lets you rank the same color groups eight ways. Dominant favors area. Vibrant favors chroma. Muted favors quiet colors. Light and Dark use perceived lightness. Warm and Cool select by hue. Accent looks for uncommon colors that sit far from the dominant mass. Switching the ranking is instant because the image does not need to be analyzed again.

// Why the extraction happens in OKLab

A color image is too detailed to turn directly into a useful list. The tool first scales it to a sampling canvas with a longest edge of 150 pixels, ignores pixels that are mostly transparent, and groups the remaining pixels into perceptually similar clusters. The center of each cluster becomes one candidate color, and its pixel count becomes the share shown beside it.

The grouping happens in OKLab rather than directly on red, green, and blue channel values. Equal numeric distances in RGB do not reliably look like equal color differences, so RGB clustering can split colors that look alike and merge colors that look separate. OKLab was designed around perceived color difference, which makes the resulting groups a better match for what your eye sees in the source.

// Use the palette in code or in a visual brief

Choose between four and ten colors, copy any individual hex value, or copy the complete list. The CSS export writes numbered custom properties inside a :root block, ready to paste into a stylesheet. Each row also shows the color's approximate share of the sampled image and a nearest plain-language name.

The PNG export is rendered on the page before download. It includes the source thumbnail, the selected swatches, and a hex label on every color, so the file keeps its context when it moves into a mood board, design brief, or message. The filename is derived from the source image, and the entire render stays in this browser tab.

// fair questions

How does the tool find a color palette in an image?

It downsamples the image, ignores mostly transparent pixels, converts the visible pixels to OKLab, and groups them with k-means++ clustering. OKLab measures color difference more like human vision than raw RGB channel distance, so the clusters are less likely to turn into muddy averages.

Is my photo uploaded anywhere?

No. Image decoding, canvas sampling, clustering, color naming, and PNG rendering all happen on your device. The file is never sent to a server.

What is the difference between Dominant and Vibrant?

Dominant ranks colors by how much of the sampled image they cover. Vibrant ranks the same clusters by chroma, so a small saturated color can appear before a large neutral background. Muted, Light, Dark, Warm, Cool, and Accent offer six more ways to inspect that same cluster set.

How many colors should an image palette have?

Three to five colors are often enough for a focused interface or brand treatment. Illustration and mood-board work can benefit from a larger set. Use the four-to-ten control to keep the result as narrow or descriptive as the job needs. An image with fewer distinct colors may return fewer swatches.

Can I export the palette as CSS or an image?

Yes. Copy the colors as a hex list or as numbered CSS custom properties, or download a PNG palette card containing the source thumbnail, selected swatches, and hex labels.