Choosing Web Colors

As you start to poke around in your blog settings, you may find a spot or two where you have the ability to change default colors to match a color palette or scheme you have put together.  One of these places is in the options for the “CTC” tag cloud.  Our templates will always ask you to enter a color code that starts with # and is six numbers long.  What do these numbers mean?

HEX Values

HEX Value Examples from BonneyArmstrong.com

BACKGROUND

Computer monitors emit color as RGB, or Red, Green, and Blue light.  This is different from printing color that uses the CMYK system for ink.  Since we are worried about RGB values for the blogs, I am going to stick with discussing only RGB here. If you would like to learn more about the differences between RGB and CYMK, I suggest reading Printernational’s explanation, it is brief, but to the point.

So now that we know that colors displayed combine values of red, green, and blue light.  HTML, short for HyperText Markup Language, the dominant language used to create certain effects on text and images.  HTML defines colors through a hexadecimal notation (HEX) to indicate how much Red, Green, and Blue there is in a color.

HEX values begin with a # sign and are made up of 6 numbers.  The six numbers are actually three-pairs of two-digit numbers each pair for a color.  The lowest HEX value is 00 (equal to “0” in R,G, or B) and the highest HEX value is FF (equal to “255” in R, G, or B).

HUH? Let’s look at a few examples.

  • Black has a HEX value of #000000 because black’s RGB value is 0 red, 0 green, and 0 blue.
  • A true red has a HEX value of #FF0000 because a true red’s RGB value has all (255) red, 0 green, and 0 blue.
  • A true green has a HEX value of #00FF00 because a true green’s RGB value has 0 red, all (255) green, and 0 blue.
  • A true blue has a HEX value of #0000FF because a true blue’s RGB value has 0 red, 0 green, and all (255) blue
  • White has a HEX value of #FFFFFF because white’s RGB value is all (255) red, all (255) green, and all (255) blue.

WHAT DOES IT MEAN TO ME?

To choose a color for your blog, you do not need to understand how to come up with the above values. Lucky for us, there are hundreds of resources that give us a chart of colors and their corresponding HEX colors. What you do need to find is the six digit code beginning with the # sign. A while ago, computers were able to only support a maximum of 256 colors (now millions are possible), and of those 256 colors, a list of 216 of them became the web-standards and are good to use by rule of thumb to know that your intended color will display as accurately as possible.

WHERE DO I FIND COLOR VALUE NUMBERS?

Here are some of my “go-to” lists that will show you the color and their corresponding HEX values.

BonneyArmstrong.com gives the full list of safe colors with their corresponding RGB values

2CreateAWebSite.com allows to mix your color like a traditional color wheel and generates the HEX value for you.

ColorSchemer.com not only gives you HEX values, but helps to build an actual color palette

 

Customize Your Tag Cloud

IT e-Forum Tag Cloud

IT e-Forum Tag Cloud

 

WHAT IS IT?

If you have not changed the tag cloud on your blog from training, you probably have noticed that the more you blog and use tags, the bigger the font gets for your most heavily used tags.

You have the ability to change not only the font size, but the color, order and number of tags that show in your tag cloud.  The example on the left is from the IT blog.  Notice how the the words faculty, customer service, assistance, and student are much larger in size than the other words and also have turned a deep pink color compared to the smaller, dark grey words.

You can customize your tag cloud to do exactly the same, or take advantage of the other options available when you use the CTC Tag Cloud Widget in your blog.

HOW TO GET IT:

WordPress Appearance Menu

WordPress Appearance Menu

To get started, from the left side navigation panel, choose “Appearance” and then “Widgets” from the drop-down menu.

Be sure that the widget called “CTC” is still located on the sidebar on the right of the page.  If it was removed, click on the “CTC” widget from the available widgets and drag and drop it to the sidebar.

 

 

CTC Widget Options

CTC Widget Options

Click the drop-down menu on the CTC Widget to open your widget options.  This is where the fun starts!

Let’s go through each option:

  1. Title: The name that will appear above your tag cloud on your blog.
  2. Number of Tags to Display: As you blog, the number of tags will continue to grow and the tag cloud can start to take up too much property on your blog side-bar.  Control this by determining the number of tags that will appear in your cloud.  In my example, I have only the top 50 tags showing.
  3. Min Number of Posts: This number determines how many times the tag needs to be used before it will display in your tag cloud.  I left this at the number 1.  Personally, I would rather control the number of popular tags to show with the option above than keep track of each tag.
  4. Max Number of Posts: Same idea as the above option but controlled by maximum number of posts. Again, I left the default there.  After you have been blogging for a while and have over 100 posts, you may want to increase this number.
  5. Smallest Font Size: The least used tags will be this set font size.  I left it at 8pt.
  6. Largest Font Size: The most heavily used tags will be this set font size.  I left it at 22pt
  7. Min Tag Color: In my example the min color is a dark grey (#666666).  Choose your hex color and be sure to include the # before the six digit color number.
  8. Max Tag Color: In my example the max color is a dark pink (#990066).
  9. *NOTE* Not sure how to find the code for a color?  See the next post on just this topic!
  10. Cloud Format: There are three options here.  “Flat” is what you see in my example.  List means just that, your tags will be displayed in one long list.  The color and size format will still work, but watch out how many tags you are going to display with this option.  It could quickly take over your blog page.  And the third option pretty much negates the whole purpose of formatting the tag cloud because you will end up with a drop-down list of your tags with no formatting at all.
  11. Show Tags: Ummmmm. YES! I am not sure why this is even a option.
  12. Show Categories: You may add your post categories to the cloud if you like.  I personally like to have a separate drop-down for my post categories, so I chose “no.”
  13. Show Empty: Pertains only to categories.  If you chose “no” to the above option, skip this.  If you chose “yes” you may have created categories in anticipation of using them without actually attaching that category to a post.  If you say “yes” to this option, you may lead your readers to an empty page and confuse them.
  14. Display Post Count: Purely a preference.  If you choose “yes” a small number will show next to all of your tags indicating how many times they have been used in your posts.
  15. Sort By: Three options here.  Sort by “Name” will put your tags in alpha order.  Sort by “count” will line up your tags by heavily they are used. Sort by “random” will jumble them all up.  My example uses “Name.”
  16. Sort Order: Last but not least, is the ability to sort your tags by ascending or descending order which determines the direction of your sort.

 

WHewwww!  Have some fun REMEMBER TO SAVE your selections at the bottom of the widget and preview your blog as you change the options to get it just the way you like it.