IMAGE & DESIGN WORKSHOP · 1.0.0

Automatic Image Palette Extractor

Find dominant colors in an image automatically, merge similar shades, inspect text contrast and export reusable CSS, JSON or a PNG palette.

Local image processingAutomatic color clusteringCSS / JSON / PNG

1. Choose a picture

Open JPG, PNG or WebP

Drop a picture here. Up to 20 MiB and 16 million decoded pixels. Animated WebP opens as a still image.

Try the demo or choose an image to begin.

2. Choose palette settings

Maximum colorsMinimum pixel opacity · %Merge nearby colors · RGB distanceExclude near-white pixelsExclude near-black pixels

Fully transparent pixels are always ignored. Near-white means all RGB channels above 245; near-black means all below 10. Similarity is RGB distance, not a perceptual color measurement.

3. Inspect your image & palette

The image is reduced to at most 256 pixels per edge before clustering. Small accents can disappear. Shares use included sample pixels weighted by opacity. Colors are representative RGB averages; use Image Color Picker for exact source pixels. Contrast is for black/white text on each opaque swatch, not a complete accessibility audit.

Using Automatic Image Palette Extractor

Find dominant colors in an image automatically, merge similar shades, inspect text contrast and export reusable CSS, JSON or a PNG palette.

Open JPG, PNG or WebP, or try the six-color demo. Inspect the image preview.
Choose a maximum palette size, opacity cutoff and RGB merging distance. Optionally exclude near-black or near-white.
Extract, inspect HEX/RGB values and black/white text contrast. Copy individual colors or download CSS, JSON and a swatch PNG.

Example

The included demo has six solid color blocks.
Six colors and merge distance 0 recover those colors; a smaller palette groups blocks into representative averages.

Questions & answers

Are images uploaded?

No. Image decoding, downsampling, clustering and downloads run in your browser. Images and palettes are not stored between visits.

Why are extracted colors not exact source pixels?

Colors are alpha-weighted cluster averages from a reduced image, so they represent groups of pixels. Use the separate Image Color Picker for an exact original decoded pixel.

What do the percentages measure?

They show each cluster’s share of opacity-weighted pixels that pass the filters in the sampled image. They are not exact full-resolution pixel counts.

How are transparent pixels handled?

Fully transparent pixels are always ignored. Other pixels below your opacity cutoff are excluded. Included pixels contribute in proportion to their alpha, without blending onto a background.

Why are there fewer colors than requested?

The image may contain fewer distinct groups, or your merge distance may combine nearby colors. Maximum colors is a limit rather than a guarantee.

What does text contrast mean?

Ratios compare opaque black or white text against the extracted opaque RGB swatch using WCAG relative luminance. They do not verify the accessibility of your complete image or layout.