Image Color Palette Extractor

Back

1. Image

Local · not uploaded

Drop an image here

or click to browse

JPG · PNG · WEBP · GIF · BMP · AVIF

2. Palette

sRGB values

Colours

Sort by

Copy format

Add an image to extract its colour palette.

Colours are averages of the decoded image pixels as your browser displays them (sRGB). They are not a colour-managed measurement.

About this tool

About Image Color Palette Extractor

Image Color Palette Extractor finds the main colours in a photo, logo or illustration. It samples the image in your browser, ignores transparent pixels, groups similar colours with a k-means algorithm in a perceptual colour space, and reports each colour’s HEX, RGB and HSL values with the share of the image it covers. Palettes can be copied or downloaded as JSON, CSS variables or plain text.

Designers and developers often need colours that match an existing image — for a website theme, a presentation or a brand mood board. Picking them by hand with an eyedropper is slow and inconsistent; extracting a palette gives representative colours in seconds, ready to paste into CSS or design tools.

How to use

Step by step

Drop an image onto the upload area or click to choose one.
Choose how many colours you want: 3, 5, 8 or 12.
Sort the palette by share, hue or lightness.
Copy a single colour with its Copy button, using the HEX, RGB or HSL format you picked.
Copy the whole palette, or download it as JSON, CSS variables or TXT.

Key features

What it offers

Palette sizes of 3, 5, 8 or 12 colours
HEX, RGB and HSL values for every colour
Share of the visible image for each colour
Proportional palette preview bar
Transparent pixels excluded
Copy individual colours or the whole palette
JSON, CSS variables (--palette-color-1 …) and TXT downloads
Deterministic results for the same image and settings

Best practices

Tips for best results

Use a reasonably sharp image; heavy noise or JPEG artefacts can add muddy in-between colours.
Try 5 colours for a theme and 8–12 to capture accents and details.
Check text and background combinations with a contrast checker before using them.
Crop the image first if you only want colours from one part of it.
Treat the values as screen colours (sRGB), not print or colour-managed measurements.

Benefits

Why people use it

Fast

A full palette in seconds instead of picking colours by hand.

Ready to use

Copy-ready HEX, RGB, HSL and CSS variables.

Consistent

The same image always gives the same palette.

Private

The image is analysed in your browser and never uploaded.

FAQ

Common questions

The image is sampled (up to about 250,000 pixels), similar colours are grouped with a k-means algorithm in a perceptual colour space, and each group’s average colour becomes one swatch. The share shows how many of the sampled visible pixels belong to that group.

No. Pixels that are fully or mostly transparent are skipped, so the background of a transparent PNG doesn’t add white or black to the palette.

Asking for more colours splits the image into finer groups, so some colours divide into lighter and darker versions. For the same image and size, the result is always the same.

They are accurate averages of the decoded pixels in sRGB as your browser displays them. Embedded colour profiles are handled by the browser, so results are not a substitute for professional colour-managed measurement.

Any raster format your browser can decode — typically JPG, PNG, WebP, GIF, BMP and AVIF. HEIC, TIFF and SVG are not decoded here; convert them to PNG or JPG first.

A :root block with one variable per colour, named --palette-color-1, --palette-color-2 and so on, in the current sort order.

No. The image is decoded and analysed in your browser only.

Related tools

Palette Generator

Generate harmonious color palettes from a base color.

Launch tool

Color Picker

Pick a color and read its HEX, RGB, HSL, and CMYK values instantly.

Launch tool

Contrast Checker

Check WCAG color contrast ratios for accessible text and backgrounds.

Launch tool

Private by design

This runs entirely in your browser

No file or text you enter here is uploaded. Encoding and decoding happen on your device using native browser APIs — close the tab and nothing remains on a server.

How privacy works