Skip to content
Lizely

Image Color Extractor

Extract a compact palette of the most common visible colors from an image without uploading the file or choosing pixels by hand.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a supported image up to 20 MB and select a palette size of 3, 5, 8, or 12 colors.
  2. 2.Wait for the local canvas analysis, then compare the ranked percentages and swatches with the visible image regions.
  3. 3.Select any swatch to copy its HEX code, and verify contrast or exact brand requirements in the appropriate specialist tool.

About Image Color Extractor

Image Color Extractor turns a photo, screenshot, illustration, or logo into a compact palette of its most frequent visible colors. Choose an image and the browser analyzes a scaled local copy, groups nearby RGB values, and ranks the largest groups. Each result includes a HEX code, an RGB triplet, and the percentage of analyzed visible pixels assigned to that group. Select a swatch to copy its HEX value. Palette size choices of three, five, eight, or twelve let you move from a short visual summary to a more detailed set without producing an overwhelming list.

This tool is intentionally different from Image Color Picker. A picker answers “what is the color of this exact pixel?” after you point at a location. The extractor answers “which broad colors occur most often across this image?” without asking you to find representative points. Use the picker for a precise button, logo edge, or sampled detail. Use the extractor when you want starting colors for a mood board, presentation theme, CSS variables, chart series, illustration study, or design review. The extracted result is descriptive, not a promise that every pixel exactly equals a displayed swatch.

The algorithm is transparent and deterministic. The browser decodes the image, scales it down only when necessary so neither dimension exceeds 512 pixels, and reads the resulting canvas. Pixels with alpha below 128 are ignored so mostly transparent backgrounds do not dominate the palette. Each remaining red, green, and blue channel is placed into one of eight coarse ranges, creating a maximum of 512 RGB buckets. The tool counts the pixels in every occupied bucket, averages the original channel values within that bucket, and sorts buckets by count. Ties use a stable numeric bucket order.

Coarse bucketing makes the result fast and reproducible, but it is not a perceptual clustering model. Two colors that people perceive as very similar can land in adjacent buckets, while several subtly different shades can merge into one average. Brightness, gamma, device color profiles, and human visual sensitivity are not modeled. Animated images are analyzed from the frame the browser decodes for the canvas. If exact brand-color measurement matters, inspect the original file in a color-managed design application and sample the intended source pixels rather than treating frequency as authority.

The displayed percentage uses the number of sampled visible pixels, not the file's original pixel count. Scaling preserves the broad composition while bounding work, but very small details may contribute less or disappear in the reduced sample. A thin accent line, tiny icon, or single pixel can therefore be absent even when it is important to the design. Conversely, a large background usually ranks highly because it covers many pixels, not because the tool judges it aesthetically important. Palette ranking is area frequency, not visual importance, contrast quality, or accessibility.

All decoding and analysis happen in the current browser. The file is represented by a temporary Object URL and drawn to an in-memory canvas; it is not posted to Lizely or a remote image service. Replacing the image or leaving the page releases the temporary URL. The input is limited to 20 MB, and the pixel-processing function has a separate defensive buffer limit. Supported formats depend on browser decoding, with the interface accepting common PNG, JPEG, WebP, GIF, BMP, and AVIF image types. A file with no sufficiently visible pixels returns a clear error.

For a reliable workflow, start with the smallest useful palette and compare it with the image. Increase the size when two important regions have been merged or an accent is missing. Copy the codes into your design draft, then run any foreground/background pairing through Color Contrast Checker before using it for text. Do not infer a brand's official palette, trademark permission, print ink formula, Pantone value, or accessible text combination from this output. It is a local frequency summary designed to speed exploration while keeping the underlying method and limitations visible.

Methodology & sources

A locally decoded image is proportionally bounded to 512 × 512 canvas pixels. Pixels below alpha 128 are ignored; visible RGB channels are quantized by their top three bits into at most 512 buckets. Original channel sums and counts produce per-bucket average colors and sampled-area percentages, sorted by descending count with a deterministic tie break.

Frequently asked questions

Is my image uploaded?
No. The browser decodes the local file through a temporary Object URL and analyzes an in-memory canvas.
Why is a small accent color missing?
The palette ranks sampled colors by pixel area. Small details can disappear after bounded scaling or rank below the selected palette size.
How is this different from Image Color Picker?
The extractor summarizes frequent color groups across the image. The picker reports the exact RGB value at a location you select.
Are the results color-managed or suitable for print matching?
No. The method uses coarse sRGB channel buckets and does not model ICC profiles, perceptual distance, Pantone inks, or print conditions.

Related tools

Image Tools guides

View all