Home / Color palette from image

Color palette from image

Drop an image and get its main colors with HEX and RGB values. Click a color to copy its value.

Drop an image here

or tap to choose.

Choose file

Step by step

  1. Drop an image – a photo, a screenshot, a logo or a painting. The colors are calculated right away and shown next to the image.
  2. Use “Number of colors” to choose how many colors the palette has: 4, 6, 8, 10 or 12. The palette is recalculated with every change.
  3. Each swatch shows the HEX code, the RGB values and the color's share of the image. The color with the largest share always comes first.
  4. Click a single swatch to copy just that HEX code. “Copy” puts all HEX codes of the palette on the clipboard at once, separated by commas.
  5. Save the palette with “Save as CSS” for your website or with “As image (PNG)” as an overview to share or print.

What you can use it for

  • Brand colors from a logo: If a logo only exists as an image, the palette gives you color values for business cards, website and social media graphics. For exact brand colors, compare the result with the official values if there are any.
  • Consistent Instagram feed: A favorite photo becomes a palette you use to color text, frames and graphics in your posts.
  • Interiors and renovation: A photo of a room, fabric or painting shows which shades go together. The values help when comparing with paint charts – but colors look different on screen than on a wall.
  • Painting, knitting, crafts: For a painting from a photo, a knitting chart or bead work, the palette shows the main colors and their approximate share – handy for buying the right amount of material.

What for?

For a design that matches a favorite photo's mood, website colors to match a logo, wall paint to match a picture or a palette for a painting. Colors are sorted by their share of the image.

Frequently asked questions

How accurate are the colors?

They are averages of similar color areas. For single pixels use an eyedropper in an image editor.

Is my image uploaded?

No.

What is in the CSS file?

The file contains one CSS variable per color, numbered by share: --farbe-1, --farbe-2 and so on. Paste it into your stylesheet and use the colors through the variables.

What does the PNG look like?

It shows each color as a large square side by side with the HEX code below – good as a mood board or for passing on to others.

A small, striking color is missing – why?

The palette groups similar colors and takes into account how much area they cover. A small dab of color easily merges into a larger one. Increase the number of colors and it is more likely to get its own swatch.

Are transparent areas counted?

No. Mostly transparent pixels are ignored. With a cut-out subject you only get the subject's colors, not those of the empty background.

Do I get the same palette every time?

Yes. The same image with the same number of colors always gives the same result, so you can recreate a palette at any time.

HEX or RGB – which do I need?

HEX codes like #3A6EA5 are used by websites and most design programs. RGB values are needed when a program asks for red, green and blue separately. Both describe the same color.