Today I want to show you a great, useful tool that you can use to speed up and enhance your web-design process. Now, before I go further, I'd like to take some time to explain WHY we need this tool:
Okay. so you're choosing colors for your website and you think each color is perfect. Then you apply these colors to your website and to your surprise the colors don't match at all. Trial and Error isn't going to get you very far.
So here's where the tool (Firepicker 1.4.3 to be exact) comes in. Of course, I should say this is an Add-on to Firebug, which itself is an Add-on to Firefox/ so get those first if you don't have them. Now, where you can get those is under the Add-on page for Firefox (or via the clickable links above). A quick little search for Firebug and Firepicker should direct you to those pages. When you do have those add-ons come back to this page and see exactly what we are going to do.
Okay! When you're in Firefox, and you're on a website(ie. Blazingspider.com) you can go under "Tools" (in the top region of the Firefox browser), navigate to "Web Developer", navigate to "Firebug", then click "Open Firebug", or also there should be an F12 shortcut(or not, depending on your shortcut setting). When you open Firebug, there should be a nice little Interface at the bottom of the screen. Click the second button from the left in that Interface, then proceed to click the region that you are trying to target.
For example you could click on the default blue banner near the top of this page. When you have clicked the banner, notice that the bottom of the screen (in our Firebug Interface) there should be some sort of CSS color property (like background-color). If you click on the hex color code you will see a sample of that color, and if you click the SAMPLE color, you will get to a nice little RGB color picker tool. Now you can play around and show the banner color changing real-time as we change the RGB picker.
Also you should notice that Firepicker gives you a corresponding Hex color code for the colors you are playing around with, so when you have found something to match your taste, you can write the code down and tell your Web developer, or change it in the website if you are a developer yourself.
That's pretty much it, have a nice day!
Note: this isn't going to save the new color. It is only a tool to find some nice colors in the live website environment without having to guess or use Trial and Error methods.