Color Palette from Image
Drop a photo to extract its main colors, pick exact pixels, and export the palette as HEX, CSS, JSON, or a PNG strip.
Drop an image here, or
The photo is analyzed on your device and never uploaded.
Everything runs locally in your browser — your image is never uploaded.
How it works
- Drop an image onto the tool or choose a file — it is analyzed instantly on your device.
- Set how many colors you want with the slider, or enable pick mode and click the photo to add exact pixel colors.
- Click any swatch to copy its HEX code, or export the whole palette as a HEX list, CSS variables, JSON, or a PNG strip.
Frequently asked questions
- How does the color extraction work?
- The image is downscaled and its pixels are grouped with a k-means clustering algorithm that runs directly in your browser. Each cluster center becomes one palette color, so the result reflects the areas that actually dominate the photo rather than just the brightest pixels.
- Is my photo uploaded to a server?
- No. The file is read locally by your browser and never leaves your device — there is no upload, no account, and nothing is stored. This also means extraction is instant, even for large photos.
- Why do the extracted colors change when I move the slider?
- The slider sets how many clusters the algorithm builds, and the pixels regroup each time. With 3 colors you get broad averages; with 8 the clusters are tighter and subtle tones like skin, sky, or shadow hues separate out. Try a few counts and keep the one that reads best.
- Can I get the exact color of a specific spot in the image?
- Yes. Turn on pick mode and click anywhere on the preview — the exact pixel color under your cursor is added to the palette as its own swatch. This is useful when the automatic clusters average away a small but important detail, like a logo color or an accent in the background.
- What export formats are available?
- You can copy the palette as a plain HEX list, as a ready-to-paste block of CSS custom properties, or as a JSON array for design tools and scripts. You can also download a PNG palette strip with the HEX codes printed on each swatch, handy for mood boards and client decks.
About this tool
This tool turns any photo into a usable color palette without sending the file anywhere. Drop an image and it immediately extracts between 3 and 8 dominant colors, shows them as large swatches sorted from dark to light, and labels each with its HEX code. One click copies a single color; dedicated buttons export the whole set as a HEX list, CSS variables, JSON, or a rendered PNG strip you can drop into a mood board.
Under the hood the image is downscaled to a small sample grid and clustered with a k-means algorithm running in plain JavaScript in your browser. Each cluster center is the average of thousands of similar pixels, which is why the palette captures the true character of a photo instead of a handful of arbitrary pixels. Because everything is client-side, private photos, unreleased product shots, and client material stay on your device — nothing is uploaded or logged.
Beyond the automatic extraction, the tool suggests accent colors derived from the dominant hue: its complementary opposite and two analogous neighbors. These give you contrast and harmony options that are hard to spot in the photo itself, which is exactly what you need when building a brand palette, a website theme, or a presentation deck around a single hero image. Pick mode adds precision — click any spot on the preview and that exact pixel joins the palette.
A few practical tips: for interface work, extract 5 or 6 colors and use the darkest as text, the lightest as background, and a mid-tone as the primary accent. For illustration or interior design, start at 8 colors to surface subtle tones, then remove picked extras you do not need. If a photo is dominated by one large area, like sky or grass, lower the color count so the smaller subjects still earn a swatch.