Extract a color palette from an image

A good photo often contains a ready-made color scheme. Designers use one picture as the starting point for a website theme, a presentation, a poster or a product page, so the graphics feel connected to the photography. This tool pulls those colors out for you and tells you how much of the image each one covers.

The analysis runs in your browser, and your image is not uploaded.

How to use it

1. Choose an image.
2. Set the number of colors with the slider, from 4 to 10 (6 by default). The palette updates instantly when you change it.
3. Look through the swatches, sorted by their share of the image in percent, each with its HEX and RGB value and a copy button.
4. Copy the whole palette as CSS variables, a JSON array or a comma-separated list.
5. Download the palette as a PNG card if you want to share it or keep it with your project files.

How the colors are found

The tool makes a small copy of your image and groups its pixels with a method called k-means clustering. It sorts all pixels into as many groups as the colors you asked for, so that pixels in the same group are as similar as possible. Each swatch is the average color of one group, and its percentage is the share of pixels in that group.

This explains a few things you may notice:

• Small accents can disappear. A red umbrella in a gray street covers only a small share of the pixels, so with 4 colors it may be merged into a neighboring group. Raise the count to 8 or 10 and it often appears.
• Colors can look slightly muted. An average of similar pixels is calmer than the most vivid pixel in the area. If you need the exact shade of a specific spot, click it with the color picker.
• Large photos work quickly. Because the work is done on a reduced copy, a high-resolution photo takes about as long as a small one, and the palette represents the whole picture.

Turning a palette into a color scheme

The share percentages are useful for deciding what goes where. Colors with a large share, often neutrals like beige, gray or sky blue, make calm backgrounds. Colors with a small share but strong saturation make good accents for buttons, links and highlights. A common guideline is to give roughly 60% of a layout to a main color, 30% to a secondary color and 10% to an accent.

Check that text stays readable. Web accessibility guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal body text, which many mid-tone palette colors do not reach against white. Use the darkest or lightest swatch for text, or darken a color before using it for small type.

A palette also helps with collages: a background taken from the photos ties everything together in the photo collage maker.