How to pick colours from an image and build a palette

A photo you love, a client's logo, a screenshot of a design you admire: each contains a set of colours you might want to reuse. Picking them by eye is guesswork. Extracting them gives you exact codes you can paste into a design tool, a website stylesheet or a slide template.

Extract a palette step by step

1. Add the image to the Color Palette Extractor.
2. Choose how many colours you want — five to eight suits most palettes.
3. Copy individual colours as HEX, RGB or HSL, or copy the whole palette as CSS variables, a Tailwind theme or JSON.
4. Click anywhere on the image to read the colour at that exact spot.

The image is analysed in your browser; it is not uploaded.

How the colours are chosen

The extractor groups similar pixels together and finds the most representative colour of each group. It measures similarity in a colour space designed around human vision, so the palette favours colours that look different to you, rather than five slightly different shades of the same background. The same image always produces the same palette, and each colour shows the share of the image it covers.

Two consequences are worth knowing. A small but striking accent colour can be absorbed into a larger neighbour, so increase the number of colours or click to sample it directly. And palette colours are averages of their group, not copies of a single pixel.

HEX, RGB and HSL

• HEX, such as #1F6FEB, is the most common format in web design and design tools.
• RGB, such as rgb(31, 111, 235), gives the red, green and blue amounts from 0 to 255.
• HSL describes hue, saturation and lightness. It is the easiest to adjust by hand: keep the hue and change the lightness to make tints and shades of the same colour.

From colours to a usable palette

Raw extracted colours rarely make a palette on their own. A practical structure:

• One main colour — the most characteristic, used for buttons, links and highlights.
• One or two accents — used sparingly for emphasis.
• Neutrals — a near-white, a near-black and a grey or two for backgrounds, text and borders. These often come from the image too, slightly adjusted.

If a colour is close to what you want but slightly off, adjust its lightness in HSL rather than picking a new hue; the palette stays coherent.

Check which colours work for text

Each colour shows whether white or black text reads better on top of it, with its contrast ratio. Accessibility guidelines ask for at least 4.5:1 for normal text and 3:1 for large text. Many attractive mid-tone colours fail both, which is fine for decoration but not for backgrounds behind words. Check the palette for colour blindness too, with the Colour Blindness Simulator, if colours will carry meaning — see how to check a design for colour blindness.

Photos are not exact brand colours

Lighting, camera processing and compression all shift colours in a photograph. Picking a colour from a photo of a shop sign gives you a lit, compressed version of the brand colour, not the official value. For a company's exact colours, ask for its brand guidelines, or sample from a clean vector logo rather than a photo.

Putting the palette to work

Paste the CSS variables into a stylesheet, the Tailwind theme into a project configuration, or the HEX codes into your design tool's swatches. The main colour also makes a good background for a site icon in the Favicon Generator.