Skip to content

Color Palette Extractor

Extract 4, 6, 8, or 10 dominant colors from any image. K-means in CIELAB, HEX and RGB codes, one-click copy.

In your browser—your files never leave your device.

Learn more

About this tool

This tool downsamples your image to 150x150 pixels, converts every pixel into CIELAB color space, and then runs K-means clustering (with K-means++ seeding) to find the centers of 4, 6, 8, or 10 perceptually distinct color groups. CIELAB is perceptually uniform — distances in that space line up with how the human eye actually compares colors — so the resulting palette separates oranges from reds and teals from blues the way you would by sight, instead of collapsing them together the way a naive RGB-bucket count would. The clustering caps at 12 iterations, which is more than enough to converge on real images, and transparent pixels are skipped so logo cutouts don't contaminate the palette.

How to color palette extractor

  1. Upload an image

    Drag a file onto the dashed box or click to browse. Photos, logos, illustrations, screenshots, paintings, even old book covers all work. The tool reads pixel data so anything the browser can display is fair game.

  2. Get the six dominant colors

    Extraction takes milliseconds. The result is six swatches with their HEX code and RGB values displayed underneath each one. They are sorted by frequency — the most common color in the image appears first.

  3. Copy a color

    Each swatch has a copy button that puts the HEX code on your clipboard. Paste it into Figma, your CSS file, a Tailwind config, or wherever you are working. The RGB code is shown alongside if you need to use it in a context that prefers rgb() syntax.

  4. Upload another image

    The Upload Another button clears the current result and lets you process the next image. Useful when you are building a mood board from multiple references — process each one and write the palettes down side by side.

Why use this tool

Most often: someone shares a logo or screenshot and you need the exact hex codes for a design system or a CSS variable. You could open it in Photoshop and eyedrop each color, but that is slow and you might miss the actual dominant shade. This tool does it in two seconds. Second case: brand mood boards. You collect a dozen reference images for a new project and want to see what colors keep showing up. Run them through here one at a time and you can spot the pattern within a few minutes. Third: art and photography moodwork. Pulling the palette from a painting you like, a film still, or a sunset photo gives you a concrete starting point for a design — way more useful than "warm and earthy" as a brief.

Features

K-means in CIELAB on a 150×150 downsample

The image is downsampled to 150x150 on a hidden canvas — 22,500 pixels total, which is enough to be statistically representative without melting your CPU. Each pixel is converted from sRGB into CIELAB, the perceptually uniform color space, and then K-means++ seeds K cluster centers and iterates up to 12 times until they stabilize. CIELAB matters because RGB-distance lies — two RGB triplets can look very different yet sit close in RGB-space, or vice versa. K-means in CIELAB respects how your eyes actually see color, so the palette doesn't blur related hues together or split nearly-identical shades into two slots.

Pick 4, 6, 8, or 10 colors with frequency-based ordering

A segmented control lets you choose how many colors you want — 4 for a tight minimal palette, 6 for the classic moodboard pull, 8 or 10 when you need more variation (illustration references, complex hero images, multi-product brand sheets). The swatches are sorted by cluster size, biggest first, so the dominant feel of the image surfaces immediately. For a sunset photo the first swatch is usually sky, the second sand or silhouette. For a logo with 3 flat colors and an accent, the 4-color setting gives you exactly those.

HEX and RGB displayed together

Each swatch shows the HEX code (uppercased for paste-into-CSS) and the RGB triplet in parentheses. CSS variable values are HEX. Some design tools default to RGB. Some legacy systems want decimal. All three reads are right there so you do not have to convert. The copy button puts HEX on your clipboard since that is what most workflows want.

Everything stays in the browser

The image gets pulled into a hidden canvas via a blob URL, sampled, and discarded. No network requests after the initial page load. You can run it on a competitor's logo without their analytics catching a third-party reference, and you can run it on internal design files without leaking them to a SaaS color tool.

Privacy & security

This tool runs entirely in your browser. Your files are never uploaded to a server — every step of the process (reading, transforming, downloading) happens on your device using JavaScript and the Web APIs. You can verify this in your browser's network tab: clicking the tool's main action triggers zero requests to our servers. The page itself is served over HTTPS, but once it loads, your data stays put. No accounts, no tracking of file contents, no scanning your inputs.

Frequently asked questions

How exactly are the dominant colors picked?
The image is downsampled to 150x150 pixels on a hidden canvas, every pixel is converted from sRGB into CIELAB (a perceptually uniform color space), and then K-means clustering with K-means++ seeding finds the centers of K perceptually distinct groups. K is whichever palette size you picked — 4, 6, 8, or 10. The algorithm iterates up to 12 times, which is more than enough to converge on real images. The cluster centers become the swatch colors, sorted by how many pixels fell into each cluster.
Can I use this for branding work?
Yes, that is the most common use I see. Pull colors from a competitor's logo to seed a contrast palette, from a client's existing materials to match their visual identity, or from inspiration moodboards to converge on a direction. The output HEX codes drop straight into Figma styles, Tailwind config, or CSS custom properties.
Does it work on photos as well as logos?
Yes. Photos give different output than logos — a photo has thousands of subtle color variations and the algorithm picks the broad dominant tones, while a logo usually has 2-4 flat color regions and the palette reflects those exactly. Both are useful for different reasons. Photos for mood and atmosphere, logos for matching an existing identity.
Why do some palette colors look similar?
Real photos contain many shades of one hue. A sky might span ten different blues from horizon to zenith. K-means in CIELAB does a much better job of separating those than naive RGB bucketing did — but if a single hue family genuinely dominates the image (say a foggy forest that is mostly green-grey), several clusters will land in that family because the math is faithfully reporting what is actually in the image. That is the algorithm being honest, not a bug. If you want fewer near-duplicates, drop the palette size from 8 down to 4 or 6.
What about transparent areas in PNGs?
Transparent pixels (alpha below 128) are skipped during the count. So if you upload a logo cutout on transparency, you get the logo's actual colors and not a contaminating "transparent" entry. Same for images with partial transparency around the edges — those alpha-0 pixels are excluded.
Can I get more than 6 colors?
Yes — the segmented control above the swatches lets you pick 4, 6, 8, or 10. Six is the default and covers most brand and moodboard work (Material Design starts with 5, Tailwind ships 10 shades per hue but most brand palettes only use 4-6). Bump it to 8 or 10 for illustration references, complex hero images, or multi-product brand sheets where you want a wider sample.
Will this work with very large images?
Yes. The image is downsampled to 150x150 before sampling, so a 50MP photo is no slower than a 1MP screenshot — both end up as 22,500 pixels through the same pipeline. The bottleneck is loading the file into the browser, not the analysis itself.