Skip to content
FreeToolConvert

Image Color Palette Extractor

Find the dominant colours in an image and copy them as HEX, RGB or HSL codes, or as CSS variables.

In-browser · no upload JPG, PNG, WEBP

Runs entirely in your browser. Your files and text are not uploaded to our servers.

To get a colour palette from an image, choose the image, set how many colours you want (2–12) and select Extract colours. Each colour shows its HEX, RGB and HSL values and how much of the image it covers. Click a swatch to copy its code.

How to use the Image Color Palette Extractor

  1. 1

    Choose an image

    Photo, artwork, logo or screenshot.

  2. 2

    Pick the number of colours

    5–6 gives a practical palette.

  3. 3

    Extract and copy

    Click swatches or copy all as CSS variables.

How it works

The image is scaled down and its pixels are grouped with k-means clustering, which finds the colour centres that best represent the image. Colours are sorted by how many pixels they cover. Transparent areas are ignored.

Features

  • HEX, RGB and HSL

    Ready for design tools and code.

  • Coverage percentage

    See which colours dominate.

  • CSS variables

    Copy or download palette.css.

When to use it

  • Building a brand palette from a logo or product photo.
  • Matching website colours to a hero image.
  • Design inspiration from photos and artwork.

Privacy and file handling

Where it runs
Runs in your browser
File size limit
20 MB per file

Runs entirely in your browser. Your files and text are not uploaded to our servers.

Frequently asked questions

How accurate are the colours?

They are the average of each colour group, so they represent the image well but may not match one exact pixel. Use Color Picker to sample a specific pixel.

Is my image uploaded?

No. Analysis happens in your browser.

Was this tool helpful?

Thanks for the feedback.

Last reviewed