Extract a color palette from an image

How the colours are picked

A photo can hold hundreds of thousands of slightly different colours. To find the few that describe it, the extractor first scales the picture down to 180 pixels on its longest side, which keeps the overall colours and drops noise. It then groups similar colours with median cut, a classic method that keeps splitting the set of colours where it is most spread out, until there are as many groups as you asked for. Each group becomes one swatch: the average of the colours in it.

Two clean ups follow. Groups that look nearly the same to the eye are merged, measured in OKLab, a colour space built to match human perception, so the soft edges of a three colour logo do not show up as extra shades. Groups covering less than 0.4 percent of the picture are dropped. Transparent pixels are ignored altogether.

Reading the result

Swatches are ordered by area, so the first one is the colour that covers most of the picture. That is often a background, a sky or a wall rather than the colour that catches the eye. A small red bag in a grey street may come last or not at all. Raise the number of colours to catch small accents, and switch on Ignore near white for products photographed on white, or Ignore near black for night shots and dark backgrounds.

Fewer colours give broader, more general swatches; more colours split them into shades. Five or six suits a mood board or a website theme; ten or twelve suits matching paint or fabric to a photo.

Using the colours

• HEX, such as #3a7d44, is what most design tools and websites expect.
• RGB gives the same colour as three numbers from 0 to 255.
• HSL describes hue, saturation and lightness, which makes it easy to make a lighter or darker version by hand.
• OKLCH is the modern CSS format: equal steps of lightness look equally different, so it is the best base for a set of tints.

Click any swatch to copy it, use Copy all for the whole list, or CSS variables for a block you can paste into a stylesheet. Several pictures can be processed at once; the ZIP holds, for each one, a strip of labelled swatches as a picture, a JSON file and the CSS.

Colours for text and buttons

A palette taken from a photo looks right together, but not every pair is readable. Text needs strong contrast with its background: the usual guideline for body text is a contrast ratio of at least 4.5 to 1. Use the darkest or the lightest swatch for text, and keep mid tones for backgrounds, borders and accents.

If something goes wrong

• The main colour of the subject is missing. It covers too little of the picture. Raise the number of colours, or crop to the subject first with crop image.
• Two swatches look the same. Lower the number of colours; the picture does not have that many distinct ones.
• It says there are no visible pixels. The picture is fully transparent, or every pixel was ignored as near white or near black. Switch those options off.