Pull the dominant colours out of any photograph, hover to read any pixel, and copy values as HEX, RGB, HSL or ready-made CSS variables.
Drop an image to extract its colours
or click to browse · JPG, PNG, WEBP, HEIC · max 20 MB
Colours are grouped using a k-means pass over the whole image, so the palette reflects what actually dominates the photograph rather than a handful of arbitrary samples.
Copy a single swatch or the whole palette as HEX, RGB or HSL, or export the set directly as CSS custom properties ready to drop into a stylesheet.
Move the cursor across the image to read colours live, and click to copy the one under the pointer. Useful when you need a specific shade rather than a general palette.
Step by step
Drag a photograph, screenshot or design onto the box, or click to browse.
Choose between three and twelve colours. Fewer gives you the broad character of the image; more captures secondary tones.
Hover anywhere on the image to read the colour under the cursor, and click to copy it.
Click a swatch to copy it, copy the whole palette at once, export as CSS variables, or download the palette as a PNG.
FAQ
The image is downsampled and every remaining pixel is grouped using k-means clustering, which repeatedly assigns pixels to the nearest of k colour centres and moves those centres to the average of their members. The result is the set of colours that best represents the whole image.
Five or six is the usual working range for a brand or interface palette: enough for a background, a surface, text and one or two accents. Ten or more is useful for analysing a photograph rather than building a design system.
A ready-to-paste block of custom properties in a root selector, one variable per colour. Drop it into a stylesheet and reference the colours by name throughout your project.
Clustering returns the average of each group, and averaging naturally pulls towards the middle of a range. If you need the exact vivid shade you can see, hover over it and click to copy that specific pixel instead.
No. The analysis runs on your own device through the browser canvas element, so nothing is transmitted.
This tool lets you extract a colour palette from an image online, which is the fastest way to build a design around a photograph, match a brand from a logo, or capture the mood of a reference picture. Choose between three and twelve colours and the palette is generated from the whole image rather than a few sampled points.
The extraction uses k-means clustering. Pixels are grouped around colour centres, those centres move to the average of their group, and the process repeats until it settles. The practical effect is that the palette reflects what genuinely dominates the image, including colours that occupy a lot of area without being the most saturated.
Every value can be copied in the format you actually need. HEX for CSS and design tools, RGB for code that works in channels, and HSL when you want to derive lighter or more muted variants by adjusting one number. The CSS export writes the whole palette as custom properties, ready to paste into a stylesheet.
Beyond the generated palette, moving the cursor across the image reads the colour under it live, and clicking copies that exact pixel. This matters when you need one specific shade, such as the precise blue in a logo, rather than a representative set.
Everything runs locally in your browser. Continue with the text and logo studio to apply the palette to a design, the photo editor to adjust the colours in the source image, or the converter and compressor to prepare files for publishing.