I built ColorSnap: Instantly extract Tailwind CSS color palettes from any image

melvin Joseph — Wed, 21 May 2025 16:35:33 +0000

`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:

DEV Community: melvin Joseph

I built ColorSnap: Instantly extract Tailwind CSS color palettes from any image