ColorDrop is a free Chrome extension for web designers and developers to change colors of any Live website. You just need to drag and drop colors from its palette to any element of the webpage, and the element color will be changed accordingly. It can also change the colors of the fonts in the same manner. You just need to install this extension to use it on any website. The color palette of this extension is inspired from Material Design colors, so you can make your website look n feel modern.
I personally have a need for these type of software whenever I want to ask my developers to change colors of the website. Traditionally, we have to ask developers to change colors, then we see how they look, and then we have to ask them to tweak the colors again. However, software like this greatly remove that rework, by letting you change colors on your existing website to see how will the website look with new colors, and tweak that until you have a color combination that you like. And finally you can send the colors to your developers in one go, so that there is no back and forth involved. And this is definitely easier than using image editors to modify colors on screenshots.
In the screenshot above, you can see the mess that I have created on our own website using this extension. On the top half is the original webpage, while bottom half has the colored webpage, that shows my artistic skills. What you can clearly see is that I was able to separately color different elements of a webpage, including text.
Using this extension is pretty easy. Get it from Chrome Store here. Once installed, you will see an icon for this extension on Chrome’s Address bar. Click on that website to load a small color palette on left side of the page that you are currently on. Click on any color on this palette and drag it on any element of the webpage to change color of that.
When you drag a color to the webpage, you will see a border around the element of the webpage that you are on. This will let you know exactly which area’s color will change. In case of text, the text gets highlighted when you move mouse over that. In this way, you can choose the exact area or the text of the webpage whose color you want to change.
Even though this extension is pretty useful, it currently lacks some important features, that really limits its potential use. In fact, practically, I might not be able to use this extension at all. The shortcomings that I really hate are:
- There is no way to specify exact color that you want to choose. You have to stick to the colors available in the palette only.
- There is no way to undo a color. So, if you accidentally drop a color on wrong element of a webpage, you will not be able to undo that. Of course, you can choose to drop the original color on that element again. But, in case the palette does not have that color, you are screwed.
- There is no way to change fonts.
- There is no way to see color codes of the colors that you have used. So, essentially, once you are done with making changes to color of a webpage, you will need to take screenshot of webpage using one of the full webpage screenshot extension, then use color picker softawre to find the color codes of the colors that you have used, and then send those to your developer.
This extension is still fairly new, so it is very well possible that the developer might add these features down the line. And I really hope he does. Till that time, I will try other options, like, Colorizer for Firefox, that does all the above and more, for Free.
