How does it find the main colours?

It looks at a sample of the picture's pixels, groups similar colours together and averages each group. The percentage on each swatch is how much of the picture that group covers. Transparent pixels are ignored.

How do I get an exact colour from one spot?

Click or tap that spot on the picture and the colour is added to Colours you picked and copied. In browsers that support it you also get a button to pick from anywhere on your screen.

What do the AA and AAA badges mean?

They come from the WCAG accessibility guidelines for text contrast. Normal text needs a ratio of at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1. Ratios are rounded down, never up, so a pass is a real pass.

Can I use the palette in my website or app?

Yes. Copy the CSS variables, the JSON or the Tailwind snippet straight into your project.

Is my picture uploaded anywhere?

No. The colours are read in your browser. Nothing is sent to a server.

Image Tool

Colour Palette Extractor & Picker

Pull the main colours out of any picture, or click a spot to pick an exact colour. Copy HEX, RGB or HSL, check text contrast against accessibility standards, and export the palette as CSS, JSON or Tailwind. Runs entirely in your browser.

UploadProcessingDownload

Drag an image here, or click to browse

Single file · Max 50.0 MB

How it works

1
Add a picture.
2
See its main colours. Move the slider to get more or fewer, or click the picture to pick an exact colour.
3
Copy HEX, RGB or HSL, and check text contrast against white and black.
4
Export the palette as CSS variables, JSON, a Tailwind config snippet or a plain list.

Colour Palette Extractor & Picker — frequently asked questions

How does it find the main colours?: It looks at a sample of the picture's pixels, groups similar colours together and averages each group. The percentage on each swatch is how much of the picture that group covers. Transparent pixels are ignored.
How do I get an exact colour from one spot?: Click or tap that spot on the picture and the colour is added to Colours you picked and copied. In browsers that support it you also get a button to pick from anywhere on your screen.
What do the AA and AAA badges mean?: They come from the WCAG accessibility guidelines for text contrast. Normal text needs a ratio of at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1. Ratios are rounded down, never up, so a pass is a real pass.
Can I use the palette in my website or app?: Yes. Copy the CSS variables, the JSON or the Tailwind snippet straight into your project.
Is my picture uploaded anywhere?: No. The colours are read in your browser. Nothing is sent to a server.