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.
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.
What you can change
- Colours
- Bias
- Skip near-white and near-black
- Order
- Hex list
- CSS custom properties
- JS array
How it works
- 01Drop in a photo, or open one of the samples.
- 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.
- 03Download it at full resolution. Nothing is uploaded — the work happens in this browser tab.
Sorting the swatches…
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.
What you can change
- Colours
- Bias
- Skip near-white and near-black
- Order
- Hex list
- CSS custom properties
- JS array
How it works
- 01Drop in a photo, or open one of the samples.
- 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.
- 03Download it at full resolution. Nothing is uploaded — the work happens in this browser tab.
Sorting the swatches…
Six places it makes a project click
- 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.
- 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'.
- 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.
- 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.
- 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.
- 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.
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
next →
Duotone Effect
Map the photo to two extracted palette colours.
Opennext →
Background Replace
Drop the subject onto a palette colour.
Opennext →
Color Replace
Sample a colour here, then swap it out over there.
Opennext →
Pinterest Pin Maker
Use the palette in a pin band or backdrop.
Opennext →
Social Banner
Use the palette in a banner background.
Opennext →
Halftone Effect
Recolour the photo in palette tones.
OpenThe rest of this shelf
Blur & Pixelate
Hide faces, plates, addresses — drag a patch over the spot.
OpenEXIF Stripper
Remove GPS, camera info, timestamps before posting.
OpenImage Compressor
Smaller JPG, WebP, or PNG — same look, less file.
OpenQR Code Generator
Print-ready QR for menus, invites, journals, vCards.
OpenBackground Remover
Cut the background out of any photo in one click.
OpenText Behind Subject
Drop a word behind your subject, magazine-cover style.
Open 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.