Color Extractor
Extract a dominant colour palette from any image using a real k-means clustering algorithm — HEX, RGB and HSL for up to 12 colours, sortable by dominance or hue, with a contrast check against white and black, and one-click export.
How to Extract a Colour Palette
Features
Why K-Means, Not a Simple Colour Count
The easy way to "extract colours" from an image is to just count how often each exact pixel value appears and return the most common ones — but that approach falls apart on real photographs, where a sky that looks like one solid blue is actually hundreds of subtly different blue values, none of which repeats often enough to win a simple frequency count. This tool instead runs k-means clustering: it groups similar pixels together into however many clusters you ask for, then repeatedly recalculates each cluster's centre until the groups stop shifting. The starting points are chosen the same deterministic way every time — not randomly — so extracting the same image at the same colour count always returns the same palette, which matters if you're building a colour system you need to trust.
One Click for a Palette vs. One Pixel at a Time
This tool is built for a different job than the Color Picker. Here, you upload an image and get its whole colour story back automatically — no clicking required. The Color Picker instead lets you zoom in and sample one exact pixel precisely, which is what you want when you need one specific colour rather than a summary. Many workflows use both: extract a rough palette here first to understand an image's colour range, then switch to the Picker to nail down the one exact shade that matters most.
Reading the Palette: HEX, RGB and HSL
Every extracted colour comes with all three formats at once. HEX is what CSS, Figma, and almost every design tool expects by default. RGB is needed for canvas drawing code, WebGL, and anywhere colour channels are handled numerically. HSL is the most useful for building a scale from an extracted colour — raise or lower the lightness and you get a predictable tint or shade without shifting the hue. If you need to convert any of these extracted values into a different format entirely, or start from a code you already have, the Color Converterhandles that directly.
Choosing How Many Colours to Extract
The colour count is a design decision more than a technical one. For a primary brand palette, 3–5 colours is usually enough — primary, secondary, an accent, and a neutral or two. For understanding a photograph's overall colour story, 6–8 gives a fuller picture without becoming noisy. Push it to 12 and the clustering gets very granular — a warm white and a cool white will split into two separate entries, which is useful for precise colour matching but too fine-grained for most palette design. Once you've picked two or three colours you like, the CSS Gradient Generator can turn them straight into a gradient.
Checking Contrast Across the Whole Palette
Every row in the results shows that colour's contrast ratio against pure white and pure black, with a pass or fail mark for the WCAG 4.5:1 text-readability threshold. This is a fast way to scan a whole extracted palette and immediately see which colours are safe to use as text or icons on a light or dark surface, rather than testing each one individually somewhere else. It's a quick screening check, not a full accessibility audit — your actual background probably isn't pure white or black, so treat a pass here as a good sign, not a guarantee.
Practical Ways Designers Actually Use This
Building a CSS palette from brand photography: extract 5–6 colours from a hero photo, copy the CSS variables block directly, and you have a palette grounded in the actual imagery rather than a guess. If you want to see how the same image reads with colour removed entirely — useful for judging contrast independent of hue — run it through Grayscale first.
Matching a UI to a screenshot: designers rebuilding a layout from a reference image often need its real colour scheme, not an approximation — extracting 6 colours and sorting by hue quickly reveals whether the design leans warm, cool, or genuinely mixed.
Photographs vs. Flat Graphics
Photographs produce softer, averaged palettes because they contain thousands of close but non-identical pixel values even in areas that look flat — the returned colour is the centre of that whole cluster, not one exact pixel. Flat graphics — logos, illustrations, UI screenshots — behave differently: a solid red logo returns exactly the red that was used, with no averaging, because that colour already forms one tight, well-separated cluster. If a source image has already been through a colour filter or preset, check it with Image Filters if you're unsure whether you're extracting the original colours or a filtered version of them.
Exporting Your Palette
- Copy as CSS Variables — a ready-to-paste
:rootblock, one custom property per colour. - Copy as Tailwind Colours — a
colorsobject formatted for a Tailwind config file. - Copy as SCSS Variables — plain
$color-Ndeclarations for a Sass project. - Download as PNG — a labelled strip image showing every swatch with its HEX code and percentage, useful for sharing a palette outside of code.
When the Palette Looks Off
The colours look muddier than the image. That's expected on photographs — each swatch is the average centre of a whole cluster of similar pixels, not one exact pixel. For a single exact colour, use the Color Picker instead.
Two swatches look almost identical. This tends to happen at higher colour counts (10–12) on images with a narrow colour range, where the clustering has no choice but to split a similar area into two close groups. Lowering the count usually resolves it.
A small but visually important colour is missing. Extraction is based on pixel coverage, not visual importance — a small logo or accent element that covers only a few percent of the image may not surface as its own cluster. Increase the colour count, or use the Color Picker to sample that specific area directly.
What This Tool Won't Do
It analyses colour — it doesn't edit the image itself. It also won't guarantee a small but visually important detail becomes its own swatch, since clustering is driven by pixel area, not perceived importance. And the contrast check here is a quick two-colour comparison against pure white and black, not a full accessibility audit of a finished design.