Image Palette Extractor
Drop in a photo, screenshot or design — median cut pulls out its 4 to 12 dominant colors with pixel shares, ready to copy.
Three-step start
- 1Drop an image: drag, click or Ctrl+V a photo, screenshot, poster or mock — processed locally, never uploaded.
- 2Choose a count: switch between 4 / 6 / 8 / 12 colors and watch the shares.
- 3Copy: click a swatch for its HEX, or copy the whole set in one go.
Extract colors from an image
The picture is analyzed pixel by pixel in a local canvas; extraction makes no network request.
The percentage on each swatch is that color’s pixel share; results are sorted from largest share down.
Can median cut miss a small but important accent color?
Yes. Median Cut partitions by pixel population, so an accent covering under roughly 2% of the image (a chart highlight, a logo mark) can get absorbed into a neighboring bucket. Bump the count to 12 and try again, or pick the exact point straight off the image with the color picker.
Why do I get several near-identical skin or sky tones?
Portraits and sunsets contain huge continuously-gradient areas, and buckets get allocated by population, so similar tones claim several boxes. Copy only the distinct ones you want, or take one extracted main color into the palette generator and derive a clean ramp from it.
How accurate are the extracted values?
Each swatch is the arithmetic mean of its bucket’s pixels (transparent pixels and low alpha are excluded), matching what the image actually shows. Analysis and output run entirely in your browser.
Turning any picture into a working palette
The fastest way to steal a palette that already feels right is to take it from something that works: a film still, a product photo, a poster you admire. Extracting the actual values removes the guesswork of eyeballing hex codes off a screen, and because real photographs carry natural lightness hierarchies, their palettes usually arrive pre-balanced between background, subject and accent.
Reading the shares
The percentage beside each color is its pixel population. A healthy UI palette usually shows one dominant tone at 40–60% (the surface), one or two mid-share tones (structure) and small high-saturation slivers (accents). If an accent you care about shows 1%, that is honest — in the original image it covers 1% too.
From extraction to system
Extraction gives you colors, not a system. Take the dominant HEX into the palette generator for lightness steps, check text combinations in the contrast checker, and preview the set under color-blindness modes with the simulator. Two extracted colors make an expressive gradient in the mixer.
Privacy note
Everything — decoding, resizing, sampling, bucketing — happens inside a canvas element on your machine. Screenshots of unreleased designs never leave your browser, which is also why extraction still works on a plane.
Frequently asked questions
How are the dominant colors extracted?
With the classic Median Cut algorithm: every pixel of the image is placed inside the RGB color cube, the cube is repeatedly split at the median of its longest axis until you have the requested number of boxes, and each box’s average color becomes a palette entry — its pixel count becomes the share.
How many colors should I extract?
Around 6 reproduces a brand or poster palette well; 8–12 suits complex photos like landscapes; 4 is enough to read the overall mood. More buckets preserve secondary colors but bring neighbors closer together.
Is my image uploaded anywhere?
No. The file is read by a local canvas, analyzed pixel by pixel and never sent to a server — the tool keeps working offline.
Can I use the extracted values directly?
Yes. Copy a single HEX or the whole group at once, then feed a main color into the palette generator to derive lightness steps, or into the contrast checker to validate text on it.