How to Use Colorzilla to Pick Up Colors from Any Point in a Web PageCategory: How To
In designing a website, it is important that you know how to mix and match the colors of your website’s components (graphics, background, font style, ads, widgets, etc.) It adds to your website’s overall appeal when the components blend well with each other.
When I was at the design stage of this site, one of the problems I encountered is that the default color of my different widgets and Google adsense ads don’t blend with my chosen WordPress theme. Shown below are examples. The default WHITE background of the Google adsense ads don’t blend well with my theme. They’re just plain ugly!
To solve this, I have to identify the colors used in my themes so that I know what color to use for my widgets and Google adsense ads. In order to do this though, I still have to undergo a very tedious process which involves…
…capturing a screenshot of the page by pressing the Print Screen key and pasting it to Paint…
…opening the saved image in Adobe Photoshop and using the eyedropper tool to get the RGB color code of any point in the page…
… and going to a website that converts the RGB color code to HTML code like the one I have been using here.
However, this is a very time-consuming process and requires a lot of patience.
In my search to make my job easier, I stumbled upon this wonderful Mozilla Firefox add-on called ColorZilla. Download the add-on here.
To use it, just click on the eyedropper icon located at the left side of the status bar and then move around the crosshair to any point on the page. Aside from the RGB and HTML color codes, other useful data are also displayed like the point’s X and Y coordinates and even the name of the element where it is located.
After picking up the color of that specific point, you can copy the color code by activating its pop-up menu.
Very easy isn’t it?
Here’s how my website looks like after the proper colors have been applied to my Google adsense ads.
It’s now clean eh? My website definitely looks better when the Google adsense ads blend with my theme and don’t exactly look like ads. Visitors here will have more tendencies to click on them which will give me a higher CTR (click-through rate). A higher CTR means more adsense earnings, hehehe…
If you want to receive my latest posts, please subscribe to my full feed RSS or have them delivered through email. Just enter your email address below and hit the Subscribe button.