How to get a colour palette from an image

Steps

1. Open the Colour palette generator and drop in a picture.
2. The main colours appear straight away. Use the slider to ask for fewer or more, from 2 to 12.
3. Click a swatch to copy its HEX code.
4. Or copy the whole palette as a list or as CSS variables.

How the colours are chosen

Similar pixels are grouped and each group is averaged into one colour, so a colour that fills most of the picture comes first. The percentage on a swatch is how much of the picture that group covers.

Fully or mostly see-through pixels are ignored, so a logo on a transparent background gives the logo colours, not a dark empty one.

Using the palette

Copy as CSS variables gives custom properties such as --colour-1 that you can paste straight into a stylesheet. The plain list is handy for notes or a design tool.

If the picture has fewer distinct colours than you asked for, you get only the colours it has. A three-colour logo gives three swatches, not twelve. For one exact colour, use the colour picker instead.

Tips

Use a picture with the mood you want. A palette is only as good as the picture it comes from, and a sunset photo gives very different colours from a product shot.

Pick two or three colours from the palette rather than all of them. Most designs work best with one main colour, one accent and a neutral, and the percentages show which colours are the biggest candidates.