The Beginners Guide to HTML Color Codes  - PART 2

How to spruce up your web pages with HTML easy background color codes

HTML Color Codes -- A Guide for Beginners

Part 2

Once you decide on a few general colors for your website, it's time to learn about the actual HTML color code.  

You have two options when it comes to entering a color code for your web page. One, you can just type the name of the color into your HTML code on a web page, such as "blue" or "red."  However, this doesn't work if you need to use unusual color combinations and do not know the name for them.  Also, some unusual colors might not be compatible with HTML.  Each color has its own HTML code, which is actually a combination of three color mixed together.  Here's why...

An Elementary Lesson on HTML Color Codes Do you remember when, back in elementary school, you learned about the colors of the rainbow?  These are primary and secondary colors - six colors in all.  The primary colors are red, blue and yellow.  The secondary colors are green, orange and purple. You learned how the primary colors were actually mixed with one another to form the secondary colors.

Of course, there are many more color combinations than these.  You could spend hours with water color paints making unique colors and not exhaust the possibilities!

HTML Color Hue (or Tint) Defined

A hue is a particular tint of a color.  For instance, the color red can be made lighter or darker, giving a pinkish tint or a burgundy tint.  The color blue can be lightened to a light blue or darkened to a navy or purplish blue.  The hues, or tints, of the primary colors red, green and blue (RGB) are what give us the wide spectrum of colors that are available today.  You can saturate a color or brighten it.  The RGB is crucial to learning about HTML color codes because these three letters represent the hue, saturation and brightness of a color.  Thus, giving us our HTML Color Codes we have today.

HTML Color Code Chart

Take a look at the HTML Color Code Chart below.  Notice there are three columns. These contain the color name, color code and actual color so you can see the result of that particular color code.  Amazingly, the colors come out beautifully whether I type in the color name or the actual code.  This is because the HTML programming language is pre-set to accept these colors and the language already knows how to translate the color names or the code - whichever you use.

Inserting a Color into Font Commands

A font command is an entire line of code used to assign color to a certain font (or text) in your Web page.  The code can be seen below with the HTML color code for light blue:

<font color="#ADD8E6">

For the word "hello" in light blue letters, the complete lettering color code would look like this:

<font color="#ADD8E6">hello</font>

Keep in mind that there are several ways an HTML color code can be written.  Here are some variations of the line of code in HTML:

<font color="lightblue">hello</font>

<span style="color: rgb(173, 216, 230);">Hello</span>

<span style="color: lightblue;">Hello</span>

If you already have a website or are in the process of designing your own web site, take a look at all the different color options at this link.  It's a great color picker that enables you to choose a variety of colors.  You can get the HTML color code and insert in your web pages once you find a great color.

WARNING:  Be careful about choosing unique colors.  A color might look entirely different on your computer than on your viewer's computer.  So, test out your colors on your computer and ask a few friends to view it on theirs as well.

http://www.hitmill.com/html/rgbcolorvalues.html

Now you know just a little more about color codes.

---

Article written by Candice Pardue, website content writer.

Now, Get Your Web Design Course for Beginners >>>