Skip to content

Image Palette Extractor

Extract the dominant colour palette and hex codes from any image.

Private Instant No sign-up No daily limit

Free to use. No account, no daily limit, and no watermark on the result.

 Upload an Image

No file selected
Drop a picture here or click to browse JPG, PNG, WEBP, GIF, BMP or AVIF — the file never leaves your device
Large photos are handled fine. Images bigger than 300 × 300 pixels are downscaled to that size before the pixels are sampled, so even a 12 megapixel photo is analysed in a fraction of a second.

 Extracted Palette

0 colours

No palette yet

Upload an image above and the dominant colours, hex codes and the share of the image each colour covers will appear here automatically.

Key colours

Dominant colour
—
Average colour
—

—

Source image

Uploaded image preview

Dominant colours click the copy icon to grab a hex code

CSS custom properties

--color-1: #ff0000;
100% private. The picture is decoded with the browser canvas API and the colours are calculated on your device. No image is uploaded, cached or stored on any server.

How to extract colours from an image

1

Upload your picture

Drop a JPG, PNG or WEBP onto the upload zone or tap it to browse your files. Nothing is sent to a server.

2

Let the palette be calculated

The image is scaled down to a maximum of 300 × 300 pixels, the pixels are grouped into colour buckets and the most common colours are ranked.

3

Review the swatches

Each swatch shows its hex code and the percentage of the image it covers, next to the exact average colour and the single dominant colour.

4

Export the palette

Copy one hex code at a time, copy every colour as CSS custom properties, or download the whole palette as a PNG image.

Image palette extractor — frequently asked questions

The picture is drawn to an invisible canvas and every pixel is sampled. Each pixel is quantised into a bucket using four bits per colour channel, which groups 4,096 similar shades together. The buckets are then counted, ranked by how many pixels they contain and merged when two buckets sit close together. The result is a short list of colours that really represent the image instead of a long list of almost identical shades.

The extraction is deterministic — the same image always produces the same palette. A photo that contains thousands of shades (a forest, a crowd, a city skyline) will naturally produce more varied colours than a flat logo or an illustration with a handful of brand colours.

Yes. The “Copy all as CSS variables” button produces a ready-to-paste block such as --color-1: #8b5cf6; for every swatch, plus --color-dominant and --color-average. Add it to your :root block and reference the variables anywhere in your stylesheet.

Never. The file is read with the browser FileReader API, decoded locally and analysed with the HTML5 canvas. There is no server-side processing, no temporary storage and no analytics on the images you choose.

Related Color & Design

Color Converter & Picker

Convert between HEX, RGB, HSL and CMYK with WCAG contrast ratio checks.

Open tool

CSS Gradient Generator

Create multi-stop linear and radial gradients and copy the CSS code.

Open tool

Image Palette Extractor

Extract the dominant colour palette and hex codes from any image.

Open tool