Palette generator
From one base colour to five harmonies, with the contrast ratio of black and white on every swatch and export to CSS.
en / tools / palette-from-image
Palette from image
Drop an image and pull out three to eight dominant colours, with hex and contrast. The image stays in your browser.
Free, in the browser, no account
Drag an image here, or
From 3 to 8. Changing the number does not re-read the file: it reuses the pixels already read.
The method is median cut: take the group of pixels that is widest on one channel, cut it in two, repeat. The cut falls where the values actually change, so a colour covering more than half the image is not split into two shades that are not in the image.
The image is scaled to 256 pixels on its long side before being read. Dominant colours do not change with scale — that is the property that makes them dominant — and on a twelve megapixel photo the maths would take fifty times as long for the same answer.
The image stays in your browser: it goes into a canvas and a list of colours comes out. It is not uploaded anywhere and its EXIF data is not read.
How it works
- Drag an image into the box, or choose a file.
- Move the slider to decide how many colours to extract.
- Copy a single hex, or the whole palette as a list or CSS variables.
What it does
It reads an image and pulls out its dominant colours, three to eight. For each one it gives the hex and says whether white or black text reads better on it, with the ratio.
Use it to start from a photograph, a cover or a logo and get the colours to build around.
About the method
The method is median cut. Take the group of pixels that is widest on one channel, cut it in two, and repeat until you have as many groups as you need. A group’s colour is the average of what it contains.
The cut falls where the values actually change, not at the middle of the group. That is the one departure from the textbook method, and it earns its place: cutting at the middle would split a colour covering more than half the image in two, producing two shades that are not in the image. On a photograph, where every value differs, the two cuts coincide.
Median cut rather than k-means because it is deterministic: the same image gives the same colours, every time. K-means starts from randomly chosen points, and two runs on one image would give two different palettes.
About transparent pixels
Transparent pixels are discarded, not composited onto white.
A PNG with a transparent background would otherwise give white as its dominant colour — which is the colour of nothing, and on top of that the one that ruins the whole palette.
If the image is entirely transparent no colour comes out, and the page says so.
About the downscale
The image is scaled to 256 pixels on its long side before being read.
Dominant colours do not change with scale: that is exactly the property that makes them dominant. On a twelve megapixel photograph the maths would take fifty times as long for the same answer.
Changing the number of colours does not re-read the file: it reuses the pixels already in memory.
What is not here
The image does not leave your browser. It goes into a canvas and a list of colours comes out. It is not uploaded anywhere.
EXIF data is not read. A photograph can carry the camera model, the date and GPS coordinates: here they are not even looked at.
About your data
Everything happens in your browser. This site is made of static files and has no server to send anything to, even if it wanted one.
From here you also go here
Compress and resize images
Drop the photos in, pick the long side and the quality, see what they weigh before and after. Up to twenty at a time, all in the browser.
Convert image format
PNG to JPG, to WebP and back. The size stays, the quality is yours, and under the transparency you put the colour you want.