4 karma · joined May 20, 2025
Melvin here
I built this because I got tired of the same loop: screenshot → open image editor → zoom → eyedropper → miss the hex → repeat.
ColorSnap is my attempt to skip all of that. Just drop a screenshot and you get a clean palette — ready to plug into Tailwind, CSS, or Figma.
Under the hood it uses a custom color reduction algorithm + contrast heuristics to avoid muddy outputs.
Still improving it, and I’d love to hear how other devs might actually use this in their workflow (or what’s missing).
Thanks for checking it out
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.