Color palette from image: how to pull one from a photo

To build a color palette from image colours, you look for three things: the dominant colours that fill the largest areas, a few supporting colours, and one or two small, vivid accents that give the picture its spark. Then you sample each one from an area rather than a single pixel, clean it up so it matches what you remember seeing, and check the colours work together. Done well, the palette feels like the photo even when the photo isn't there.

This guide walks through doing it by hand, what automatic tools get right and wrong, and how to turn the result into a gradient. For ready-made palettes from real scenes, see nature color palettes.

Dominant, supporting and accent colours

Every photo has a colour hierarchy. Picture a harbour at dusk: most of the frame is deep blue water and a slate sky, a band of warm terracotta rooftops runs across the middle, and a few small sodium streetlights glow orange. The water and sky are dominant, the rooftops support them, and the lights are the accent. Take away the lights and the palette loses its warmth; make them dominant and it becomes a different picture.

Write the proportions down alongside the colours. A palette is not just a list of hex codes: the same six colours used in equal amounts will look nothing like the photo. The 60-30-10 rule is a good way to record them.

How to extract colours from a photo by hand

1. 1

   Blur the photo first

   Apply a strong blur, or simply squint. Detail, texture and noise disappear and the real colour areas show. Sampling a blurred image gives you averages instead of accidents.

2. 2

   Sample areas, not pixels

   Use an eyedropper with a large sample size, such as 11 by 11 pixels, or pick three points in each area and average them.

3. 3

   Collect more than you need

   Take eight to twelve samples from different parts of the image, including the smallest bright details.

4. 4

   Group and choose

   Group similar samples, keep the clearest one from each group, and end with five to seven colours: two or three dominant, two supporting, one or two accents.

5. 5

   Correct towards memory

   Compare each swatch with the photo at normal size. If a colour looks dull or grey next to what you remember, raise its chroma a little or nudge its hue.

6. 6

   Check contrast

   Make sure at least one light and one dark colour in the palette read against each other for text. See colour contrast.

Why eyedropper picks look muddy

A photo is not made of clean colours. A blue sky is thousands of slightly different blues, shadows mix in the colour of whatever is nearby, and JPEG compression adds blocks of averaged colour. Click once and you often land on a grey-brown pixel that exists in the file but not in your memory of the scene.

Using a palette generator from an image

Automatic tools shrink the image, group similar pixels and return the largest groups. That finds dominant colours reliably. The weakness is the accent: a small orange light might cover one percent of the frame, so it never makes the list. Treat any generator's output as a first draft and add the accents back by hand.

// Most common colours in an image, grouped into coarse buckets.
// Finds dominant colours well; add small accents by hand.
async function paletteFromImage(url, count = 6) {
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = url
  await img.decode()
  const size = 64 // shrinking first averages away noise
  const canvas = new OffscreenCanvas(size, size)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)
  const { data } = ctx.getImageData(0, 0, size, size)
  const buckets = new Map()
  for (let i = 0; i < data.length; i += 4) {
    const key = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4)
    const b = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0 }
    b.r += data[i]; b.g += data[i + 1]; b.b += data[i + 2]; b.n++
    buckets.set(key, b)
  }
  const hex = (v) => Math.round(v).toString(16).padStart(2, '0')
  return [...buckets.values()]
    .sort((a, b) => b.n - a.n)
    .slice(0, count)
    .map((b) => `#${hex(b.r / b.n)}${hex(b.g / b.n)}${hex(b.b / b.n)}`)
}

Turning a photo palette into a gradient

The easiest way to make a gradient feel like a photo is to keep the colours in the order they appear in the scene. Sky above horizon above water. Leaves above fruit above soil. The gradient then carries the image's structure as well as its colours, and people sense the connection even when they can't name it.

Watch the transitions between neighbours. Two colours that sit apart in the photo, such as a warm roof and a cold sky, can meet in grey when blended directly. Put a colour that sits between them in the scene, like the pale glow above, and the blend stays clean. Muddy gradients explains the rule.

In Gradiently, Match a picture does this in one step: drop an image and it returns the palette and the closest existing Marks, or makes new Marks that feel like it. You can then design with any of them straight away.