No upload, 100% local, no account

Extract a color palette from an image

Upload an image to extract its dominant colors. Get HEX codes for each swatch, copy with one click. Everything runs in your browser.

How Color palette extractor works

Color Palette Extractor analyses your image and identifies the most visually dominant colours using a k-means clustering algorithm run against the pixel data in a Canvas. The result is a set of colour swatches with their HEX values that you can copy individually. No image bytes leave your browser; the pixel sampling runs locally in a Web Worker so the main thread stays responsive.

The extraction groups the hundreds of thousands of individual pixel colours into a smaller number of representative clusters. The number of output colours is configurable so you can extract a tight palette of five colours or a broader set of twelve. This is useful for quickly pulling brand colours from a logo, identifying the dominant tones of a photograph for a mood board, or checking what colours appear in a user-uploaded image.

Written by Bastien Sulyan

How to use Color palette extractor, step by step

  1. Drop your image onto the upload area or click to browse.
  2. Set the number of colours you want to extract (typically 5 to 12).
  3. Click Extract. The pixel clustering runs locally in a Web Worker.
  4. View the resulting colour swatches and their HEX values.
  5. Click any swatch to copy its HEX code to the clipboard.

Common use cases

  • A designer extracts the dominant palette from a brand photograph to ensure new marketing materials match the existing colour story.
  • A developer identifies the main colours in a user-uploaded avatar to generate a matching UI accent colour dynamically.
  • An artist builds a reference mood board by extracting palettes from several reference images and comparing the extracted HEX codes.
  • A blogger pulls the five dominant tones from a header photo to choose complementary text and button colours for a post layout.

Frequently asked questions

How does the colour extraction algorithm work?

The tool reads all pixel values from the image via Canvas.getImageData(), downsamples them for speed, then runs k-means clustering. Each cluster centroid becomes one of the output colours. K-means groups pixels by colour proximity so the dominant visual tones emerge as the centroid colours.

Does extracting colours require uploading the image?

No. The pixel sampling happens inside a Web Worker in your browser. The image is read from your local disk, drawn onto an OffscreenCanvas, and the pixel array is processed in memory. The data does not leave your device.

Why do the extracted colours look slightly different from what I see in the image?

K-means centroids represent the mathematical average of a cluster of pixel colours. A colour that is very common but slightly varied (a blue sky with slight gradient variations) will produce a centroid that is the average hue rather than any exact pixel value you can point to. The result is a representative average, not a sample of a specific pixel.

Can I extract palettes from photos with transparency?

Fully transparent pixels (alpha = 0) are excluded from the clustering to avoid the transparent region biasing the extracted colours toward black or white depending on the Canvas background fill. Semi-transparent pixels are included in the sample weighted by their alpha value.

What format are the colour codes in?

The tool outputs HEX codes (such as #3A7BD5). If you need RGB, HSL or other formats, copy the HEX value into the Color Converter tool, which accepts HEX and converts to all common colour models.

Related tools

Keep everything local, explore complementary tools.

All image tools