Extract WebP Color Palette
Extract the dominant colour palette from any WebP image - HEX, RGB, HSL, JSON export. Free, offline, client-side, instant and secure.
Upload a WebP. Pick how many colours you want (3-12). Pick a bucket size
(smaller = more granular). The tool buckets pixels onto a uniform RGB grid,
returns each bucket's true centroid (not the bucket corner)
and shows the top K by pixel count. Switch between HEX,
rgb(), hsl(); sort by frequency, lightness, or hue.
Source WebP
Extracted palette (click any swatch to copy)
How to Use Extract WebP Color Palette
- Upload a WebP. Max 20 MB. The file is decoded locally - nothing uploads.
- Adjust palette size (3-12). Default 6 is a good balance - small enough to be usable in a design system, large enough to capture accents.
- Adjust bucket size (8-48). This is the RGB-grid step. 24 lumps together pixels within ±12 of each other on each channel - fast, good for photos. Drop to 8-12 for sharply distinct colours (logos, illustrations). Raise to 32-48 if too many near-duplicate shades show up.
- Pick a format.
HEXfor CSS,rgb()for design tools that prefer integers,hsl()for picking analogous colours. - Pick a sort order. Frequency surfaces the most common colours first; lightness orders dark→light; hue orders by colour wheel (red→violet) so harmony jumps out.
- Click Extract Palette (or press Ctrl/Cmd + Enter). The stats line shows sample dimensions, opaque vs transparent pixel counts, and how many unique buckets the image actually produced.
- Click any swatch to copy its value in the chosen format. Copy all copies the full list newline-separated. Download JSON exports a structured palette with HEX, RGB, HSL, and per-colour counts.
Frequently Asked Questions
What does “bucket size” mean?
The tool divides each RGB channel (0-255) into equal-width buckets of bucketSize. With bucketSize=24, channel 0 covers 0-23, channel 1 covers 24-47, and so on (11 buckets per channel; 11³ = 1,331 possible colour cells). Every pixel falls into exactly one cell. The tool counts hits per cell, ranks cells, then emits the per-cell centroid (the actual average RGB of the pixels in that cell). Smaller bucketSize → more cells → finer distinctions; larger → coarser groupings.
Why downsample the image to 400 px before analysing?
Two reasons. Speed – a 4K photo has ~8M pixels; analysing 400×400 (~160K) is 50× faster and produces the same palette. Pre-blur – a tiny amount of downscale anti-aliasing softens noise, so JPEG-source artefacts don’t show up as their own palette entries. The downsampled image is only used for the quantization; the original is preserved for the preview.
Why does my palette sometimes have only 4 colours when I asked for 12?
The image genuinely has fewer than 12 distinct buckets. A solid two-tone logo on white has 3 buckets total; asking for 12 still returns 3. The stats line shows “N unique buckets → top K” so you can see the gap. Lower the bucket size to split similar shades apart and you’ll usually get more entries.
How are transparent pixels handled?
Pixels with alpha < 128 are skipped entirely. The stats line reports how many were skipped. This matches the typical user intent (you want the visible colours of an icon, not "transparent" as a colour entry). If your WebP is fully transparent, you'll get an empty palette and an explanatory stats line.
What’s the difference between sorting by frequency, lightness, and hue?
Frequency (default) puts the most-common bucket first – useful for “what’s the brand colour of this hero image”. Lightness orders dark→light, which makes a palette feel like a ramp. Hue orders by HSL hue 0-360 (red → orange → yellow → green → blue → violet), so you can spot harmony or analogous schemes at a glance.
Can I export to my design tool?
Yes – the Download JSON button emits a structured file with HEX, RGB, HSL, count and fraction per colour. Most design tools (Figma plugins, Tailwind config generators, CSS variable builders) accept JSON. For a quick CSS variables drop-in, switch the format to HEX, click Copy all, and paste – one colour per line.
What image sizes are supported?
20 MB upload cap. Practical canvas limit is about 16,384 pixels per side. Because the tool downsamples internally to 400 px max edge, very large source images don’t slow you down – quantization always runs on at most ~160K pixels.
Is my image uploaded to a server?
No. The page loads three static files (HTML, CSS, JS) and runs entirely in your browser via the File API and Canvas. Your image bytes never leave the device – no fetch, no XHR, no analytics, no cookies. You can disconnect from the internet after the page loads and the tool still works.