Colour Palette Extractor — Get Colours from an Image
Pull the dominant colours from a photo, logo or screenshot as HEX and RGB codes with CSS variables ready to copy — for brand kits and designs, processed on your device.
In short
Dominant colours are extracted by downscaling the image and clustering its pixels (k-means) into the requested number of groups; each cluster centre becomes a swatch, ordered by pixel share. Near-white backgrounds are ignored so logos return brand colours, and each colour's contrast on white shows whether it is safe for text (4.5:1).
Who this is for: Designers and developers building a brand kit or matching a site to a photo or logo.
How the palette is extracted
The image is downscaled to about 160 px, every pixel becomes a point in RGB space, and a k-means clustering pass groups them into the number of colours you asked for; each swatch is a cluster centre, ordered by how many pixels it represents. Near-white (backgrounds) is skipped by default so a logo on white does not return "white" as the main colour.
- Use it to build a brand kit from a logo, match a website to a product photo, or pick an accent colour that already exists in your hero image.
- Each colour shows its contrast ratio on white — 4.5:1 or more is safe for body text (check pairs with the WCAG contrast tool).
- The CSS block drops straight into a stylesheet or a design-system token file.
Assumptions
- Image downscaled to ≤160 px; transparent, near-white (and optionally near-black) pixels skipped; k-means with 12 iterations.
- Swatches ordered by cluster size; contrast on white from the WCAG formula.
- CSS variables named --color-1 … --color-n.
Worked example
With near-white ignored, the result is the two brand blues, the accent cyan, a dark navy for text (12:1 on white) and two mid-tones from anti-aliasing — copy the CSS and drop the anti-aliasing greys.
Frequently asked questions
Why are the colours slightly different from my brand guide?
Photos and compressed PNGs blend colours at edges, so cluster centres sit a little off the pure values. Use the logo at the largest size you have, or round to your brand HEX.
Can I get the exact colour of one pixel?
This tool gives dominant colours; for a single pixel use a browser eyedropper or a design app.
What does 'contrast on white' mean?
The WCAG contrast ratio of that colour as text on a white background — 4.5:1 passes AA for normal text.
Is the image uploaded?
No — sampling happens in your browser.
How do I get the colour codes from a logo?
Upload the logo here; the dominant colours appear as HEX and RGB with a copyable CSS block.
What is the HEX code of a colour in a photo?
Extract the palette and click the swatch nearest the colour you want to copy its HEX.
Related calculators
Found an error? Report it — tell us the inputs, the result you got, what you expected and the rule or source. Confirmed corrections are published within a week.