In this post, I would like to share my journey of creating AnyColor - A Chrome extension that makes you pick up any pixel color from a web page.
Origin
To be honest, there are already many color picker/eyedropper extensions on the Chrome Web Store. Why do I need to create another one?
It's simple: none of them meet my simple requirement - the ability to pick up any color quickly when browsing.
To name a few extensions I have tried:
- Eye Dropper Almost what I need but somehow slow and I don't need the color palette. The UX design could be better.
- ColorPick Eyedropper Similar to the above, not so quick to invoke the picker.
- ColorZilla This is a color picker for DOM elements. No way to pick colors from images on a web page.
Although thousands of users use these extensions, they are just not what I want.
Idea
I realized the main problem of these extensions is UX design and performance.
As a front-end developer, eyedropper from chrome-devtool came into my mind. The neat UX design is already there, all I have to do is to implement it as a Chrome extension, instead of calling devtool on each web page.
Implementation
This is my first time developing a Chrome extension. The official developer guide is clear but the API is not so modern comparing to other google's products. In a word, I implemented using TypeScript, Web Component, and HTML5 Canvas.
I decide to leave the technical details in another post. The source code is public here hankchiutw/any-color.
Conclusion
Publishing tools for developers is fun and interesting. Give it a try (AnyColor) and any feedback is appreciated!
I also wonder how do you use a color picker/eyedropper extensions in your workflow? Share below!
Top comments (0)