Skip to main content

Image Color Palette Generator

Pull an 8-colour palette out of a photo or artwork and export it as HEX codes, a JSON file or CSS custom properties.

Upload Image to Generate Palette

Drag and drop files here, or click to browse

Your images are processed in your browser and are not uploaded to Image York.
You retain full ownership of your images. Image York does not store or claim rights. View License

How the palette is built

The tool uses the open-source Color Thief library. It samples pixels across the image and groups similar colours together, then reports a representative colour for each of the eight largest groups. The result reflects how much of the picture each colour covers, not how eye-catching it is, so a small red flower on a large green field may not make the list.

Because pixels are sampled rather than every one being counted, very small details can be skipped. Running it twice on the same image gives the same result.

Exports

  • Copy any swatch's HEX code with a click.
  • JSON downloads palette.json containing { "palette": ["#...", ...] }, handy for scripts and design tokens.
  • CSS downloads palette.css with lines like --color-1: #2E4A62;. Paste them inside a :root { } block to use them as custom properties.

Making a palette usable

An extracted palette is a starting point. Before using it for text or buttons, check contrast: colours that look distinct in a photo can be too close in lightness for readable text. A common approach is to pick one dark colour for text, one light colour for backgrounds, and use the stronger colours for accents. For a single exact colour from a specific spot, use the Image Color Picker.

Where the processing happens

The palette is computed in your browser from the local image. Nothing is uploaded.

Questions about this tool

I want colours for my website that match a photo. How do I get them?

Open the photo and the tool shows the 8 main colours as swatches. Click a swatch to copy its HEX code, or download them all as CSS variables to paste into your stylesheet.

A bright colour in my photo is missing from the palette. Why?

The palette is based on how much of the picture each colour covers. A small red flower on a large green field may not take up enough space to make the list. Use the Image Color Picker to grab that exact colour.

How do I use the downloaded CSS file?

Open palette.css, copy the lines such as --color-1: #2E4A62; and paste them inside a :root { } block. You can then use var(--color-1) anywhere in your CSS.

Can I use these colours for text?

Check the contrast first. Colours that look different in a photo can be too close in lightness for readable text. A dark colour on a light one usually works best.

Will I get the same palette if I run it again?

Yes. The same image always gives the same palette.