Features
Color extractor
Extract a usable palette from any image — hex / RGB / HSL swatches sorted by visual dominance, plus a single-pixel eyedropper.
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 PDF (use the PDF background remover to clean the page first if needed).
Privacy
All analysis runs in-browser. Your image is never uploaded.