`I was working on a landing page late one night, trying to match a hero-section gradient to a screenshot my designer sent over.
The workflow was clunky:
- Screenshot → Figma → Eyedropper the dominant colors
- Copy hex codes into Tailwind’s docs to find the “closest” utility class by eye
- Tweak, refresh, repeat … way too many times
After the third project in a row where I did that dance, I figured there had to be a faster way.
So I opened a new repo and started tinkering.
ColorSnap began as thirty lines of JavaScript and an input type="file".
I wired up color-thief-browser to grab the top five colors from any image, converted them to LAB, and ran a ΔE distance check against every color in the Tailwind palette. When the script printed bg-indigo-500 for a random screenshot and it looked right in the browser, I knew I was onto something.
From there it snowballed: you can check it out here
- a small Next.js front end so I could drop the whole thing on Vercel
- Tailwind for the UI (because, obviously)
- a sleek gradient hero so the tool could market itself the moment you land on the page
Now I can drag a product photo or a meme into the browser and—boom—get a mini style guide:
`
Top comments (0)