Image Palette

What it's for

Pull the main colours out of a picture: a photo you want to match, a logo whose brand colours you need, or a screenshot of a design. Each colour comes with its hex code and how much of the picture it covers.

For example, when you’re building a web page to match a company’s logo and only have the logo as an image, drop it here and copy the colours as CSS variables.

How to use it

Choose an image, or drop or paste one onto the page, and pick how many Colours you want (remembered). The colours appear most used first, each with its hex code and share of the picture; choose one to open it in Colour Converter, for its RGB, HSL and OKLCH values, contrast checks, tints and shades. Copy hex codes copies one code per line, and Copy CSS a :root block of CSS custom properties.

Example

Make a QR code in the QR Code tool and download its PNG. Choose that PNG here with Colours set to 3: only two colours are found, #000000 and #ffffff, as a QR code has nothing else.

Good to know

The colours are averages of groups of similar pixels (k-means clustering), so a small but striking accent in a large photo may merge into a nearby colour: ask for more colours to separate it. Fully transparent pixels are ignored and partly transparent ones count as solid. The image is shrunk to 200 pixels across before it’s read.