About   All Tips   Tips by Category   Tips by Ability   Help!

Text and Link Colors-Beginner

This is a beginner tutorial that teaches how to change the colors of a blog using Blogger's easy to use 'fonts and colors' feature. It will also show you to where to find custom colors and how to put them on your blog.

***Disclaimer: If your blog has had some design work done to it, you may be unable to use Blogger's fonts and colors page to make changes to your blog. There is a way to make these changes within the HTML of your template and most designers prefer to make changes that way. I think it's much easier to utilize the fonts and colors tool for color changes when redesigning a blog, but that's just me. :) ***

So, let's begin!

Go to your dashboard-->layout-->fonts and colors.

Important: Be sure to PREVIEW before clicking on SAVE. Below the 'fonts and colors' choices is a preview of your blog. Make sure you like what you see before saving.

To make a color change:

1. Click on a section below page elements (refer to red arrow in image below).
2. Click on a new color from the color palettes on the right.
3. Once you select a color, scroll down to see a preview of what your blog looks like with the color change (refer to orange arrow in image below).
4. If you like what you see in the preview, click 'save'. If not, select a new color or return to the previous color. If your previous color is not there, simply click on 'clear edits'.

For example, if I wanted to make the background of my blog black instead of white, I would:

1. Click on the fonts and colors tab (dashboard-->layout-->fonts and colors).
2. Click on the box that says 'Page Background Color' (beneath the red arrow in image above)
3. Click on the color black (on the right, with all of the other colors)
4. Scroll down to see if I like the way it looks in the preview (beneath orange arrow in the above image)
5. If I like it, I will save. If I do not, I will simply select white again to revert back to my previous color or select a new one. As long as you do not click on SAVE, no changes will be made to your blog.


Don't care for the colors that Blogger offers in the color palettes?

That's where that little box labeled 'edit color hex code' (boxed in yellow above) comes in.

In that little box is a # sign and six numbers. I could really get into what each number means and all that jazz, but I think you'd rather me just get to the good stuff. What you need to know is that every color has a six digit hex code.

If you know a color's hex code, you can type it into the nifty little box, hit enter, and poof! It will change the color of the item that you have selected from the list on the left.

Well, where do you go to find those codes? There are so many people out there who LOVE working with code and such. They are more than happy to share this information with you for free, via their websites. :)

The following is a list of sites with color charts that you can use:

Google 'hex code color charts' and you'll find even more color codes! If you have made the switch to a Firefox browser, you can also use a cool program called ColorZilla to create custom colors.

Simply find the color you want to use and copy its code. Then open up your fonts and colors page, erase the characters in the box, and paste in the new code. Don't forget the # sign at the beginning!

Have fun! :)


mormonhermitmom said...

Good tip for finding those sneaky secret codes. Thank you!

Nori said...

Oh man... I just stumbled across your blog from Funky Mama's blog. OMGoodness I can tell I'm going to be on here for hours. I have so many questions and I know I'll find the answers on here.

Thank you for sharing all of this information! I'm looking forward to transforming my blog.

Sheila said...

Thanks for the signature tutorial. You have a great site.. Keep it coming.

Becca said...


scrapberlinerin said...

I do not speak English, unfortunately. Please forgive me. Your blog is wonderful, he helped me a lot, thank you
Lieber Gruß Kerstin Schwebel