Color Palette Extractor

K-Means clustering is a machine learning algorithm that groups pixels into K color clusters. It starts by picking K random centroids (initial color guesses), assigns each pixel to its nearest centroid, then recalculates each centroid as the average of all its assigned pixels. This repeats until centroids stabilize. We use K-Means++ initialization to pick more diverse starting points, improving color coverage and reducing the chance of getting duplicate clusters.

The percentage represents that color's coverage across the image — how much of the image's total pixels belong to that color cluster. A 40% value means roughly 40% of the image's non-transparent pixels are closest to that color. These percentages are re-normalized after merging very similar colors, so they always sum to 100%.

The CSS export generates a :root block with custom properties like --color-1,--color-2, etc. Paste this into your global CSS file and reference the variables anywhere in your stylesheet withvar(--color-1). This is the fastest way to use extracted colors in a web project without manually copying hex values.

Not the file you upload. Your image is read as a data URL, rendered onto an off-screen canvas and analysed locally — it never leaves your device, and working from files the tool keeps going with no network at all. The one exception is the URL field: a browser is not allowed to read the pixels of an image hosted on another site, so that address is fetched through our server and handed to the page. The image itself is not stored anywhere.

Extracted colors reflect the actual image content, not necessarily a harmonious color theory scheme. For branding work, use the dominant colors as inspiration — take the 1–2 most prominent colors and use the Color Converter tool to explore complementary, analogous, or triadic relationships. The extracted percentages help identify which colors are primary (brand colors) vs secondary (accent colors) vs neutral (backgrounds).

Photos with rich color diversity (nature, food, travel photography) produce the most interesting palettes. Logos and brand imagery tend to produce clean, focused palettes with 2–4 dominant colors. Screenshots work well for extracting a website's color scheme. Heavily compressed JPEG images may introduce artifacts that slightly affect color accuracy. For best results, use PNG or high-quality JPEG images.

The JSON export is an array of objects with hex,rgb, andcoverage fields. This format works directly as design tokens in tools like Style Dictionary, Theo, or Cobalt. Import it into Figma via the Design Tokens plugin, or use it in JavaScript/TypeScript to programmatically apply colors to generated UI components.