Image Color Palette Extractor

Extract 3, 5, 8 or 10 dominant colours from an image with HEX, RGB and HSL values, copy buttons and ready-made CSS custom properties.

Image Runs client-side Free to use

Jump to the tool

About the Image Color Palette Extractor

Image Color Palette Extractor finds the dominant, visually distinct colours in a photo, logo or screenshot. Choose 3, 5, 8 or 10 colours and get each one as HEX, RGB and HSL, with a copy button for every value, its approximate share of the image, and a block of CSS custom properties you can paste into a stylesheet.

The image is analysed on a canvas in your browser. Pixels are grouped by perceived colour (in the CIELAB colour space), very similar shades are merged so the palette stays distinct, and transparent or mostly transparent pixels are ignored. Nothing is uploaded.

How to use

Click the upload area or drag in a JPG, PNG or WebP image.
Choose how many colours you want: 3, 5, 8 or 10.
Review the swatches — each shows its HEX code, share of the image, and RGB and HSL values.
Use the small copy buttons for single values, or Copy palette for all HEX codes.
Copy the CSS custom properties or click Download palette to save everything as a text file.

Key features

Choice of 3, 5, 8 or 10 colours, ordered from most to least common.
HEX, RGB and HSL for every colour, each with its own copy button.
Perceptual clustering in CIELAB space with merging of near-identical shades.
Swatch labels automatically switch between black and white for readable contrast.
Ready-to-paste CSS custom properties (HEX and RGB triplets).
Transparent pixels are skipped, with a clear message if nothing usable remains.

Best practices

Crop away borders or large backgrounds first if you only want the subject’s colours.
Use 3–5 colours for a brand or UI palette and 8–10 to capture a detailed photo.
Check text contrast before using palette colours for text on backgrounds.
Treat percentages as approximate — they are measured on a downscaled copy of the image.
Rename the generated --palette-n variables to meaningful names (such as --brand-primary) in your project.

Benefits

Turns a mood board, photo or logo into usable colour codes in seconds.
No eyedropper guesswork — colours are averaged across real pixel groups.
Private: the image never leaves your device.
Output works directly in CSS, design tools and documentation.

Frequently asked questions

How are the colours chosen?

The image is downscaled, its pixels are grouped by perceived colour with k-means clustering in CIELAB space, and the largest groups are kept while near-duplicate shades are merged.

Why do I get fewer colours than I asked for?

Some images contain fewer visually distinct colours than requested. Rather than repeat almost-identical shades, the tool shows only the distinct ones and tells you.

What happens with transparent PNGs?

Transparent and mostly transparent pixels are ignored. If every pixel is transparent, you get a clear message instead of a palette.

Is the image uploaded?

No. Everything is calculated in your browser, and the file is never sent anywhere.

What is the percentage on each swatch?

It is the approximate share of analysed (non-transparent) pixels that belong to that colour group.

Can I use the CSS output directly?

Yes. Paste the :root block into your stylesheet and use var(--palette-1) and so on. The -rgb variables help with semi-transparent colours, e.g. rgb(var(--palette-1-rgb) / 50%).