Free color palette generator from a photo: Palette from a place.
If it could be anyone’s, it’s no one’s. Start with a photo of your park, your main street or your front door, and leave with colors that could only be yours.
Drag a pin, or select it and use the arrow keys, to pick a different spot. Shift moves further. Click the photo to move the selected pin there.
Start with a place
Or drop one on the picture. It’s read here, in your browser, and never uploaded.
A park, in colors.
Reading the photo…
Picking a color by hand locks it. Type a hex and its pin moves to the closest match in the photo.
How it works
Bring a photo.
Your park, your town hall, your storefront at golden hour. Or start with one of ours.
Make it yours.
Drag a pin to take a color from a different spot. Lock the ones you love and reroll the rest.
Check it, then take it.
Every pair is tested against WCAG 2.2 AA. Copy it as CSS, Tailwind or JSON, or save a swatch card.
Questions
Palettes, explained.
No. Your browser reads the photo on your device and finds the colors there. It’s never sent to us or anyone else, and nothing is kept: close the tab and it’s gone. The swatch card is drawn in your browser too. You can check: open your browser’s network tools, choose a photo and watch. No request carries it.
It reads a small copy of the photo and groups similar pixels in OKLab, a color space built around how people see difference. Then it keeps a spread: something dark, something light, and the one or two strongest colors in the frame, so the accents don’t get averaged away. Colors that are nearly the same are dropped. The same photo always gives the same palette, until you reroll.
One you took, of somewhere people know: the park, the main street, the front of the building, the view from the lobby. Daylight helps. A very dark or heavily filtered photo gives a narrower palette, but you can drag the pins to the colors you want.
When a pair falls short of WCAG 2.2 AA, the tool finds the closest shade that clears it: the same hue, as much of the same saturation as a screen can show, only lighter or darker. Nothing changes until you choose to use it, and you can undo it. Your original color stays in the palette.
WCAG 2.2 Level AA. Body text needs 4.5:1 against what’s behind it (success criterion 1.4.3). Large text, 24px and up or 18.66px bold, needs 3:1. So do the parts of the interface people need to see to use it, like a button’s shape against the page (1.4.11). The ratios are never rounded up across a line.
It’s a start. A real system also needs tints, hover and focus states, a type scale and rules for when each color is used, and it should be tested on real pages with real content. That’s the work we do with clients, but the palette is yours to use either way.
Colors are the first clue.
A place already has a story. We find the rest of it: the words, the type, the pages, and a site your team can keep up.