As a frontend dev, I constantly need to grab exact HEX or RGB codes from design mockups, inspiration images, or competitor screenshots. But every time I Google "online color picker", I run into the same three massive headaches:
Privacy nightmare: I am forced to upload unreleased UI designs or screenshots containing sensitive data to some random server.
Terrible UX for large images: When I drop a massive full-page scrolling screenshot into these tools, the image takes up the whole screen. I click a pixel, and then I have to scroll all the way back to the top of the page just to copy the hex code. It's infuriating.
Blurry crops: If I want to crop an icon from the screenshot, the tool usually crops the CSS-scaled preview, resulting in a blurry, pixelated mess.
The Solution 🛠️
I decided to stop complaining and just build my own "scratch your own itch" tool. I wanted something that felt like a native desktop app but lived in the browser.
Meet the Mini-Tools Image Color Picker & Cropper.
It’s built entirely with the HTML5 Canvas API and vanilla JS. It processes everything in your browser's RAM. Zero server uploads. Zero wait times.
Why I think you might like it:
🔒 100% Local & Private: Since it relies purely on client-side processing, your images literally never leave your device. You can even load the page, disconnect from your Wi-Fi, and it will still work perfectly.
📌 Sticky Workspace UI: I completely decoupled the image canvas from the toolbar. The toolbar stays pinned to the left of your screen. You can pan around your massive screenshot (right-click & drag) and zoom in up to 1000% on the right, while your color codes and palette stay locked in view on the left.
🎨 Auto-Palette Generator: As you click around an image, the tool automatically saves your last 8 selections (HEX, RGB, HSL) into a "Recent Palette" console. Building a cohesive UI theme from an inspiration image takes seconds now.
✂️ Physical Pixel Cropping: The cropping algorithm maps your selection coordinates back to the original, physical pixels of the uploaded image file. No more blurry CSS-scaled crops. You get a perfect, lossless PNG download.
Try it out
You can use it for free here: https://mini-tools.uk/color-picker.html
No sign-ups, no paywalls, no pop-up ads. I built this purely because I needed it for my own frontend workflow, but I hope some of you find it useful too!
Let me know what you think in the comments. I'd love to hear your feedback on the sticky UI layout! 👇
Top comments (0)