Color Palette Extractor

1. 1Add an image.
2. 2Choose how many colours you want in the palette.
3. 3Copy any colour code, or copy the whole palette as CSS variables, a Tailwind theme or JSON.
4. 4Click a point on the image to read the colour at that spot.

The image is scaled down and read pixel by pixel in your browser. Similar pixels are grouped into buckets — 32,768 of them, five bits per colour channel — so a photo with millions of pixels becomes a few thousand weighted colours that can be analysed instantly.

Those colours are clustered with k-means in CIELAB colour space. Distance in CIELAB matches how different two colours look to the eye far more closely than distance in RGB, so the palette favours colours that are visibly distinct rather than several near-identical shades of one background.

The starting points are chosen deterministically — the most common colour first, then whichever colour is furthest from those already chosen — so the same image always gives the same palette. A colour's share is the proportion of the image's opaque pixels closest to it; transparent pixels are ignored.

Each colour also shows whether white or black text reads better on top of it, with the WCAG contrast ratio, which helps when turning a palette into a design.

• Raise the number of colours if a small accent colour is missing; it may have been absorbed into a larger neighbour.
• Click directly on the image to sample one exact spot.
• Use the contrast figures before choosing a colour as a text background: 4.5:1 is the minimum for body text.
• Copy the palette as CSS variables, a Tailwind theme or JSON to drop it straight into a project.

• How to make a favicon for your website
• How to check a design works for colour-blind people
• How to pick colours from an image and build a palette