How to Cange Blogger Header Color

Before we start to change blogger header color, first we must determine what color we would like to have, and then "translate" it into HTML code. ie: #000000 for BLACK and #FF0000 for RED.
I have found a Great Tool for this, Small, Smart, and Usefull Software by Iconico.

I highly recommend you to download it, and spend a little bit of your time to learn it, because we will often to use it later, sure if you haven't one yet. I am still amazed that this wonderfull software provided by Iconico is free. Yup... you can download it Legally Free at :

http://www.iconico.com/download.aspx?app=ColorPic&type=free

Method 1

Actually, bloggers have been providing facilities to change the color of the page template, which is in the Fonts and Colors facility, under the Layout menu in our dashboard. This facility is not only set color and font in the header, but also the entire page.

After you decided what the color and know what the HTML code is (for example #FF0000), then go to your Dashboard, click Layout, then Fonts and Colors.

 

Scroll the window and find "Page Header Background Color", click on it, and choose your color from the righ side, if the color of your choice is not there, then you can insert the HTML code into "edit color hex code"and click enter ..

Unfortunately, this setting is not the same rules for all templates, for example If you are using minima template, than you will not find Page Header Background Color setting. and it also occurs in other template items.
If you don't find Page Header Background Color setting in Fonts and Colors, than you can do it with method 2 below.

Method 2
Go to your Dashboard, click Layout, Edit HTML. In Edit Template, Scroll the window and find this:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

put this script;  right after it... (In a different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head.) 

background:#FF0000; .

Here is the final

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;

  background:#FF0000;
  }

Save Template and view your blog..

This is before

 

After

You can set the Title and Description color to match your Header Color fits. Just go back to the “Fonts and Colors” tab, and change them