Yet another way to explore colors is to use the ColorZilla browser extension for Firefox. This is one of my favorite ways to pick up colors as Firefox is always handy.
Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.
If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.
Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.
The Options menu has a hidden feature that you might want to check out:
Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.
Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.
A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.
ColorZillla – what a neat way to explore a page and all its colors!