Image Color Palette Extractor

It shrinks the image to about 200 pixels on the longest side, ignores transparent pixels, then groups similar colours. K-means moves each colour group to the average of the pixels closest to it until the groups settle. Median cut keeps splitting the colour range where it varies most. Both give the average colour of each group and the share of pixels it covers.

K-means usually gives colours that look closest to the image and is the default. Median cut is fully predictable and good at separating a few flat colours, which suits logos and illustrations. Try both; they take a fraction of a second.

They are WCAG contrast ratios between the colour and white or black text. 4.5:1 or higher passes AA for normal body text, and 3:1 passes AA for large text (about 24 px, or 19 px bold). Use them to decide whether white or black text is readable on that colour.

Each swatch is the average of a group of similar pixels, and anti-aliased edges blend colours together. For an exact value, click the image with the colour picker on a flat area of the colour you want.

No. The image is drawn on a canvas in your browser and all the maths runs on your device. Nothing is sent to Hypello or anywhere else.

No. Pixels that are more than about half transparent are skipped, so a logo on a transparent background gives the logo's colours, not black or white from the empty area.