Image Color Palette Extractor

What this does

Drop in any picture — a UI mockup, a brand asset, a product photograph, a piece of stock art — and walk away with a palette that is ready to paste into your stylesheet, design tokens, or Tailwind theme. The tool clusters the visible pixels with k-means and reports each cluster as a swatch with its weight in the source image, plus four color-space readouts: HEX for design tools, RGB and HSL for legacy CSS, and OKLCH for modern color pipelines.

How to use

1. Drop an image onto the upload card, click the card to pick a file, or paste with Ctrl + V after copying an image to your clipboard.
2. Tweak the controls: pick how many colors to extract (3 to 16), sort the result by frequency, hue, or lightness, and toggle filters that drop transparent pixels or near-white pixels.
3. Click any swatch to copy its HEX value. Click a row inside the swatch to copy that specific format — RGB, HSL, or OKLCH.
4. Use Copy CSS variables for a :root { --color-1: …; } block, Copy JSON for an array of {hex, rgb, weight}, or Copy Tailwind for a theme.extend.colors.palette snippet.

About the algorithm

K-means is the simplest clustering method that still produces designer-friendly palettes. The picture is downsampled so the longest edge is 200 pixels — a 4K photograph collapses to roughly 40 000 sample pixels, which is enough for stable centroids while keeping runtime under 100 ms on a modern laptop. Each pixel is assigned to the centroid with the smallest squared-RGB distance, centroids are recomputed as the mean of their cluster, and the loop runs until centroids stop moving (or 24 iterations, whichever happens first).

Two practical refinements are layered on top: tiny clusters that drift to within ΔRGB < 6 of another are merged so the output never shows duplicate-looking swatches, and the optional pre-filters drop transparent pixels and near-white pixels (luminance > 0.95) so the algorithm focuses on the colors that carry visual weight rather than padding around the subject.

Output formats

• HEX — the universal interop format. Click the colored top of any swatch to copy.
• RGB — modern space-separated syntax (rgb(160 90 44)), compatible with every evergreen browser.
• HSL — handy when you want to nudge hue, saturation, or lightness without leaving the swatch.
• OKLCH — perceptually uniform, ideal for design tokens and color pipelines that need to mix or rotate hues without surprises.
• Weight % — the share of source pixels each centroid claimed; use the dominant entry as a brand accent and the smaller ones as supporting tones.

Privacy

The tool runs entirely client-side. The image is decoded into an HTMLImageElement, drawn onto a hidden canvas at the sampling size, and clustered in JavaScript. Nothing about the picture is sent to any server. If you would like to verify, open the network tab and watch a clean log every time you load a new image.

Related tools

• Color Palette Generator — start from a single base hex and generate complementary, analogous, triadic, or tetradic schemes.
• Color Shades Generator — pull a 9-step lightness ramp from any base color.
• Color Converter — translate between HEX, RGB, and HSL with a live preview.
• Color Contrast Checker — once you have your palette, verify each pair meets WCAG AA / AAA against the backgrounds it will sit on.