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

[Canonical HTML page](https://gradiently.design/guide/color-palette-from-image)

An eyedropper gives you a pixel. A palette needs the colours you remember from the picture, in the right proportions. Here is how to get from one to the other.

## The short version

- A good color palette from an image has three kinds of colour: dominant colours from the largest areas, supporting colours, and one or two small, vivid accents.
- Single eyedropper picks often look muddy because photos are full of shadow, noise and compression, so sample several areas and average them.
- Colours you remember from a photo are usually cleaner and more saturated than the pixels, so lifting chroma slightly makes a palette feel true.
- Automatic extractors find dominant colours well but tend to miss small accents, which you should add back by hand.
- To turn a photo palette into a gradient, keep the colours in the order they appear in the scene, such as sky above water above shore.

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](https://gradiently.design/guide/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.

- Harbour water: #1d2a44
- Slate sky: #3e5c86
- Mist: #8a9bb5
- Terracotta roofs: #b8674e
- Sodium light: #f2a65a
- Last glow: #f6dcc0

A palette from a harbour at dusk. Two dominant blues, a pale mist, a supporting terracotta, and two warm accents that should stay small.

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](https://gradiently.design/guide/60-30-10-rule) is a good way to record them.

## How to extract colours from a photo by hand

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. **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. **Collect more than you need** Take eight to twelve samples from different parts of the image, including the smallest bright details.
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. **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. **Check contrast** Make sure at least one light and one dark colour in the palette read against each other for text. See [colour contrast](https://gradiently.design/guide/color-contrast-accessibility).

## 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.

### Muddy picks

- One click on a single pixel
- Sampling from shadows and edges between objects
- Picking from a small, compressed image
- Keeping every colour exactly as sampled

### Clean picks

- An averaged sample from a blurred copy
- Sampling from the middle of lit, flat areas
- Using the largest, least compressed version you have
- Adjusting each colour towards what you remember seeing

- Single-pixel picks: grey olive: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Averaged and corrected picks: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Two blends from the same harbour photo. Raw pixel picks from the edge between sky and roofs drift into grey; clean picks, joined through the mist and the glow, keep their blue and orange.

## 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.

```js
// 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)}`)
}
```

A minimal extractor in the browser. The image must be on the same site or allow cross-origin use, or the canvas will refuse to read it.

## 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.

- Harbour at dusk: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Lemon grove: `linear-gradient(180deg, #fdf3c4 0%, #f4d03f 35%, #6f8f3a 70%, #2f4a2a 100%)`
- Desert morning: `linear-gradient(180deg, #f7d9c4 0%, #e8a87c 40%, #c1666b 75%, #4a2c3a 100%)`
- Glacier lake: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Four gradients built from photo palettes, each keeping its colours in scene order from top to bottom.

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](https://gradiently.design/guide/muddy-gradients) explains the rule.

In Gradiently, [Match a picture](/forge/match) 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.

## FAQ

### How do I get a color palette from an image?

Blur the image, sample the largest colour areas plus one or two small vivid accents, average each sample over several pixels, and adjust the colours towards what you remember seeing.

### How many colours should a palette from a photo have?

Five to seven usually capture a photo: two or three dominant colours, two supporting colours and one or two accents.

### Why do the colours I pick from a photo look dull?

Single pixels often come from shadows, edges or compression artefacts. Sample averaged areas from lit, flat parts of the image and raise the chroma slightly if a colour still looks grey.

### Why does my palette generator miss the brightest colour?

Generators rank colours by how much of the image they cover, so small accents rarely make the list. Add them back by hand.