How to get a color palette from an image

Steps

1. Open the Color palette generator and drop in a picture.
2. The main colors 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 colors are chosen

Similar pixels are grouped and each group is averaged into one color, so a color 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 colors, 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 colors than you asked for, you get only the colors it has. A three-color logo gives three swatches, not twelve. For one exact color, use the color 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 colors from a product shot.

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