Color Palette from Image

How a palette is pulled from a photo

An image can contain tens of thousands of distinct colors, so "the main colors" has to be defined mathematically. This tool uses k-means clustering, a classic algorithm for grouping data into a chosen number of clusters. Each pixel is treated as a point in three-dimensional RGB space — its red, green, and blue values are its coordinates. The algorithm picks a number of starting centers (one per swatch you asked for), assigns every pixel to its nearest center by straight-line distance in that color space, then moves each center to the average position of the pixels assigned to it. It repeats this assign-and-recenter loop until the centers stop moving meaningfully. The final center positions are your palette: each one is the representative average color of a cluster of similar pixels.

To stay fast in the browser, the tool samples roughly 2,000 pixels rather than analyzing every one, and skips nearly transparent pixels so a logo's empty background doesn't pollute the result. The slider lets you request between 5 and 12 colors; more clusters split the image into finer color regions.

What the swatches give you

Each extracted color is shown as a swatch with its hex code and the name of the nearest standard CSS color (computed by finding the smallest RGB distance to a built-in list of named colors). Click any swatch to copy its hex. The named color is an approximation for quick reference — a swatch labeled "steelblue" is the closest CSS keyword, not necessarily an exact match.

Reading the harmony and contrast panels

Two analyses turn the raw colors into design guidance. The harmony panel converts each color to HSL and inspects the hue angles (0–360° around the color wheel) to detect relationships:

• Complementary — two hues roughly 180° apart (opposite on the wheel), the high-contrast pairing behind many bold designs.
• Analogous — several colors within about 30° of each other, which look calm and cohesive.
• Triadic — three hues spaced near 120° apart, a balanced, vibrant scheme.

The contrast panel computes the WCAG contrast ratio between every pair of colors. This uses the official formula: convert each color to relative luminance (a gamma-corrected weighted sum, 0.2126·R + 0.7152·G + 0.0722·B), then take (lighter + 0.05) / (darker + 0.05). A pair is flagged AA at 4.5:1 (the minimum for normal body text), AA-LG at 3:1 (large or bold text), and AAA at 7:1 (the strictest level). This tells you at a glance which two palette colors are safe to use as text-on-background.

A practical workflow

1. Drop in a hero photo, product shot, or moodboard image.
2. Start with 5–6 colors for a tight brand palette; raise the count if the image is colorful and you want accent shades.
3. Check the contrast panel to pick a text/background pair that hits at least AA before committing to it.
4. Export in the format you need and paste it straight into your project.

Export formats

Tips and limitations

• Results vary slightly between runs. Because clustering starts from sampled seed points, re-extracting the same image can shift a swatch a little — that is normal for k-means, not a bug.
• Busy images need more colors. A sunset with smooth gradients may collapse into a few averaged tones; request more clusters to capture the range.
• Transparency is respected. PNGs with alpha won't drag a white or black background into the palette.
• The averaged color can look muddy. A cluster spanning a wide hue range averages toward gray; that signals the image lacks one dominant color there, so consider raising the count.

Privacy

Your image is decoded onto a canvas and analyzed entirely in your browser — it is never uploaded. Closing the tab discards everything, so even unreleased artwork or private photos stay on your own device.