Pull 3 to 10 main colours out of any picture. Runs on your device.
The tool works on a small copy of your picture, at most 200 by 200 pixels, so a large photo is handled the same way as a small one. It puts all the pixels into one group, then splits the group in two along the colour channel (red, green or blue) that varies the most, cutting at the middle pixel. It keeps splitting the group with the widest spread until it has the number of colours you asked for, then averages each group into one swatch. This method is called median cut. It has no random step, so the same picture and the same count give the same colours every time. Each swatch shows its HEX code, such as #5E60CE, or its RGB value. Pixels that are partly see-through count in proportion to how solid they are, and fully transparent pixels are left out.
The percentage on each swatch is the share of the sampled pixels that are closest to that colour. It is not an exact area of the picture, and it is not a judgement of which colours look good together. A small bright logo on a large grey photo can be absorbed into a grey swatch, because few pixels carry it. If a colour you can see is missing, raise the count from 6 towards 10, or crop the picture to the part that matters first. A solid single-colour image gives one swatch, and the tool says so instead of padding the list with copies. Swatches are listed from the largest share to the smallest, and the percentages always add up to 100.
Under each swatch you see either Dark text or Light text, with a ratio such as 5.25:1. The tool compares the swatch with white and with black using the WCAG formula for relative luminance, and names the one that reads better. Pure red, #FF0000, gets Dark text at 5.25:1, while pure blue, #0000FF, gets Light text at 8.59:1. The label tells you which of the two to put on that colour; it does not check pairs of swatches against each other, and it does not tell you whether a design as a whole passes an accessibility audit.
The picture is read by your browser's own image code and drawn on a canvas inside this tab. There is no upload step and no server that receives pictures. The page counts visits with Google Analytics, using rough groups, never a file name, an image or a colour. The palette strip you can download is 1200 by 200 pixels, drawn in this tab, with equal columns. Copy all as CSS variables gives lines like --color-1: #0F6E7D inside a :root block. This tool does not name colours, build harmonies, pick colours on the image with an eyedropper or save palettes between visits.
Start with the default of 6. For a logo with two or three flat colours, 3 or 4 is enough. For a landscape photo, 8 to 10 shows the in-between tones. The tool accepts 3 to 10, and a number outside that range is moved to the nearest allowed value.
Colours are grouped by how common they are, so a small detail, such as a tiny logo in the corner of a large photo, can be averaged into a larger neighbour. Raise the count to 10, or crop the picture so the detail takes up more of it, then run it again.
Yes. There is no random step. The same picture and the same count give the same swatches, in the same order, with the same percentages. Changing the count changes the groups, so the colours can shift a little between 5 and 6.
Yes. A pixel counts in proportion to how solid it is, and fully transparent pixels are skipped, so the empty area around a logo adds no colour. A PNG where every pixel is fully transparent gives a message instead of a palette.
A :root block with one line per swatch, numbered from 1 in the order shown, such as --color-1: #0F6E7D;. Paste it into a stylesheet and use var(--color-1). Copy as JSON gives the same colours as HEX, RGB and percent, for a script or a design tool.
No. A copy of up to 200 by 200 pixels is made in this tab and read there. Nothing about the picture, its colours or its file name is sent anywhere. The palette PNG and the JSON file are built on your device when you press Extract palette.