Design Match
Paste a screenshot of a page or app you like, and we'll pull out its color palette — entirely in your browser — then hand you five ready-made widgets styled to match: a card, a button, a badge, a banner, and a progress bar.
Extracted Palette — click any swatch to fine-tune it
Style
Widgets — copy any one straight into a "+ JavaScript Window"
Design Match reads the pixel data of whatever screenshot you drop in — entirely with the browser's own Canvas API, with nothing uploaded anywhere — clusters the most common colors into a palette, and sorts them by how much of the image they cover. That palette then drives five pre-built widget templates (card, button, badge, banner, progress bar), each one restyled live to use your extracted colors instead of its own defaults, so you can see immediately whether the palette actually works as a UI color scheme before committing to it.
- Drop in a screenshot — drag a file, paste from your clipboard, or click to choose one.
- Review the extracted palette — each swatch shows its hex code and can be fine-tuned with the color picker.
- Preview the five widgets — card, button, badge, banner, and progress bar all restyle live to match.
- Copy the one you want — each widget's "Copy Code" button gives you a ready-to-paste "+ JavaScript Window" snippet.
- Or open everything at once — "Open All in Builder" drops all five widgets into a new Builder page in one step.
Who it's for
Anyone matching a widget's look to an existing brand, app, or screenshot — paste in the reference image instead of eyeballing hex codes by hand.
Five starting points
A card, button, badge, banner, and progress bar all share the same extracted palette — enough variety to see the colors working across real UI shapes, not just as swatches.
No install, no upload
Color extraction runs on the Canvas API in your own browser tab. The screenshot you paste in is never sent anywhere — it only ever exists on your device.