Palette From Image

How color extraction works

A photo can contain hundreds of thousands of distinct colors, but the eye reads it as a handful of masses: sky, skin, foliage, shadow. Extraction tries to find those masses. This tool shrinks your image to roughly 120 pixels on its longest side (enough to keep the color story, small enough to be instant), throws away transparent pixels, and then runs k-means clustering over what remains.

K-means starts with a few seed colors, assigns every pixel to its nearest seed, moves each seed to the average of the pixels it won, and repeats until nothing moves. The seeds are picked with the k-means++ method, which spreads them out so a small but vivid accent is not swallowed by a big neutral area. A fixed random seed means the same photo always produces the same palette, which matters when you are documenting a brand.

Picking a good source image

• Crop first. If the client's logo sits on a white studio background, that white will win a big slice of the palette. Crop to the part that carries the mood.
• Watch compression. Heavily compressed JPEGs add muddy in-between colors at edges. A PNG or a high quality export gives cleaner clusters.
• Raise the count for accents. At five colors a small red sign in a street scene usually merges into a brown. At nine or ten it gets its own swatch.

Turning a photo palette into a usable UI palette

Raw extracted colors are a starting point, not a design system. Photographic colors tend to sit in the middle of the lightness range, which is exactly where text contrast fails. A practical workflow:

1. Sort by Coverage and pick the one or two colors that define the image. These become brand or accent candidates.
2. Sort by Lightness to find your darkest and lightest swatches. Those are your text and surface candidates.
3. Feed the accent into the Tailwind Shade Generator to get a full 50 to 950 scale, so you have hover, border and background tints that still feel like the photo.
4. Check every text and background pair with the Contrast Checker before it ships.

Using the exports

The CSS export gives you custom properties you can drop straight into a stylesheet. Rename the prefix to something meaningful (hero, autumn, brand) before you copy.

:root {
  --hero-1: #1d2b4f;
  --hero-2: #f0844c;
}
.cta { background: var(--hero-2); color: var(--hero-1); }

The Tailwind export is an extend.colors block, so it adds to the default palette instead of replacing it. Classes come out as bg-hero-1, text-hero-2 and so on. The JSON export includes each color's share of the image, handy for design tokens pipelines or for weighting a generated gradient.

Frequently asked questions