Color Palette Extractor

Analyzes the pixels of your uploaded image to pull out the most common representative colors as HEX and RGB codes — all computed in your browser, no upload needed.

Pick or drop an image and analysis starts automatically. Choose the number of colors (5, 6, 8, or 10), and click any swatch to copy its HEX code to your clipboard.

The image is downscaled and drawn onto a canvas, then every pixel's RGB value is read and grouped into similar-color buckets via quantization. The most frequent buckets become the representative colors.

Loading, analyzing and previewing all happen entirely in your browser — files are never uploaded or stored on a server.

Before drawing your image to canvas, this tool downscales it to a max of 160px on the longer side — a performance optimization that keeps even large photos fast to analyze. It then walks every pixel of the downscaled image (skipping fully transparent ones) and quantizes each R/G/B channel to 16 levels using only the top 4 bits — mapping the 0-255 range into one of 16×16×16=4096 buckets. Pixels in the same bucket are averaged into that bucket's representative color, and the buckets with the most pixels (highest frequency) become the top N colors in the palette. This is a lightweight bit-truncation quantization rather than a more elaborate median-cut or k-means clustering — fast enough to compute instantly in the browser.

When applying extracted colors to an actual design, the 60-30-10 rule from interior and graphic design is a handy guide: allocate 60% to a dominant color (backgrounds, the largest area), 30% to a secondary color (cards, section dividers), and 10% to an accent color (buttons, links — anything that should catch the eye). Since this tool ranks colors by frequency, the top color is the one covering the most area in your image — a natural pick for the 60% dominant slot — mid-ranked colors work well as the 30% secondary, and the most saturated, eye-catching color makes a good 10% accent.