Image Color Palette Extractor

How to use the Image Color Palette Extractor

1. Drop a picture onto the box, click to choose a file, or press Try an example picture.
2. Set the number of colours (2–16). Use 4–6 for a brand or mood palette and 10–16 for a detailed photo.
3. Click a swatch to copy its HEX code, or use the buttons to copy the whole palette as a HEX list, CSS variables or JSON.
4. Click or tap the picture to pick one exact pixel. Press Add to palette to keep it with the extracted colours.
5. Download the palette as a PNG for a mood board, or as a .gpl file for GIMP, Krita or Inkscape.

How the palette is calculated

The picture is first reduced to at most 320 pixels on its long side, and similar colours are grouped into small bins. The bins are then clustered with k-means in the Lab colour space, which is designed so that distances match what the eye sees. Each cluster centre becomes a palette colour, and its share is the fraction of visible pixels in that cluster. Fully transparent pixels are ignored.

The result depends on the picture: a photo of a sunset has a few big colour families, while a busy collage can need more colours before the palette feels complete. If two colours look too similar, lower the number; if an accent colour is missing, raise it or click the picture to pick it directly.

HEX, RGB and HSL

The same colour can be written several ways. This table shows one colour in all three formats, as used by CSS and most design tools:

Use HEX in most CSS and design apps. HSL is handy when you want to make a colour lighter or darker by changing only the lightness.

Picking a colour yourself

Clicking the picture reads the exact pixel from the original image — not from the scaled preview. In photographs, neighbouring pixels differ because of noise and texture, so a single click can land on a slightly unusual shade. If you want the typical colour of an area, rely on the extracted palette instead, or click a few times and compare.

Using the palette

• CSS variables — paste the block into a stylesheet and rename the variables.
• JSON — a list of objects with HEX, RGB, HSL and share for scripts and design tokens.
• .gpl file — the GIMP palette format, which GIMP, Krita and Inkscape can load as a swatch set.
• Palette PNG — a strip of swatches with their HEX codes for mood boards and messages.

If you use the colours for text on a background, check the contrast: the WCAG accessibility guidelines ask for at least 4.5 : 1 for normal-size text and 3 : 1 for large text.

Nearest generic bead colour

The last column of the table names the closest colour from the generic 48-colour set used by the bead and cross stitch tools. It is meant as a starting point for planning a bead or stitch project from a picture, and it is not matched to any brand’s colour numbers. For a full pattern, use the bead pattern generator, and read the guide to choosing bead colours.

Frequently asked questions