Elements like CSS font types, colors, styles and other elements can be inspected with Google Chrome’s Inspect Element option which is accessible from right click menu.
For example: Suppose you are curious if a heading has very good color shade and you are willing to find out what that attribute’s value is.
Inspect Element is very useful feature but it is not easy for everyone.
Today a SANGKRIT.net user asked us how he can find the real color shades used on other websites. He was trying to find out an easy way to pick colors from his website theme so that he can use same color schemes on his other websites too. We have already posted a solution on this here.
Now in this tutorial we are sharing a list of some good Google Chrome extensions you can use in similar cases.
Identifying & Using Fonts From Any Website
The extension allows you to identify fonts of any website so that you can use them anywhere else. You can find CSS like used fonts, font family, font color & font size and use same on your website too.
The extension allows you to decode the font, copy and use it by following a few steps given here.
Copying Text Printed Over Images
Suppose you find an image with some good quote or poetry printed over it. The problem comes when you like using same text (printed over the image) in your website or document etc. Here comes the use of Project Naptha’s Google Chrome extension.
Picking Colors From Other Websites
For example you like using same color that Twitter has used in styling its logo. Eye Dropper simply enables you to pick and use any color from any website.
Generating Color Palette From A Image
You can simply right click any image and generate a 16, 24, or 32 color palette to use in your website etc.
Responsive Web Design Tester
Is a quick and easy way to test your website’s responsiveness. You can test its display on various smartphones and tablet devices like Nexus, iPad & iPhones etc
Edge: The Web Ruler
Suppose you want to measure the size of your sidebar in pixels so that you can use right Google Adsense advertisement size. Here comes the use of a pixel ruler.
Edge is an on-screen ruler that supports multiple units, horizontal & vertical orientation, and looks like a native application.
It support pixels, inches, and centimeters, provides both horizontal and vertical rulers, you can move it with arrow keys, calibrate the ruler with your screen size, exists separately from any browser tab, is easily resizable and remembers all settings.