After spending countless hours tweaking colors in side projects and manually trying to match screenshots to Tailwind CSS classes, I decided to build a tool to automate it.
ColorSnap lets you upload an image and instantly extract the most dominant colors. It then maps those colors to the closest Tailwind CSS utility classes using LAB color comparison (ΔE). You get clean hex values and ready-to-use class names like bg-indigo-500 or text-pink-400.
Built with Nextjs, Tailwind CSS, and a bit of canvas/image processing. No external APIs — it runs entirely in the browser.
Outcome: I’ve used it in my last 3 frontend projects to speed up color decisions and get consistent styling fast, especially for hero sections and themed UI blocks.
kingvyn•8h ago
I made ColorSnap after getting tired of dragging images into Figma just to sample colors and then manually mapping them to Tailwind classes by eyeballing.
I wanted something faster — just drag, snap, copy.
The image analysis uses median cut to extract dominant swatches, and then I map those RGB values to Tailwind's predefined colors by converting to LAB and measuring the perceptual distance. The output is practical — actual Tailwind classes you can use in your components.
This was originally just a scratch-my-own-itch weekend project, but it turned out more useful than I expected, so I decided to polish it and share.