Extract a color palette from an image

What is a color palette?

A color palette is the small set of tones that defines how an image or a brand looks. Extracting the palette from a photo lets you reuse exactly those colors in a design, website, presentation or room makeover, for a consistent, harmonious result.

Designers, web developers, content creators and anyone who wants to combine colors with confidence use tools like this every day: to build a project's identity from an inspiring photo, to match a website to a logo's colors, or simply to find out the code of a specific color.

How to extract colors from an image

1. Add the image by dragging it onto the area above, choosing it or pasting it with Ctrl+V.
2. Check the palette: the dominant colors appear, sorted by how much of the image they cover.
3. Adjust the number of colors with the slider, between 3 and 12.
4. Click a color to copy its HEX code. You can also copy the whole palette, copy it as CSS variables or download it as a PNG image.
5. Use the eyedropper: click anywhere on the image to get the exact color of that pixel.

How the colors are calculated

Pasafoto analyzes the image's pixels and applies the median cut algorithm, the same idea many editing programs use to reduce colors. It groups similar tones and averages each group, so the palette reflects the colors actually present in the photo and how much of it each one covers. Transparent areas are ignored, so it works well with PNG logos.

HEX, RGB and CSS

• HEX (#1E40AF): the most widely used format in web design and in tools like Figma or Canva.
• RGB (rgb(30, 64, 175)): the amount of red, green and blue from 0 to 255.
• CSS variables: the “Copy CSS” button generates a :root block ready to paste into your stylesheet.

Private and free

The image is analyzed in your browser and never uploaded to a server. You can use it with confidential designs, personal photos or client material with total peace of mind.

Ideas for using your palette

A classic design rule is 60-30-10: a dominant color for 60% of the surface (backgrounds), a secondary one for 30% (blocks, cards) and an accent for 10% (buttons, links). Extract 5 or 6 colors from a photo that inspires you and assign the roles that way. Also check the contrast between text and background so it stays readable: very light colors work as backgrounds and dark ones as text. If you're working from a logo, extract just 3 or 4 colors to get the brand's exact colors.