How to Extract a Color Palette from an Image
Load your image
Drag an image onto the drop zone or click Select Image to browse for a file. The picture is read straight into an HTML Canvas in the page, so it stays on your device and is not uploaded anywhere. A preview appears once the file loads.
Pick how many colors
Choose 5, 8, 12, or 16 from the Number of colors menu, then click Extract Colors. The tool downscales the image to a 200 pixel working copy, samples the pixels, and groups them into that many dominant clusters using median cut quantization.
Switch format and copy
Toggle between HEX, RGB, and HSL to relabel every swatch in your preferred notation. Click any single swatch to copy that one code, or use Copy All to copy the whole palette as a newline separated list ready to paste into your editor.
Color Formats and Tool Options
The extractor exposes a small set of controls: how many colors to pull and which notation to display. The output format only changes the labels and what gets copied, not the underlying colors, so you can flip between them freely after extracting.
| Option | Available values | What it controls | Best for |
|---|---|---|---|
| Number of colors | 5, 8, 12, 16 | How many dominant clusters median cut produces | 5 for logos, 8 for general use, 12 to 16 for rich photos |
| HEX format | #rrggbb | Six digit hexadecimal code | CSS, design tools, and most web workflows |
| RGB format | rgb(r, g, b) | Decimal red, green, blue channels 0 to 255 | Code, shaders, and channel level edits |
| HSL format | hsl(h, s%, l%) | Hue, saturation, and lightness | Building tints, shades, and harmonies |
| Click a swatch | Single color | Copies one code in the active format | Grabbing one accent color quickly |
| Copy All | Full palette | Copies every code, one per line | Pasting a whole scheme at once |
Which Color Count Should You Choose
5 colors
Best for logos, icons, and flat illustrations with a small set of distinct tones. Five clusters keep the result tight and avoid splitting one brand color into near duplicate variants.
8 colors
A balanced default for most images. Eight clusters capture the main hues plus a couple of supporting tones, which is enough for a usable scheme without clutter.
12 colors
Good for detailed photographs and artwork where lighting creates many midtones. More clusters preserve subtle transitions that a smaller count would merge together.
16 colors
The widest palette, suited to complex scenes, gradients, and reference boards. Expect some closely related shades, which you can trim down by hand after copying.
Common Problems and Fixes
The palette looks washed out or too gray
Median cut averages the pixels inside each cluster, so busy or low contrast images can return muted midtones. Try a higher color count to separate the clusters, or crop to the area whose colors you actually want before extracting.
Transparent areas seem to be ignored
That is intended. Pixels that are mostly transparent are skipped during sampling, so a PNG with a clear background contributes only its visible content. Flatten the image onto a solid background first if you want the backdrop included.
Clicking a swatch did not copy anything
Copying uses the browser clipboard, which needs a secure context and clipboard permission. Make sure you are on the https page and that the browser is not blocking clipboard access, then click the colored square again.
Fine details are missing from the result
The image is downscaled to a 200 pixel working copy and only a subset of pixels is sampled for speed, so very small color regions may not surface as their own cluster. Crop tightly to the detail you care about and extract again.