Color Palette Extractor

About Color Palette Extractor

The Color Palette Extractor reads a picture and lists its dominant colors as swatches with HEX and rgb() codes and the share of the image each covers. Designers use it to build a color scheme from a photo, a painting or a product shot. One button exports the result as CSS custom properties.

How to use it

1. Press Select image file and choose a JPEG, PNG, WebP, GIF or BMP picture.
2. Confirm the preview, then press Extract Colors.
3. Read the swatches, ranked from most to least common, with the percentage shown on each card.
4. Click a HEX or RGB value to copy it, or press Copy as CSS Variables to copy a ready-made :root block.

CSS export format

A palette whose top two colors are #1E3A5F and #F4A261

:root {
  --color-1: #1E3A5F;
  --color-2: #F4A261;
}

When to use it

• Deriving a website color scheme from a hero photograph.
• Finding the main brand colors in a logo file when no style guide exists.
• Choosing matching accent shades for a presentation based on a cover image.
• Checking whether a product photo's dominant colors clash with a page background.

Questions about Color Palette Extractor

How does it find the dominant colors?

It shrinks the image to a 150 by 150 grid, samples every fourth pixel, and groups them into eight clusters with k-means over five rounds. The center of each cluster becomes a swatch, so results are averages, not exact pixels.

Why do I get fewer than eight colors?

A cluster that rounds to zero percent of the image is dropped, so flat or few-color graphics may return five or six swatches. Percentages are rounded and can add up to slightly more or less than 100.

How are transparent pixels treated?

Pixels that are more than half transparent are skipped, so the empty background of a cut-out PNG does not show up as a black swatch.

Will the same image always give the same palette?

Almost always. Starting points are spread evenly through the pixel list rather than picked randomly. A random restart happens only if a cluster ends up empty, so a rare difference is possible.

Related tools

• Color PickerPick colors from images and get color codes
• PNG to JPGEasily convert PNG images to JPG with this easy-to-use converter.
• PNG to BMPEasily convert PNG images to BMP with this easy-to-use converter.
• PNG to ICOEasily convert PNG images to ICO with this easy-to-use converter.
• PNG to GIFEasily convert PNG images to GIF with this easy-to-use converter.
• PNG to WEBPEasily convert PNG images to WEBP with this easy-to-use converter.