Color extractor

What it does

The Color Extractor analyses an image and returns the most visually dominant colours, ready for use in a design system, brand guide, or palette swatch. Output is a sorted list of colour swatches with hex, RGB, and HSL values, plus the percentage of the image each colour occupies.

Typical uses:

• Pulling a brand palette out of a reference photo.
• Sampling colours from a hero image to build matching CSS.
• Generating UI accents that complement a piece of artwork.
• Quickly grabbing a single colour from a logo without opening a graphics editor.

How extraction works

The image is downsampled to a manageable working size, then the pixels are quantised into a 32-level RGB cube. Counts per bucket are aggregated and the top N clusters are returned, each with its centroid colour (the mean of the pixels in that bucket).

This is intentionally faster than full k-means clustering. It produces results in milliseconds even on phone-class devices, and the centroid colours are stable across re-runs.

Palette size

You choose how many swatches to return: 3, 6, 9, or 12. The defaults:

• 3 swatches: primary brand palette starting point.
• 6 swatches: most common choice; gives a useful primary + accent + neutrals split.
• 9 or 12: for richer artwork or when you need shading variants of the same hue.

Increasing the count never changes the top results. The palette is sorted by occurrence, so the first 3 entries at "12 swatches" are the same 3 you'd get at "3 swatches".

Sampling at a single point

There is also a single-pixel eyedropper mode. Click anywhere on the image and the tool returns the exact RGBA at that point, useful for verifying a colour that the AI cluster missed (e.g. a small accent in a logo).

Output formats

For each swatch you get:

• Hex (#RRGGBB)
• RGB tuple (rgb(255, 138, 0))
• HSL tuple (hsl(32, 100%, 50%))
• Approximate weight (12.4 % of the image)

Click any value to copy it to clipboard. A "Copy all as CSS variables" button outputs a ready-to-paste :root block.

Tips

• Use the original image, not a screenshot. Re-encoded JPEGs introduce noise that splits clean brand colours into multiple slightly-different clusters.
• Crop to the brand area before extracting. If a photo contains a lot of background, the palette will be dominated by the background colour.
• For a true brand palette, extract from the official brand guide artwork rather than a re-encoded marketing screenshot.

Privacy

All analysis runs in-browser. Your image is never uploaded.

Related

• Color picker
• Image filters
• Background colour replacement