How to use it
- Click Choose a photo or drop an image on the box. The photo is read on your device.
- Choose the Number of colours, from 5 to 10. A busy photo needs more colours.
- Read each colour: its hex code, RGB and HSL values and its share of the picture. Click the copy button beside a colour to copy its hex code.
- Under Export the palette, use Copy as CSS variables, Copy as a list or Download swatches (PNG).
How the colours are found
Every pixel is converted to CIE L*a*b*, a colour space in which the distance between two colours is close to how different they look to the eye. The pixels are then grouped into the number of colours you choose by k-means clustering, which places each group's centre so that the pixels are as close to their centre as possible.
The starting centres are chosen with the k-means++ method, with a fixed seed, so the same photo always gives the same palette. Each colour is the average of the pixels in its group, and its share is the number of those pixels divided by all the pixels.
Pixel → (L*, a*, b*)
Groups: each pixel joins the nearest centre; centres are the averages of their pixels
Colour = average RGB of the group; share = pixels in the group ÷ all pixels- The photo is analysed as a copy of up to about 2 megapixels, which keeps large photos quick.
- Very similar shades can share one colour. A palette of 10 may split one colour in two when a photo has many shades of it.
Codes, shares and what they mean
The hex code is the colour written as three pairs of hexadecimal digits for red, green and blue; the RGB values are the same numbers in decimal. HSL gives the hue as an angle round the colour wheel (0 is red, 120 green, 240 blue), the saturation as its strength and the lightness as how light it is.
The share is the fraction of the picture's pixels that belong to a colour, which is the area it covers. A small, bright spot can be a colour with a small share, and a large soft background can have one large share made of several similar shades.
- Copy the CSS variables to use the colours in a web page or a design: each colour becomes --color-1, --color-2 and so on.
- The PNG strip is for a mood board or a printout: one swatch per colour, with its hex code under it.
Worked example: blocks of red, blue and green
A test picture of 50 red, 30 blue and 20 green pixels gives exactly three colours, because each block is one flat colour. Asked for six colours, the tool still returns those three, and no invented colours.
The list is ordered from the largest share, and each code is the exact colour of its block.
| Colour | Hex | RGB | HSL | Share |
|---|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 50.0% |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 30.0% |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 20.0% |
Frequently asked questions
Are the colours exact to the photo?
A flat area gives its exact colour. A photo with gradients gives the average of each group, which is a fair summary of the picture but not every shade in it.
Why does the palette stay the same each time?
The clustering starts from a fixed seed, so the same photo and the same number of colours always give the same palette. Changing the photo or the number of colours changes the result.
How many colours should I choose?
Five colours capture the main mood of most photos. Use 8 to 10 for a busy picture or when you need more shades for a painting or a design.
Is my photo uploaded anywhere?
No. The photo is read by your browser, the palette is worked out on your device, and nothing is sent to us.
What is the difference between hex, RGB and HSL?
They describe the same colour in three ways: hex and RGB list the red, green and blue amounts, in hexadecimal and in decimal. HSL describes hue, saturation and lightness, which is easier to adjust by eye.
Sources
- Wikipedia: k-means++ (Arthur and Vassilvitskii, 2007, careful seeding of k-means)
- Wikipedia: CIELAB colour space (L*a*b*, D65 white point)
Figures and text last checked on Tuesday, November 10, 2026.