Find dominant image colors and copy HEX codes

Choose or paste an image, request 4 to 12 colors and select Extract colors. Click a swatch to copy its HEX code; the palette represents approximate dominant colors.

Runs locally in your browser

View category: Frontend & Design (34)

Pixels are sampled and reduced in this browser only. The image is never posted to VoriTools or an image service.

Image source

Drop an image here, paste one, or choose a local file

Palette options

Colors to extract

Transparent pixels are ignored. Large images are downsampled before analysis so the browser remains responsive; swatches represent dominant color regions, not exact pixels.

Use the palette

Click any swatch to copy its hex value. Pair foreground and background choices with the Accessibility Auditor to check WCAG contrast.

Open contrast checker

Extracted palette

Choose an image to extract a local color palette.

Find usable colors without sending a design asset away

The extractor samples a reduced canvas in the browser and keeps the original file on your device. For accessible UI work, validate each final text/background pair separately instead of relying on a palette alone.

How to extract a color palette from an image

Image Color Extractor pulls a practical palette out of a local image: drop it, paste it or choose a file, pick 4 to 12 colors, and copy the HEX values straight into CSS.

The picture is sampled on a reduced canvas inside this browser tab, so nothing is uploaded. The output approximates the dominant colors — it is not an eyedropper reading of exact pixels.

Add a picture: drop it on the dropzone, paste it while the page has focus, or choose a local file — PNG, JPEG, WebP, GIF, AVIF or BMP, up to 40 MB.
Choose how many colors to keep: 4, 5, 6, 8, 10 or 12. Six is the default.
Press Extract colors. Pixels with an alpha below 90 are ignored, so the palette comes from opaque areas only.
Click a swatch to copy its HEX code; each swatch also shows the rgb() value and its share of the sampled pixels. Load synthetic example runs a built-in 960 × 560 test image.
Clear resets the image and the results. To check a foreground/background pair taken from the palette, continue in the Accessibility Auditor.

How the palette is computed, and what the percentages mean

Dominant buckets, not exact pixels

The image is drawn onto a canvas scaled so its longest edge is 420 pixels, then read on a grid that samples at most about 140,000 pixels. Colors fall into 4-bit red/green/blue buckets; buckets are ranked by pixel count, and colors closer than a distance of 28 are merged before the final 4–12 are chosen.

Each swatch is the average of its bucket, so the result summarises dominant regions. Fine gradients, dithering, one-pixel lines and anti-aliased edges can be smoothed away by the reduction — treat the values as starting points, not measured originals.

Reading the swatches

The percentage under a swatch is the share of sampled, opaque pixels that landed in that bucket; the figures add up to roughly 100%. The number you choose is a maximum: a flat image yields a single swatch at 100%, and an image with fewer distinct colors yields fewer swatches.

A fully transparent image reports 0 dominant colors and shows no swatches. Swatches are real buttons, so they can be reached with the keyboard, and every copy is confirmed in the status line — or reported as blocked when the browser refuses clipboard access.

Local processing and practical limits

Analysis happens entirely in the tab: the browser decodes the file, the canvas is read back through pixel APIs, and no image data is sent anywhere, so the tool also keeps working offline. In a desktop Chrome test a 4000 × 3000 photo was analysed in about 0.2 seconds.

The 40 MB limit exists because decoding happens in the browser. For accessibility work, validate each final text/background pair with the contrast checker instead of treating a palette as a WCAG guarantee.

Recent tools: