How to use Image colour palette extractor
- Choose an image, or try the sample photo.
- Pick how many colours you want, from 5 to 12.
- Select any colour to copy its hex code, or try another grouping.
- Export the palette as CSS custom properties, a Tailwind config, JSON or a Figma-friendly list.
The colours an image is made of
A good palette often starts from a picture: a product photo for a landing page, a brand's hero image, a painting, a screenshot of an app you admire. This tool finds the main colours in an image and shows how much of the picture each one covers, from the largest share to the smallest. Choose between 5 and 12 colours; fewer colours give a bold summary, more pick out accents and small details.
Select any colour to copy its hex code. The proportion bar above the swatches shows the balance at a glance, which helps when deciding which colour should be the background and which only an accent.
How the colours are found
The image is decoded by your browser and sampled down to at most 160 pixels on its longest side, taking real pixels rather than blurred averages, so even a very large photo is processed in a moment. The sampled pixels are then grouped with k-means clustering in OKLab, a colour space where distance matches how different two colours look, so the groups follow what you see rather than raw RGB numbers. Each palette colour is the average of its group, and its share is the part of the image that group covers. Transparent pixels are ignored.
The grouping starts from a fixed seed, so the same image and colour count always give the same palette. Try another grouping changes the seed, which can split or merge similar shades differently in a busy photo. An image built from a few flat colours, such as a logo, chart or illustration, gives those exact colours back, and the tool tells you when an image has fewer colours than you asked for.
Export to your tools
Export the palette as CSS custom properties, a Tailwind config with the colours under theme.extend.colors, JSON with hex, RGB and share, or a Figma-friendly list with each colour's hex and the 0 to 1 RGB values Figma plugins use. Copy it or download it as a file.
Private by design
The image never leaves your device. It is read and analysed by a background worker in this browser tab, and nothing is uploaded, so unreleased designs and personal photos stay yours.
Questions
- Is the image uploaded?
- No. The image is decoded and analysed by a background worker in your browser tab. Nothing is sent to WeaveAI or anyone else, and after your first palette the tool keeps working if you go offline.
- Will I get the same palette every time?
- Yes. The grouping starts from a fixed seed, so the same image and colour count always give the same palette. Try another grouping changes the seed, which can split or merge similar colours differently.
- Why are some colours slightly different from the image?
- Each palette colour is the average of a group of similar pixels, so in a photo it can sit between the shades it stands for. An image made of a few flat colours, such as a logo or a chart, gives those exact colours back.