Palette From Photo
Point it at a photo, get design tokens back.
IntermediateCommand lineDev tool6–14hAI-buildable 4/5no setupworth shipping
What you're making
Give it any image and it pulls out the main colours, then writes them out as ready-to-use CSS variables or design tokens. It also checks which pairs have enough contrast to actually use for text, so you don't build a whole theme on colours nobody can read.
Extracts a dominant palette using colour quantisation and emits it as tokens, with accessibility checks on the resulting pairs. The quantisation and the contrast maths are both real work.
UI
Logic
Useful
Hosting · Free forever
Deploys free on npm, PyPI or GitHub Releases.
Nothing to host. Publishing to a package registry is free and permanent, and anyone can run it with a single command.
Publish to npm — one command and anyone can run it.
Core features · 7
- Extracts a configurable number of dominant colours
- Orders colours by how much of the image they cover
- Outputs CSS custom properties or a token JSON file
- Reports which colour pairs pass contrast requirements
- Processes a folder of images in one run
- Uses perceptual colour distance rather than naive RGB
- Handles very large images without stalling
The interesting part
- Quantisation that finds meaningful colours instead of muddy averages
- Perceptual distance requires converting out of RGB
- Deciding which extracted colour should be text and which background
Once it works
- Suggest a full light and dark theme from one image
- Add colour-blindness simulation of the palette
- Name the colours automatically
Suggested stack
typescriptnodesharp