Loading tool…
Great colour schemes are often hiding in photographs. Drop in an image, choose how many colours you want, and get its dominant palette with each colour’s share of the picture, ready to copy as CSS custom properties or a JSON array.
Processing locally on your device
Overview
A typical photo contains tens of thousands of distinct colours. Palette extraction reduces them to a handful that represent the image. This tool uses median-cut quantization, a classic algorithm: it places all pixel colours in an RGB box, splits the box along its widest colour channel at the median value, and repeats on the resulting boxes until it has the number of colours you asked for. The average colour of each final box becomes one palette entry.
To stay fast, the image is first downscaled to a smaller copy, which keeps the colour distribution while cutting the number of pixels to analyze. Fully transparent pixels are ignored, so the empty background of a logo PNG doesn’t show up as a colour. You can choose between 2 and 16 colours: fewer give a bold, simplified palette, more capture secondary tones and accents.
Each colour is listed with its share of the image as a percentage, and a proportional colour bar shows the balance at a glance. Values appear in HEX, RGB and HSL. You can copy the whole palette as CSS custom properties, ready to paste into a stylesheet, or as a JSON array for design tokens, scripts and data visualization tools.
| Palette size | Result | Good for |
|---|---|---|
| 2–3 | Dominant base colours only | Backgrounds, two-tone designs |
| 4–6 | Balanced, usable palette | Website themes, brand mood |
| 7–10 | Includes secondary tones | Illustration, presentations |
| 11–16 | Captures small accents and shading | Detailed analysis, data viz palettes |
Open an image.
Choose the number of colours, from 2 to 16.
Review the palette, each colour’s percentage and the colour bar.
Copy individual values, or copy the palette as CSS variables or JSON.
Use cases
Pull a palette from a hero image so buttons, backgrounds and accents harmonize with the photo.
Extract the colours of a room, landscape or artwork to guide paint, fabric or decor choices.
Generate a set of chart colours from a brand image and paste the JSON array into your charting code.
Find the dominant colours of your best-performing posts and reuse them in graphics and captions.
Pro tips
Answers to common questions about the palette extractor.
It treats colours as points in a 3D RGB space, repeatedly splits the group with the widest range at its median, and averages each final group. The result is a set of colours that represent roughly equal portions of the image’s colour variety.
Median cut favours colours that cover larger areas. Increase the number of colours, or crop the image around the accent, to bring it into the palette.
Each percentage is the share of non-transparent pixels assigned to that colour. They add up to roughly 100%.
A set of custom properties such as --color-1: #1E3A5F; that you can paste into a :root rule and use with var(--color-1).
Yes. Transparent pixels are skipped, so the palette describes only the visible artwork.
No. ToolEnhancer processes files on your own device inside the browser. They are never sent to, stored on or seen by our servers.
Yes. The palette extractor is free to use with no sign-up, no watermarks and no daily limits.
Strip location and camera metadata from photos.
Pick any pixel colour from an image.
Inspect RGB and luminance histograms.
Diff two images side by side or overlaid.
Encode images as data URIs for HTML and CSS.
Create QR codes with colours and logos.