Image Color Palette Extractor

How a tool picks a palette out of millions of pixels

A photo can contain hundreds of thousands of distinct colors, but a usable palette is just a handful of representative ones. This extractor takes any image you upload and distils it down to eight dominant colors, giving you each one as a HEX, RGB, and HSL value plus a ready-to-paste block of CSS variables. It's the fast way to turn a mood-board photo, a product shot, or a piece of artwork into a coordinated color scheme.

The hard part is choosing which colors are representative. Picking the eight most frequent pixels would just give you eight nearly identical shades of the background. Instead this tool uses median-cut quantization, the classic algorithm behind GIF palettes — a method designed to spread the chosen colors across the full range of the image rather than clustering them in the busiest region.

Median cut, in plain terms

Imagine every pixel as a point in a 3D box whose axes are red, green, and blue. Median cut works like this:

1. Put all the pixels in one box and find which color channel (R, G, or B) has the widest spread.
2. Sort the pixels along that channel and split the box in half at the median, so each half holds an equal number of pixels.
3. Repeat on each half, again splitting along whichever channel varies most.
4. After enough splits you have eight buckets; average the pixels in each bucket to get one representative color.

Splitting at the median (rather than the midpoint) is the clever part: it gives each resulting color roughly equal "weight" in the image, so a palette of eight from a beach photo will include the sand, the water, the sky, and the highlights — not eight blues.

What happens when you upload

The moment you drop in a PNG, JPG, WebP, or GIF, the tool draws it onto a hidden canvas, scaling it down so its longest side is at most 200 pixels. That downscale is deliberate: it keeps the analysis fast and smooths out single-pixel noise without changing the overall color story. It then samples the pixels (stepping through them so even a large image is analysed from about 8,000 representative points), skips anything mostly transparent, runs median cut to depth eight, and renders the swatches. The whole thing happens in a fraction of a second.

Three formats, and when to use each

Click any swatch value to copy it. Each color is offered three ways:

• HEX (e.g. #3A7BD5) — the everyday format for CSS, design tools, and most of the web.
• RGB (e.g. rgb(58, 123, 213)) — handy when you need to add transparency by switching to rgba(), or when a tool expects channel values.
• HSL (e.g. hsl(213, 64%, 53%)) — the most human format. Because it separates hue, saturation, and lightness, HSL is the easiest way to build tints and shades: keep the hue, nudge the lightness up for a lighter variant.

The swatch labels even flip between dark and light text automatically based on each color's perceived brightness, so the HEX value stays readable on top of its own color.

The CSS variables block

Below the swatches the tool assembles a :root { --color-1: …; } snippet containing all eight HEX values as custom properties. Copy it into your stylesheet and you can reference the extracted palette anywhere with var(--color-3), change a value in one place, and have it ripple through your whole design. This turns "I like the colors in this photo" into a working design system in two clicks.

Real use cases

• Brand and web design. Pull a coherent scheme from a hero image so your buttons, links, and accents match the photography.
• Data visualisation. Derive chart colors from a reference image for a consistent, on-brand look.
• Art and inspiration. Deconstruct a painting or photograph you admire to study its palette.
• Matching and theming. Find the HEX of a color in a product photo to recreate it elsewhere.

Common mistakes and tips

• Expecting an exact eyedropper. Each swatch is an average of a cluster, not the color of one specific pixel. For pinpoint sampling of a single spot, a dedicated eyedropper is the better tool; for a balanced scheme, median cut is.
• Feeding it a near-monochrome image. If the photo is mostly one color, the palette will be eight close variations — that's faithful, not a bug.
• Forgetting accessibility. Two extracted colors that look distinct may not have enough contrast for text. Check foreground/background pairs against contrast guidelines before using them for type.
• Crop first if you want a sub-region. The tool analyses the whole image; crop to the area you care about before uploading to bias the palette toward it.

Privacy

Your image never leaves your computer. It's read directly by your browser, drawn onto a local canvas, and analysed entirely in JavaScript — there is no upload and no server involved. You can disconnect from the internet and the extractor still works, which confirms that the photo and the palette stay private to your device.