Image Color Palette Extractor
Extract dominant colors from any image and copy HEX, RGB, or HSL codes instantly.
Drop an image here or click to select
Image Palette Extractor Features
Fast color extraction with browser-side processing where available.
Uses median cut quantization for accurate dominant color identification.
Get colors in HEX, RGB, or HSL format with one click.
Click any swatch to copy its color code to your clipboard.
Key Takeaways
- The image is read into an HTML Canvas inside your browser and processed entirely on your device, so the fileis processed on your device.
- You can pull 5, 8, 12, or 16 dominant colors using median cut quantization, and display each in HEX, RGB, or HSL while copying single swatches or the whole palette as a newline separated list.
- Choose the color count to match your image: 5 for logos and flat illustrations, 8 as a balanced default, and 12 to 16 for detailed photos, gradients, and complex scenes.
- Mostly transparent pixels are skipped and the image is downscaled to a 200 pixel working copy, so flatten PNGs onto a solid background or crop tightly when small color regions or backdrops fail to appear.
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.
About Image Color Palette Extractor
Extract the most prominent colors from any image file directly in your browser. Useful for designers, developers, and content creators who need accurate color references from photos or artwork.
Frequently Asked Questions
Is this tool free to use?
Yes, this tool is completely free.
No account or registration is required.
You can use it as many times as you like.
Is my image kept private?
Yes. Browser-side workflows run locally using the Canvas API.
Your image is never sent to any server.
We do not store, log, or share any uploaded files.
What formats does it support?
It supports JPEG, PNG, WebP, GIF, BMP, and most other browser-renderable image formats.
SVG files may have limited support depending on your browser.
Very large images may take a moment to process.
How many colors should I extract?
For most designs, 8 colors provides a good balance of variety and clarity.
Use 5 for simpler images or logos.
Use 12 or 16 for photographs with complex color ranges.
Can I use the output in CSS?
Yes. Copy colors in HEX or RGB format and paste directly into your CSS.
HSL values are also valid in modern CSS.
Use Copy All to get all palette colors at once.
Does it work on mobile?
Yes, the tool is fully responsive and works on mobile devices.
You can select images from your camera roll on mobile.
No app download is needed.
Can I extract colors from a screenshot?
Yes. Any image file can be uploaded including screenshots.
Take a screenshot, save it, and upload it to the tool.
The extractor will find the dominant colors in the screenshot.
What algorithm is used?
The tool uses a median cut quantization algorithm.
It divides the color space recursively to find dominant clusters.
This produces accurate and visually representative palettes.
Sources and References
Format and tool details on this page are based on the official specifications and documentation below.
- Canvas API- MDN Web Docs
- CSS color values- MDN Web Docs
- CSS Color Module- W3C