Skip to content
Tool · beta

The colors in any photo.

Drop a photo, get the colours it is actually made of. Clustering runs in OkLab, so the swatches come back perceptually distinct rather than five neighbours of the same brown. Each chip shows how much of the frame it accounts for and whether dark or light type holds up on it. For a real brand kit, grab a proper app.

Nothing uploads OkLab k-means, 3–8 colours Same photo, same palette
An example of what Color Palette produces

try it on a sample photo

Get the hex colours out of a photo

Pull three to eight colours out of a photo, each with the share of the frame it covers, and copy the hex.

A photo before Color Palette
Before
The same photo after Color Palette
After

What you can change

  • Colours
  • Bias
  • Skip near-white and near-black
  • Order
  • Hex list
  • CSS custom properties
  • JS array

How it works

  1. 01Drop in a photo, or open one of the samples.
  2. 02Set how many colours you want and slide the bias between the ones that cover the most of the frame and the ones you would name if asked. Order them by area or light → dark, and copy a hex list, CSS custom properties or a JS array.
  3. 03Download it at full resolution. Nothing is uploaded — the work happens in this browser tab.

Sorting the swatches…

◦ where a quick palette earns its keep

Six places it makes a project click

  1. 01 for designers

    A starting palette from a single reference photo

    Brand work begins with a feel, not a swatch grid. Drop a photo of the place, mood, or object that captures the feel — a kraft-paper journal, a moss-covered wall, a ceramic bowl — and the tool gives you the hex codes you'd otherwise pick by eye for an hour.

  2. 02 for collages

    Match washi tape and caption ink to a photo

    If a journal spread is going to feel cohesive, the tape, ink, and paper should pull from the photo. Drop your hero photo, get the palette, then pick the closest matches in the Washi Tape and Add Text tools. The page will read as 'curated' instead of 'pasted'.

  3. 03 for mood boards

    Five swatches per photo on a Pinterest board

    Mood-board pinners get traction by adding mini-palettes underneath their pins — five color squares with hex codes. Run each board photo through this tool, download the palette PNG, paste under the photo. Looks researched, gets repinned.

  4. 04 for instagram

    A palette caption for a feed post

    Travel and design accounts caption their photos with the palette they pulled out. Three to five hex codes is enough — readers screenshot for inspiration. Push the bias towards colourful and a grey street shot still gives you something worth posting.

  5. 05 for art

    Constraint colors for a painting study

    Limited-palette painting practice — Bob Ross style — wants 5 colors picked from a real reference. This tool does the picking. Print the palette PNG, mix to match, paint only with those mixes. The constraint sharpens the work.

  6. 06 for brand

    Find the brand colors of a competitor in one drop

    Drop a screenshot of a competitor's homepage and the dominant colors come out as hex codes. Useful for differentiation work — what NOT to look like — and for reference when their visual identity is well-resolved enough to learn from.

◦ in case you’re wondering

Frequently asked

Does the photo upload anywhere? +

No. The photo is drawn into a small canvas in your browser and the clustering runs in JavaScript on that. Your photo never touches our servers — we don't run an image pipeline at all.

How is the palette computed? +

The photo is sampled down to 260 pixels wide, every sample is converted to OkLab, and k-means with k-means++ seeding finds the colours that best explain the whole image. OkLab matters because distances in it track what an eye sees, so the swatches come back genuinely different from each other rather than three near-identical greys. The seeding is deterministic, so the same photo always gives the same palette.

Why are some palettes "five shades of beige"? +

Sometimes because the photo really is five shades of beige. More often it is because area and interest are different questions: a wall can cover half the frame while the colour you actually remember covers a corner. That is what the bias slider is for — left picks the colours that cover the most of the photo, right picks the ones you would name if asked to describe it. The largest colour stays in the palette either way.

Can I get more than 5 colors? +

Yes — up to 8 on the colours slider. Past that a palette stops reading as a palette; if you need twelve, run the photo twice at different bias settings and merge the results by hand.

How do I copy a single hex code? +

Click a chip; the label says 'copied' for a moment. The panel on the right also has the whole palette as a comma-separated list, as CSS custom properties, and as a JavaScript array, each with its own copy button. If your browser refuses clipboard access the tool says so rather than pretending it worked.

What's the downloaded PNG for? +

A 1400×680 palette card with the chips, hex codes and the share of the frame each colour accounts for, on a paper-cream ground. Ready to drop onto a Pinterest pin, an Instagram caption, a Notion page or a deck.

now what?

A few ways to put a palette to work

· Also in Privacy & utility

The rest of this shelf

31 more tools on the hub — searchable

For the real thing →

Make proper brand kits
in a proper app.

Five hex codes is a starting point. When you want a real brand system — type pairs, spacing scale, secondary palette, illustration style — a real design app handles it cleanly.