Image Color Palette — Extract dominant colors from images

Matching brand colors from a logo, building a color scheme from a product photo, or checking what colors a competitor uses in their design — all start with extracting the colors that actually appear in an image. This color palette extractor analyzes any image and identifies the dominant colors, grouped by visual prominence, entirely on your device.

Drop or upload an image and the tool samples pixels across it, clusters similar colors together, and returns as many dominant colors as you choose — drag the slider anywhere from 4 up to 150, with 12 as the default starting point. Each color is shown as a swatch with its HEX, RGB, and HSL values, and a format toggle lets you switch every swatch between the three at once. Click any color to copy its current format to the clipboard.

How color extraction works. Before sampling, the image is scaled down so its longest edge is at most 300px and drawn onto a hidden canvas via the Canvas 2D drawImage API, keeping extraction fast even for large photos. Rather than reading every pixel, the tool strides through the canvas's pixel buffer so roughly 5,000 samples are taken regardless of image size, skipping pixels whose alpha channel is below 128 so transparent PNG backgrounds aren't counted. Those RGB triplets feed a median-cut quantization algorithm: it finds which channel (red, green, or blue) has the widest range across the current pixel bucket, sorts along that channel, and splits the bucket in half — recursively, to a depth of log2(your chosen count) — before averaging each final bucket into one representative color. The result favors visually significant color groups over a list of every unique pixel value, which is why a photo with thousands of shades still produces a clean set of swatches.

Runs fully in your browser. Because the image only ever touches a canvas element in your own browser tab, nothing is uploaded anywhere — you can safely extract colors from private, proprietary, or watermarked images.

Using extracted colors in your project. Copy the HEX values into CSS custom properties, Tailwind config files, or brand guideline docs. For building out a full harmony scale from a single extracted swatch, pair this with the Color Palette Generator; for fine-grained hue, saturation, or lightness tweaks, use the Color Picker.