When I help people with web pages, I always encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the first things that people have a hard time grasping is what HTML Color Codes mean and how to work with them.
HTML Color Codes are 6 characters wide and look like "#80FF12", and are really 3 2-digit hex numbers that represent Red, Green, and Blue. Ok... I just lost a good portion of the crowd didn't I? Let's break it down into things that are easy to understand.
How do you describe a color with numbers? One of the ways that's used with computers is to specify the values of Red, Green, and Blue that are mixed together to achieve the desired color. As you vary the amounts of Red, Green, and Blue you can create most any color.
Why does this relate to computers? Computer displays, TVs, LCDs, and other "projected light" display devices use pixels to display what you see on the screen. The color value for those pixels is specified in a RGB (Red, Green, and Blue) value. For example if your PC monitor is set to 1024 x 768 resolution, then there are 768 lines (going across your screen from top to bottom) on your screen, each line has 1024 pixels or little dots in it. Each of those pixels or little dots is actually made of three smaller dots or light sources: a red one, a green one, and a blue one.
Ink however works differently. Printers that you use with your computer generally specify color as a four (or more) color "reflective" ink value made up of Yellow, Magenta, Cyan, and Black which is abbreviated as YMCK. Your computer uses various formulas to convert the RGB values to CMYK values so that you can print what you see on your screen accurately.
So how does the computer represent these RGB color values? RGB values are stored as 3 separate values (one for Red, one for Green, and one for Blue), each between 0 and 255. If you count the 0 as a value too, then that's a total of 256 possible values. When you combine the Red, Green, and Blue values together to represent a color, you get a total possibility of 16.7 million colors (256 x 256 x 256). Most people consider this to be "true" color because it can represent most photographs and images accurately and naturally.
What is a Hex value? I'm glad you asked! Your computer stores information as single ones and zeros. Each of these tiny single values is called a "bit". We then combine 8 of these "bits" together to make a "byte". So therefore a byte is 8 bits. If you recall from high school math, you can count in various "bases". We normally use base 10 or "decimal", which uses these digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. If we use the ones and zeros I just mentioned, we're talking about just two possible values for each digit, 0 or 1, so this would be called base 2 or "binary". In computers, we use base 16, or hexadecimal (hex for short) because it packs more values into a single space. Hex uses the following digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. To represent the number 128 in decimal or base 10 takes 3 digits (128) , in binary it takes 8 digits (10000000), and in hex or base 16 it uses just 2 digits (80). So by using hex values in programming, HTML, and other computer related things, we save storage space and gain efficiency.
How does this relate to HTML color codes? HTML colors codes are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.
For example:
- 000000 is black (0's for all three colors)
- FFFFFF is white (255's for all three colors)
- FF0000 is all RED (255 for Red, 0 green, 0 blue)
- 00FF00 is all GREEN (0 Red, 255 green, 0 blue)
- 0000FF is all Blue (0 red, 0 green, 255 blue)
- FFFF00 is Yellow (255 red, 255 green, and 0 blue)
- 808080 is a gray (128 red, 128 green, and 125 blue)
Also, in HTML, you sometimes put a "#" in front of the color code, but this is not necessary if you specify all 6 digits, it's used for an abbreviation. If you ever make a profile for MySpace.com, leave off the "#" because MySpace filters them and won't display the color correctly if you use the "#".
To convert between Decimal and Hex values, use the calculator that comes with Microsoft Windows. Open the calculator and select View and then Scientific. You'll see more buttons and controls on the calculator now. To convert a number from Hex to Dec, click on "Hex", key in the number, and then click "Dec".
I hope this helps you understand more about HTML Color Codes and how colors are stored and specified in computers.
Related Articles
- Can You Update Your Own Web Pages?Tired of paying people to update your website? Quit wasting cash. Learn to do it yourself with this great tutorial.
- Understand Your ColorAny design on a web application involves the effective input of color scheme in order to impress web surfers, instill a certain image or identity associated with the kind of web site it represents, and add impact to the web pages...
- Cascade Style Sheet BasicsThere are only three parts to Cascade Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use...
- Using and Converting to Color-Safe PalettesWhen you design web pages in HTML, as you probably know, you can use a tremendous range of colors (over 16 million) for fonts, tables, backgrounds and so forth using the COLOR attribute of the various HTML tags...
- Guide to Software MarketingThis concise article will tell you in plain English how you can promote your software easily and effectively.
- Advanced ShoutboxA tutorial based on how to create a Shoutbox on PHP with mySQL.
- An Easy Way to Choose Attractive Color CombinationsLots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, heres an easy technique that only takes a few minutes...
- Beginner TablesTables are an essential piece for creating a professional layout. HavenFX uses many tables to organize and display data, even though the tables probably are not visible. Here you will learn the basic tags used in creating tables.
- Displaying Date and Time using PHPYou dont have to know PHP programming to do this tutorial.
- 10 Important Web Design Tips: SEO Friendly WebsiteThis article gives a very practical list od 10 Important Web Design Tips: SEO Friendly Website. The author explains the importance of each tip and then tells you how to achieve the needed design element in your webpage.