Boneyard Tools

Extract a Color Palette From an Image

Pull the dominant colors out of any image and turn them into a usable palette. The tool samples the photo and groups its colors with median-cut quantization, then ranks them by how much of the image they cover. Copy any hex code, export the whole palette as CSS custom properties, and choose how many colors you want. Everything runs in your browser, so the image never leaves your device.

How to extract a color palette

  1. Drop an image in, or click to browse.
  2. Choose how many colors you want in the palette.
  3. Click any swatch to copy its hex, or copy the whole palette as CSS.

Examples

Build a brand palette from a photo

A landscape photo, 6 colors
Six ranked hex codes with the share of the image each covers

Frequently asked questions

Is my image uploaded anywhere?

No. The image is sampled and analyzed entirely in your browser. It never leaves your device, so private images stay private.

How are the colors chosen?

The tool uses median-cut quantization: it samples the image, repeatedly splits the widest spread of colors, and averages each group. Colors are then ranked by how many pixels they represent.

Why might I get fewer colors than I asked for?

If an image only contains a handful of distinct colors (for example a simple logo), the tool returns just those rather than inventing extras.

Can I export the palette?

Yes. Click any swatch to copy its hex code, or use Copy CSS to get the whole palette as :root custom properties ready to paste into a stylesheet.

Will it match the colors exactly?

Each swatch is the average of a cluster of similar pixels, so it represents a region of the image rather than one exact pixel. For an exact pixel color, use the image color picker.

Related tools