Small Tools, No Sign-Up Required: Building Neps.in Cool Hacks

Not everything I build needs to be a full product with a login screen and a pricing page. Sometimes I just want a tool that solves one annoying problem, loads instantly, and gets out of my way. That’s the whole idea behind Neps.in — Cool Hacks: a growing collection of small, browser-based utilities for web developers, with no installs and no sign-ups. You open the page, you use the tool, you’re done.

Why bother with something this small

Anyone who’s worked with CSS for long enough knows the moment: someone hands you a chunk of stylesheet, a component, a design token file — whatever — and you just want to see every color in it at a glance instead of scanning line by line. That specific itch is what led to the first tool in the collection.

CSS Color Finder

You paste any CSS snippet in, and it pulls out every color value and shows it to you as a labeled swatch. Nothing fancier than that, which is exactly the point.

It handles more than just plain hex codes dropped in a block. It understands full selector blocks like .btn { background-color: #2196f3; color: white; }, inline custom properties like --primary: #ff0000;, bare comma-separated color lists like #FF5733, #33FF57, #3357FF, and any mix of the three in the same paste. On the color format side, it reads hex, rgb(), rgba(), hsl(), hsla(), and named colors like red or transparent.

Under the hood it’s straightforward: a small parser called parseCssTextToColorMap() walks through the CSS text line by line. Colors sitting inside a selector block get grouped under that selector’s name. Properties floating outside any selector — variables, standalone declarations — get bucketed into an “inline properties” group. Bare color values get their own “inline colors” group. Each one then renders as a card with a swatch, the property name, and the value, so you get a visual map of a stylesheet’s palette in a few seconds instead of a few minutes of squinting.

What’s on the list next

Two more tools are planned for the collection:

• A log parser and visualizer — paste in server logs and filter, group, or visualize things like errors, endpoints, and response times without spinning up a whole logging stack for a quick check.
• A JSON formatter and diff tool — for prettifying, comparing, and validating JSON payloads, which is one of those tasks that comes up constantly when you’re debugging APIs or webhooks.

The stack is deliberately boring

Everything here is pure HTML, CSS, and vanilla JavaScript — no frameworks, no build step, no dependencies to manage. For tools this size, that’s not a limitation, it’s the entire appeal. You can open index.html and understand what’s happening without wading through a bundler config first.

If you want to try the finder yourself, it’s live at neps.in/hacks, and the code is on GitHub at neps-in/cool-pro.