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.
Ready to build your next digital solution?
Send the brief and you get a scoped response with approach, milestones and a fixed price range. Not a sales call.
A 30-minute call with the engineer who would run your project
Within 2 business daysA written scope: approach, module breakdown, milestones, fixed price range
Within 5 business daysYou decide. No retainer, no obligation, and the scope document is yours to keep either way
Your timelineSend your brief
Three fields to start. Add project details if you have them.