Color palette from image

How it picks the colors

An eyedropper reads one pixel, and in a photo that pixel is rarely the color you see: compression, anti-aliasing and gradients all nudge it a few steps. A palette tool reads every pixel and groups them.

This one shrinks the picture so noise averages out, groups pixels that are close in color, and keeps the densest group of each distinct color. Near-duplicates are merged, so you get colors that are really in the image rather than five almost-identical blues. The percentage next to each color is how much of the picture it covers.

Using the colors

• CSS variables work in any stylesheet or token pipeline.
• Tailwind 4 goes in an @theme block. Tailwind 3 goes under theme.extend.colors in the config.
• JSON suits design tokens, Figma plugins and scripts.

Names such as blue-700 come from each color's hue and lightness, so they are a starting point. An image's colors are not a brand's colors, and a color from a photo is often a poor text color: check it with the contrast checker.

Common questions

Is my image uploaded anywhere?

No. Your browser reads the image and the colors are calculated on your device. Nothing is sent to a server and nothing is stored when you close the page.

How does it choose the colors?

It shrinks the picture, groups similar pixels and keeps the densest group of each distinct color. Near-duplicates are merged, and each color is a real color from the image, not an average of several.

Can I get the exact color of one pixel?

Yes. Click anywhere on the image and the exact color under the pointer appears under the picture, already copied.

How do I get a palette from an image on a live website?

Use the Design Toolkit extension: press Shift + C and click any image, CSS background, video frame or canvas on the page. It copies the palette for Figma or as CSS variables, Tailwind or JSON.

Read next