Color Palette

Extract a brand colour palette from any image

Upload a product photo, logo, landscape, or any reference image, and the tool extracts up to 8 dominant colours with their hex codes — ready to paste directly into CSS, Figma, Adobe XD, or Canva.

How the median-cut algorithm works

The tool uses median-cut colour quantisation — a technique developed by Paul Heckbert in 1982 that remains the standard approach for palette extraction:

1. All pixel RGB values are read from the Canvas API into a flat array
2. The algorithm finds which of the 3 colour channels (R, G, B) has the widest range across all pixels
3. Pixels are sorted along that channel and split at the median — creating two "boxes" of similar-coloured pixels
4. This recursion continues until the desired number of boxes is reached
5. The representative colour from each box (the median) becomes one palette entry

This approach produces perceptually balanced palettes: unlike simple frequency-counting (which would just return the background colour repeated), median-cut identifies the structurally distinct colour zones across the whole image.

How designers use extracted palettes

Building a brand from a product photo: Upload your hero product image and extract its 6 most dominant colours. Use the warmest as your primary CTA colour, the neutrals as backgrounds, and the darkest as your text colour — you have a cohesive brand system in under 60 seconds.

Matching website colours to packaging: Brand consistency across physical and digital touchpoints is critical. Extract colours from a photo of your packaging and use the exact hex codes on your website so both media feel unified.

Generating mood-board palettes: Designers often extract palettes from reference photos (architecture, nature, art) to seed design exploration. The hex codes can be imported directly into Figma as a local colour library.

How to use the Color Palette tool

1. Upload your image — Drop any PNG, JPEG, or WebP image.
2. Algorithm analyses pixel clusters — Median-cut reads all pixel values and identifies dominant colour zones.
3. Copy hex codes — Click any swatch to copy to clipboard in #RRGGBB format.