Colour Palette Extractor Online Free Tool
Extract dominant colours from any image with real k-means clustering. Frequency sort, hex/RGB/HSL, JSON/CSS/SVG export. Free, client-side.
Upload an image and the tool runs k-means clustering on a downsampled copy to surface the most dominant colours — with real frequency counts and three export formats.
Drop image here or click to upload
JPG · PNG · WebP · GIF — stays on your device
How to Use Colour Palette Extractor Online Free Tool
- Drop or pick an image - JPG, PNG, WebP, or GIF. Anything over 2000 px is downsampled to 400 px before extraction so the k-means step finishes quickly.
- Choose the number of colours: 3, 5, 8, 10, or 16. Five is a good default for most design work.
- Pick a sort order: hue (rainbow), lightness, saturation, or frequency. Frequency sorts by real cluster pixel counts - the number shown under each swatch is its share of the sampled pixels.
- Press Extract (or
Ctrl+Enter) to run the clustering. Results appear within a second for typical photos. - Click a swatch to copy its hex, or hit Copy all to grab a plain-text palette report with hex / RGB / HSL / frequency for every colour.
- Download the palette as JSON (full data), CSS (custom properties named
--color-1,--color-2, …), or an SVG swatch strip for Figma / Illustrator import. - Re-extract to run another clustering pass. K-means is seeded randomly, so results vary slightly between runs - Re-extract lets you hunt for a better palette without re-uploading.
Frequently asked questions
What is colour palette extraction?
An algorithm that clusters image pixels by colour and returns the cluster centres as a representative palette. This tool uses k-means – a standard, fast algorithm that settles on k colours in 20 iterations or fewer.
How many colours should I extract?
5 is a good default for most brand palettes. Try 3 for a minimalist scheme, 8-10 for richer illustrations, and 16 for dense photographs where you want to capture every tonal group.
What’s the difference between hex, RGB, and HSL?
Hex (#FF5733) is the web-native compact form. RGB names the Red/Green/Blue channels explicitly (rgb(255, 87, 51)). HSL (hsl(9°, 100%, 60%)) separates hue from lightness – easier for humans to reason about. The tool emits all three for every swatch.
Is my image uploaded to a server?
No. Decoding, downsampling, sampling, k-means, and rendering all happen in your browser. The image never leaves your device – there are no fetch calls on your image data.
Does “sort by frequency” actually work?
Yes. The k-means routine tracks the final cluster pixel counts and exposes them on every colour object. The frequency sort is real – earlier builds of the tool had a comment saying this was “skipped for now”, but the current build implements it properly (and shows the percentage under each swatch for transparency).
Why do I get different colours each time I extract?
K-means starts from random initial centroids, so different runs converge to slightly different local optima. The Re-extract button lets you try another run; for most images the differences are minor and the dominant colours are stable.
What happens with very large images?
Anything with a side longer than 2000 px is downsampled to a maximum of 400 px before clustering. This keeps the pixel count manageable and makes extraction complete in well under a second. For palette work the downsample has no visible impact – colour clusters are scale-invariant.
Does it handle transparency?
Yes. Pixels with alpha ≤ 128 are ignored during sampling, so transparent or near-transparent areas don’t contaminate the palette with background grey.
Can I export the palette?
Three ways. JSON gives you the full data structure (hex, RGB, HSL, count, frequency%). CSS gives you :root custom properties (--color-1, --color-2, …) ready to drop into a stylesheet. SVG gives you a horizontal swatch strip for Figma / Illustrator / design tool import.
Can I use this for design inspiration?
That’s exactly the intended use. Upload a photograph, brand asset, or artwork, pull the palette, and drop the CSS into your design system. The frequency stat makes it easy to spot the true “hero” colour vs. supporting tones.