How to Create a Color Palette from an Image — Free (2026)

You can generate a design-ready colour palette from any image for free using brevio Color Palette from Image. The tool extracts up to 8 perceptually distinct colours and exports them as CSS custom properties — entirely in your browser.

How to Create a Colour Palette from an Image

1. Open brevio Color Palette from Image. No account or sign-up needed.
2. Drop your image or click to choose a file. Any JPG, PNG, or WebP image works. The file never leaves your browser.
3. Review the colour swatches. The tool returns up to 8 dominant colours, deduplicated so similar shades are merged rather than repeated.
4. Click any swatch to copy its hex code, or click "Copy CSS" to copy all colours as CSS custom properties (--color-1 through --color-8).

How deduplication works

Unlike a simple frequency-count approach, this tool calculates the Euclidean distance between each candidate colour and all already-selected colours in RGB space. A new colour is only added to the palette if it is at least 40 units away from every existing entry (distance threshold on a 0–255 scale per channel). This prevents the palette from being dominated by near-identical shades of the same hue — a common problem with photographs that have large areas of subtly varying colour.

Image types that produce the best palettes

• Photography: Landscape and lifestyle photos produce rich, harmonious palettes with natural colour relationships.
• Illustrations and graphic design: Flat-colour images produce very accurate palettes because there is little colour variation within each region.
• Brand assets: Screenshots of competitor websites or marketing materials reveal their exact colour system.
• Art and paintings: Works by painters with a distinctive palette (Matisse, Rothko) make excellent design references.

Using the CSS output

The exported CSS block defines custom properties in :root, making them available globally across your stylesheet. You can use them immediately:

:root {
  --color-1: #3a5a8c;
  --color-2: #f2c14e;
  /* ... */
}

.hero {
  background-color: var(--color-1);
  color: var(--color-2);
}

Rename the variables to semantic names (--brand-primary, --accent) after copying for easier maintenance.

Frequently Asked Questions

Why does the palette sometimes have fewer than 8 colours?

The deduplication threshold removes colours that are too similar to already-selected ones. If the image has a narrow tonal range — for example, a monochrome photograph or a design with only 3–4 distinct hues — the algorithm may not find 8 colours that are far enough apart to all qualify.

Can I adjust the number of palette colours?

The tool generates up to 8 colours automatically. For more control — choosing exactly 5 colours, or specifying a fixed palette size — use a dedicated tool like Adobe Color, Coolors, or Colormind, which offer palette generation with manual refinement.

Does the palette include black and white?

Yes, if the image contains significant areas of near-black or near-white, those tones will appear in the palette. For a palette that excludes neutrals, use an image with saturated colours and minimal white or black regions.

Is my image uploaded anywhere?

No. All processing uses the HTML Canvas API in your browser. The image data never leaves your device.