Introduction to Color Charts ... Recommend The first step in creating an excellent page is picking out colors. You can define the background color or pattern, text color, link color, and visited link color. The HTML necessary to do this is a series of attributes added to the <body> tag. The complete tag looks like this: <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"> BGCOLOR is the background color of the page. TEXT is the principal text color found on the page; always make sure that this color is visible on the background you choose. LINK is the color of any hypertext that has not been visited yet. VLINK is the color of visited hypertext; and ALINK is the color of an active link (selected, but not followed). In place of "xxxxxx" enter one of these hexadecimal codes: Black = 000000 It should also be noted that one must be careful when typing in color commands. If spelled "colour", the attributes will not function, and will default to the browser's settings. This can be a mixed blessing at best. Lastly, you may notice through experimentation (or by accident) that color hexcodes will work without the pound (#) symbol, and sometimes even without the quotation marks. Suggestion, leave them in there. Older browsers require them to function properly. This applies to most any attribute value throughout HTML. Using Background Images If you have a background image (wallpaper) you would rather use instead of a flat color, enter: <body background="yourfilenamehere.gif"> ... in place of ... <body bgcolor="#xxxxxx">. This will create a tiled background images behind all other items on the page. The background image will scroll with the text and other images on the page. At some point, you may wish to create a background image that does not move, but instead has text and other objects scroll over the top of it. This can be accomplished either with javascript, or by adding "bgproperties=fixed" to the <body>tag, like this: <body bgproperties="fixed" background="yourimage.jpg"> That's all there is to coloring your page. Easier than crayons, huh? The really technical stuff ... for those of you who want to know more (I know you're out there, don't be bashful), the hexadecimal codes above are codes your computer uses to recognize the red/green/blue pattern that makes up a particular color, much the way a color television does. An explanation of how hexadecimals function is extremely complicated, and requires a considerable knowledge of math. If you feel up to the challenge, the rewards for your page can be quite impressive. 1*1=1 1*1=1 Therefore: So if we were to convert the example above back into base 10, we would do as follows: In truth, much of the material below is rather technical, especially the math part of hexadecimal or HEX. Just like in your own computer, or a car, most of what's going on under the hood is not necessary to know for its operation. But for all you geeks, gurus, and demented mentors ... listen up. To your HTML file, you are all powerful, and the background of the page is your firmament, it can be midnight black or forest green, depending on your whim. The background color is specified within the "body" tag at the beginning of your document. So, if you write in your HTML doc ... body bgcolor=yellow (with angle brackets) ... you will create with great efficacy a yellow background. Now I am sure you are thinking (you are thinking) ... "Which colors can I use? If I type ... BODY COLOR=PERIWINKLE (with angle brackets), will the browser know I'm looking for a light bluish gray?" The short answer is: No. Only a limited number of colors can be specified by name ... (periwinkle isn't one of them), and different browsers recognize different sets of colors ... So if you want to be precise about your background (and I know you do), you'll want to replace the name of the color, with a hexadecimal code ... then your HTML would look something like this: Notice all those "F"s in the code? Well, that's how one says "white" in hexadecimal. If you'd like to know how to calculate that number, tough luck. No, I'm just kidding. The "FFFFFF" represents the RGB value of white, translated into hexadecimal ... stay with me now ... Any color that can be displayed on a monitor can be described by its RGB value, which is its relative amounts of red, green, and blue (each of which is expressed as a two-digit number, such as 51 or 14 or 00). Now in order for a internet browser to understand the RGB values, they must each be translated into a hexadecimal (or base-16) number ... Then the resulting two-digit hexadecimal ("hex" for short) numbers are strung together into a single six-digit code. So in the example above, the first two "F"s stand for the red value, the next two stand for green, and the last two for blue. And, if you don't want to bother with calculating those numbers (and nobody ever does), you can just copy the HEX numbers on the color chart into the appropriate tag, and into your editor, or visit my ... Color Palette ... where you point to a color, and the hex number gets displayed. See the links below for additional charts But if you're a real do-it-yourselfer, you'll probably want to do the calculations yourself. So grab your abacus for this sexy/hexy sidetrack: Let's take this ... SEA GREEN ... with the RGB values R=51, G=219, B=153. All right, you don't like it because it doesn't go well with this background. That's obvious. To translate this into hexadecimal, you should first take the value of Red ... in this case, 51, and divide it by 16. The balance is 3.1875. The integer, 3, will be the first number in the hexadecimal formula. The remainder (0.1875) should be multiplied by 16, which also results in the number 3. So, 51 translates to 33 in hex. But sometimes the numbers don't work out as evenly (life is that way). Often you'll get integers and remainders that translate to 11 or 14, for instance. And in those cases, we translate the two-digit number into a single letter (that's where all the D's and F's come in), where 10=A, 11=B, 12=C, 13=D, 14=E, and 15=F. This becomes relevant to our horrible sea green when we calculate the hexadecimal equivalent of its Green value, which is 219. When we divide it by 16, we get 13.69. We translate 13 to D, and then multiply the remainder, 0.69 ... by 16, and get 11, which equals B. Repeat this formula for the Blue value, and then string them together (you should get 33DB99). Soon, you'll be speaking fluent Hex. Hence, you may now go to your dinner party and bore the pants off anyone who'll give you the time of day ... by expressing their street address hex decimally. Now doesn't that make your day? We return to the ... |