Color palette from an image

Drop any photo and get its dominant colors broken down into a palette, each one with its hex and RGB code and how much of the image it covers, ready to copy individually or grab as a block of CSS variables.

  • Free
  • No sign-up
  • Runs in your browser
color-palette-from-image

How it works

Drop your photo

Any image with color in it.

Set how many colors you want

From 2 up to 10 swatches.

Copy the codes

Each swatch's hex and RGB, or the whole palette as CSS.

Turning a photo into a usable color palette

A sunset, a product photo, a piece of art — every photo is really just a huge number of individual colors, far too many to use directly in a design. This tool groups those colors down into a small, representative palette using a color quantization method called median cut: it repeatedly splits the image's colors into smaller and smaller groups by their widest range, until it's left with exactly the number of swatches you asked for, each one the average of the colors in its group.

What you get for each color

Every swatch in the result comes with its hex code and RGB value ready to copy, plus the percentage of the image's pixels it represents, so you can tell at a glance which colors are dominant and which are just a small accent.

Straight into your CSS

Beyond copying individual codes, the whole palette is also available as a block of CSS custom properties, so you can paste it straight into a stylesheet and start referencing the photo's colors by variable name.

How many colors to pick

A simple photo with one or two dominant tones might only need 3 or 4 swatches to capture it well; a busy, colorful image benefits from more, up to the 10 this tool allows. Try a couple of values and see which one actually reflects the photo.

Privacy

Your photo is analyzed entirely in your browser, pixel by pixel. Nothing is ever uploaded.

Frequently asked questions

How is the palette calculated?
With a color quantization method called median cut, which groups the image's colors by splitting them repeatedly along their widest range until it reaches the number of swatches you asked for.
Can I copy the whole palette at once?
Yes, use the CSS variables block below the swatches to copy every color as a ready-to-paste set of custom properties.
What does the percentage next to each color mean?
How much of the image's pixels that color, or colors close to it, actually cover — a rough measure of how dominant it is.
How many colors should I extract?
It depends on the photo. A simple image needs only a few; a busy, colorful one benefits from more. Try different values and compare.
Is this the same as the brand color extractor tool?
It uses the same underlying technique, but this one is aimed at any photo, while the brand color extractor is built around pulling colors from a logo or corporate image.
Is my photo uploaded anywhere?
No. Everything happens entirely in your browser.

Related tools

More utilities that also run without leaving your browser.

Compress images onlineMake photos lighter with a before-and-after view, one or many at once. Contact sheet makerTurn a batch of photos into one labeled thumbnail sheet for reviewing or sharing. Convert images between JPG, PNG, WebP and AVIFConvert between JPG, PNG, WebP and AVIF, one file or many at once. HEIC to JPG converterTurn iPhone photos into JPG or PNG that open anywhere, without uploading them. Make an image fit under an exact sizeYou set the limit and it finds the quality that meets it. Passport photo makerCrop a photo to an exact passport or ID size, with guides and a print sheet.