Colour Palette Extractor

How to Use the Colour Palette Extractor

Add an image

Click "Choose an image" or drag a photo, screenshot, logo, or illustration onto the drop zone. JPG, PNG, GIF, and WebP all work. The image is read and processed entirely on your own device — nothing is uploaded.

Choose how many colours

Pick between 2 and 12 swatches. The tool scans the image's pixels, groups similar colours together, and surfaces the most dominant ones — filtering out near-duplicates so you get a genuinely varied palette rather than six shades of the same blue.

Copy any colour

Each swatch shows its value and roughly what share of the image it covers. Switch between HEX, RGB, and HSL with the toggle, then click any swatch to copy that value straight to your clipboard.

Export to your stack

Grab the whole palette as CSS custom properties, SCSS variables, a Tailwind colour object, or JSON — ready to paste into your stylesheet or design tokens. One click copies the lot.

How Colour Extraction Works

From Millions of Pixels to a Handful of Swatches

A single photograph can contain hundreds of thousands of distinct colours — every pixel is its own red, green, and blue value, and a modern image has millions of pixels. The job of a palette extractor is to boil all of that down to a small, useful set of representative colours: the ones a designer would point at and say "that's the palette." Doing it well is a genuine computer-science problem called colour quantization, and there are several classic approaches. This tool uses a histogram method: it groups the image's pixels into colour "buckets" by rounding each red, green, and blue channel to a coarser scale, counts how many pixels fall into each bucket, and then ranks the buckets by population. The most populated buckets are, by definition, the colours that appear most across the image — the dominant palette. To keep the result useful it also averages the true pixel values inside each bucket (so you get the real colour, not the rounded one) and applies a distinctness filter that skips any candidate too close to a colour already chosen, which is what stops a palette from coming back as six nearly identical shades of sky.

The percentage shown on each swatch is the share of the sampled image that colour represents, which is often as useful as the colour itself: it tells you which is the true background, which is the accent, and which is a minor detail. For speed, the tool samples a scaled-down copy of your image rather than every full-resolution pixel — a 160-pixel version carries essentially the same colour distribution as the original but processes instantly, even for large photos. This is the same trade-off that image thumbnails rely on, and for palette purposes the difference is imperceptible.

"A good palette extractor does not just find colours — it finds the right colours: dominant, distinct, and in the proportions that actually shape how an image feels."

Where Palettes Get Used

Extracted palettes turn up everywhere in design and front-end work. A brand designer pulls colours from a mood-board photo to anchor a visual identity. A developer matches a UI to a hero image so buttons and accents feel like they belong. Data-visualisation authors sample a palette to keep a chart on-brand. Even non-designers use it to answer the everyday question "what's the exact colour of that thing in this picture?" — for which a clickable HEX swatch is far faster than fiddling with an eyedropper in heavyweight image software. Because this tool exports directly to CSS variables, SCSS, Tailwind, and JSON, the palette goes straight from image to code with no retyping of hex codes. And because everything runs locally in your browser, you can extract colours from confidential mock-ups, unreleased product shots, or client work without uploading a single byte to a third-party server — a small but real consideration when the image itself is the sensitive asset.

10 Facts About Colour & Palettes

01

A 24-bit image can hold 16.7 million distinct colours — 256 each of red, green, blue.

02

Reducing those millions to a few swatches is a real algorithm called colour quantization.

03

HEX and RGB describe the same colour — #ff0000 is just rgb(255,0,0).

04

HSL (hue, saturation, lightness) is often easier for humans to reason about than RGB.

05

The human eye is most sensitive to green — which is why luminance weights it highest.

06

This tool samples a scaled copy of your image — the colour mix barely changes, but it's instant.

07

A distinctness filter stops the palette from returning near-identical shades.

08

The percentage on each swatch is that colour's share of the image.

09

Transparent pixels are ignored, so a logo on a clear background extracts cleanly.

10

Everything runs in your browser — your image is never uploaded anywhere.

Frequently Asked Questions

Upload or drag in your image and the tool instantly shows its dominant colours as swatches. Each swatch displays its HEX value, and clicking it copies that value to your clipboard. You can switch the display to RGB or HSL with the toggle, and export the whole set as CSS, SCSS, Tailwind, or JSON.
The tool groups the image's pixels into colour buckets, counts how many pixels fall into each, and ranks them by population — so the colours that cover the most of the image come first. It then averages the real pixel values in each bucket for an accurate swatch and skips any colour too similar to one already chosen, so you get a varied palette rather than several near-identical shades.
No. The image is read and analysed entirely in your browser using an HTML canvas — it is never uploaded, stored, or sent anywhere. This means you can safely pull colours from confidential designs, unreleased product shots, or client work. You can even use the tool offline once the page has loaded.
It is the share of the sampled image that the colour represents. A swatch at 60% is the dominant colour — often the background — while one at 5% is a small accent or detail. The percentages help you understand the role each colour plays, not just its value, which is useful when deciding which should be your primary, secondary, or accent colour.
Yes. After extraction, choose CSS custom properties, SCSS variables, a Tailwind colour object, or JSON, and copy the result with one click. The CSS option gives you ready-to-use --color-1 through --color-n variables; Tailwind gives a colors object you can drop into your config. No retyping hex codes by hand.
Anything your browser can display: JPG, PNG, GIF, WebP, and usually AVIF and SVG. Transparent areas in PNGs and GIFs are ignored, so a logo on a clear background gives you just its real colours rather than picking up the checkerboard or white fill behind it.
For a brand or UI palette, five or six is usually the sweet spot — enough for a primary, a secondary, an accent, and a couple of neutrals. Increase the count if an image is very colourful and you want to capture more nuance, or drop to two or three if you just want the headline colours. You can change the number any time and the palette updates.
Each swatch is the average of a group of similar pixels, so it represents a region of colour rather than one exact pixel. This gives a more honest "dominant" colour than picking a single pixel, which might be an outlier. If you need the exact value of one specific spot, an eyedropper tool is better; for a representative palette, averaging is the right approach.
Yes. It works on any raster image — photos, screenshots, UI mock-ups, illustrations, and logos. Flat graphics with a few solid colours extract especially cleanly because their pixels cluster tightly, so the palette closely matches the design's actual swatches.
Completely free, with no account, sign-up, or usage limit. It runs entirely in your browser and collects no data. Extract palettes from as many images as you like.

Related News

You may be interested in these recent stories from our newsroom.

View all news →