A color palette extractor that reads any image you give it and pulls out its most important colors as clean, copy-ready swatches. Drop in a photograph, a brand logo, a screenshot or a piece of artwork and within a fraction of a second you get a palette of dominant colors, each one shown with its hex, RGB and HSL values and the percentage of the image it represents. It is built for designers sampling a moodboard, developers who need CSS variables that match a hero image, and anyone who has ever wished they could lift the exact colors out of a picture without squinting at a pixel-by-pixel eyedropper.
Everything happens locally. Your image is decoded and analysed inside your own browser using the HTML canvas, so nothing is ever uploaded. That makes it equally suitable for a holiday snapshot and for a confidential client logo you are not allowed to share with a third-party website.
How it works
When you upload an image the tool first downscales it so the longest edge is at most 220 pixels — this keeps the analysis fast without changing which colors are present. It then samples every opaque pixel and feeds them into a k-means clustering algorithm. k-means groups pixels that are close together in color space and converges on a handful of representative centres; each centre becomes one swatch in your palette. The size of each cluster tells you what share of the image that color covers, which is shown as a percentage under every swatch.
The seeding is deterministic — the first cluster starts from a fixed pixel and each subsequent seed picks the color farthest from the ones already chosen — so the same image always yields the same palette rather than a slightly different one on every run. You can ask for anywhere between 2 and 12 colors with the slider, and the re-clustering is instant because the sampled pixels are cached. The ordering control lets you sort by dominance (largest areas first) or vibrancy (saturated accent colors first), depending on whether you want the literal makeup of the image or a punchy brand-ready scheme.
Example
Say you upload a sunset beach photo. Dominant ordering might surface a warm sand beige at 38 percent, a deep sky blue at 24 percent, and a soft cloud grey, while the fiery orange of the sun sits lower because it covers fewer pixels. Switch to vibrant ordering and that orange jumps to the front, giving you a ready accent color. Click any swatch to copy its hex, then export the set as CSS:
:root {
--color-1: #E8B97A;
--color-2: #2E6F9E;
--color-3: #F25C2A;
--color-4: #C9D4DA;
}Or grab the PNG strip to drop the labelled palette straight into a design brief. The JSON export adds RGB, HSL and the coverage weight for each color so you can wire the palette into a build step or theme generator programmatically.
Why extract colors from an image
Matching a UI to a photograph, reverse-engineering a competitor’s brand colors, building a chart palette that harmonises with a header image, or simply turning a piece of inspiration into a usable scheme — all of these start with knowing the exact colors in an image. A manual eyedropper gives you one pixel at a time and misses the overall balance; clustering gives you the representative colors and how much of the frame each one owns, which is far more useful when you are designing.
Because the whole tool is self-contained and offline-capable once loaded, you can use it on sensitive assets, batch through a folder of references quickly, and trust that the hex codes you copy are exactly what is in the file with no lossy server round-trip in between.