Match an illustration
A flat illustration with four solid colors may produce four swatches even when you request six. The tool avoids inventing extra colors for a truly flat sample.
Find colors in an image
PNG, JPEG, WebP, GIF, AVIF, or BMP. Processing happens in your browser. Animated files use one still frame.
Images are sampled at up to 256 × 256 pixels and grouped by perceptual color similarity. Pixels below 50% opacity are ignored. Similar colors can merge, so the palette may contain fewer colors than requested.
Palette and export
Choose an image to see its dominant colors, hex codes, and estimated coverage.
No external color dataset is used. The built-in color study is an original canvas illustration. Uploads remain local.
How to use the Image Color Palette Extractor
- 01
Upload a supported image up to 20 MB, or try the original color-study example.
- 02
Move the requested color count from 2 to 12. The palette updates from the sampled image.
- 03
Select a swatch to copy its hex code. RGB values and estimated percentages appear on each swatch.
- 04
Copy or download CSS variables, JSON, or a GIMP palette. Download a palette PNG to share a visual reference.
Examples
Build a mood board
Use six to eight colors from a photo, then download the palette PNG. Large background areas often lead the palette, while small accents may need a higher requested count.
Start CSS tokens
Export CSS to get variables such as --palette-1. Rename them for their design role, then check contrast before assigning text and background colors.
Representative colors are a summary
The image is reduced to a sample with a maximum side length of 256 pixels. Nearby colors are grouped using perceptual OKLab distances and weighted clustering. Each swatch is the average RGB color of its group. Compression, scaling, and gradients can produce colors that do not exactly match any original pixel.
Understand the percentages
Coverage estimates count sampled pixels assigned to each cluster. Pixels with alpha below 128 out of 255 are ignored; remaining pixels count equally. Semi-transparent pixels are analyzed using their stored color, without compositing a white or black background. Percentages describe the sample rather than an exact inventory of the full-resolution image.
Take the palette into other tools
CSS exports hex-valued custom properties. JSON includes hex, RGB, and approximate coverage. The GIMP .gpl export stores RGB swatches and simple names. The PNG export is a labeled color strip, useful for reference but not a color-managed print proof.
What to know
- Colors are sampled and clustered, so small details can be missed and shades can merge.
- Source images are limited to 64 megapixels. Animated inputs are sampled from a browser-decoded still frame.
Common questions
Why are there fewer colors than I requested?
A sample may contain fewer distinct groups, and rounded duplicate swatches are merged. A single-color image can therefore produce one swatch.
Can I find the exact color at a particular pixel?
This tool extracts an overall palette. It is not an eyedropper; use a pixel sampler in an image editor for an exact location.
Are my uploaded images kept?
The tool processes images in the browser without uploading them. Clear releases its current preview and sampled pixels.
Does it check accessibility?
Black or white swatch labels are chosen for readable display. The extracted colors are not an accessibility-approved UI palette; check the actual foreground and background pairs you plan to use.