Tada File

Image Palette Generator

Extract the main colors of an image as a palette, and copy them as HEX codes, CSS variables or JSON.

Image Palette Generator finds the dominant colors in a photo or design and shows them as swatches. You can choose 3, 4, 5, 6 or 8 colors; they are ordered from the color that covers the most area, and very similar shades are merged so each swatch is distinct. Copy the palette as CSS variables or a JSON array, or download it as a PNG swatch sheet.

How to use Image Palette Generator

  1. 1

    Open an image

    Drop, choose or paste a photo, illustration, logo or screenshot.

  2. 2

    Choose the number of colors

    Click 3, 4, 5, 6 or 8. The swatches update immediately.

  3. 3

    Copy single colors

    Click the copy icon on a swatch to copy its HEX code.

  4. 4

    Export the palette

    Use Copy CSS or Copy JSON, or download the palette as a PNG swatch sheet.

What it does

Ordered by coverage
The first swatch is the color that covers the largest part of the image.
Distinct shades
Colors that are nearly identical are merged, so the palette does not repeat the same tone.
Ready for developers
Export as CSS custom properties (--color-1, --color-2 and so on) or as a JSON array of HEX codes.
PNG swatch sheet
Download an image of the palette with each HEX code written under its swatch.

Questions

How are the palette colors chosen?

The image is sampled at a small size, similar colors are grouped together, and the groups that cover the most area are shown first. Transparent pixels are ignored.

Why do I get fewer colors than I selected?

Shades that are very close to each other are merged so every swatch is clearly different. An image with only a few distinct colors may return fewer swatches.

How do I use the palette in CSS?

Click Copy CSS to get a :root block with variables named --color-1, --color-2 and so on, then paste it into your stylesheet.

Why is a small accent color missing?

The palette favors colors that cover a larger area, so a tiny detail such as a small logo may not appear. Use Image Color Picker to get the exact value of a specific spot.