Training



Fancy Colors

Throughout the course, we performed a few tricks that we didn't let you in on yet. While that may not have exactly been fair, it's because we didn't think it was time to introduct such complicated subjects. Now it's time.

We covered the several colors implimented by HTML, which include BROWN , RED , BLUE , PINK , YELLOW , GREEN , CYAN , MAGENTA , GRAY , BLACK , and WHITE . These colors can be used as backgrounds, as text colors, and for other things. But we USED colors that don't fit in this group, like the background of this page for instance. What color is it? Well, it's


Huh?

Each color in the spectrum can be broken down into a combination of 3 colors - the three PRIMARY colors you learned in gradeschool - Red, Green, and Blue. Using these 3 primary colors, we can create any color you want on the computer screen. But the method by which we do this assumes we know 2 things:


OK, the colors of light part isn't THAT difficult. You see, when you mix red, green and blue with paint, ink, dies, or other solid pigments, you get, well, a sort of murky color that resembles... BLACK. Computer monitors are lights though. Don't believe me? Leave your monitor on in a dark room and see if it doesn't light the room up a bit. Light works in the opposite direction as paint.. When we mix red, green, and blue in light, we get the OPPOSITE of black, which is WHITE. And we all know what the opposite of white is right?


.
..
...
....
.....
......
.......
........
YOKE!


The harder part is understanding HexiDecimal numbers. I'm not going to go into the details of how and why such a stupid numbering system came about. We'll just say that you had to program computers in assembly language to truly understand. Anyway, the numbering system is far more complex than we need to discuss in this particular venue. All you really need to know is that we are dealing with a total of 16 numbers, ranging from 0-15. That's why it's called HexiDecimal - Hex = 6, and Deci = 10. 6+10=16, so 16 numbers in a numbering system makes it a hexidecimal system.

Each number can only be represented by one digit, so when we ran out of single digit numbers at 9, we started over with letters. So the basic numbering system goes like this:

0    =   0
1    =   1
2    =   2
3    =   3
4    =   4
5    =   5
6    =   6
7    =   7
8    =   8
9    =   9
10    =   A
11    =   B
12    =   C
13    =   D
14    =   E
15    =   F

Such that if we were to count from 0 to 15, we would count like this:

0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

To confuse you even more, the next number ( 16 ) would be represented by 10.

What you really need to know. though, is that the smallest number is 00, and the biggest number is FF.

With that thought in mind.... lets get back to Primary Colors.

When we decided to make this page the background color we did, we used a method of choosing the color using the three primary colors, and mixing them. They are mixed in proportion according to a RGB type monitor using RR GG BB as the pattern.

the RR, GG, and BB are numbers expressed in - you guessed it - HexiDecimal. Now here's how it works:

Pretending we are in a pitch black dark room and we turn on a white light. Assume that we control the brightness of the light using hexadecimal numbers. With the number FF we would be in maximum light, and the whole room would be blindingly white. With the number 00, we would be in total darkness. If we use some number in between - say 55, 99, or AA, it would give us varying shades of gray.
00 =
 

55 =
 

99 =
 

AA =
 

ff =
 

Now lets move on to plan B. Instead of having 1 white light, we have 3 colored lights, one RED one GREEN , and one BLUE , and we can control the intensity of all 3 colors.

If we change the intensity of ONLY one color, like the red, leaving the other two colors turned off, we get this:

550000
 
AA0000
 
FF0000
 

If we do the same thing with GREEN ( the second 2 digit group ) leaving red and blue in darkness:


005500
 
00AA00
 
00FF00
 
And finally, we do it with BLUE:
000055
 
0000AA
 
0000FF
 
So now comes the fun. How do we get colors like yellow, purple, egg shell white, etc? Easy.... you mix the colors. For instance.... Red and Blue make Magenta ( Purple for us normal folks).
FF00FF
 

If you want it lighter purple, you can't add any more blue or red, but you can add white - Remember that white is all F's. So by adding green to our Red and Blue, we ARE adding white.
FFBBFF
 

Red and Green combine to make Yellow
FFFF00
 

Blue and Green combine to make CYAN ( sky blue for normal folks ).
00FFFF
 

So how do we come up with egg shell or off white?

Easy, you start with white ( FFFFFF ) and take one or two of the colors down a shade, say FFFFDD or DDFFDD
EEEEFF
 



Now somewhere along the way - somebody's gonna pose the question - so I'm gonna prematurely answer it. Why did I choose this (some would say gawdawful) green for the background of all my webpages? Well the answer lies in a few paramaters.

First - optics. If you stare at a perfectly white screen for long periods of time - your eyes get tired and you get headaches. For that reason, many sitemasters will make their websites an off white or eggshell white. If you use black it is not so bad. As a matter of fact - the first computer monitors were ALL black with green or orange lettering. The problem is that when someone wants to print out your web page for future reference - they run out of ink quite rapidly. Not my problem - but I'm just a nice guy.

So you get why not pure white or black. But why green? Primarily - this is an electronics site, and typically, when I began writing this page, electronic circuit boards came in 2 colors - yellow or green. I didn't want the baby crap yellow - so I went with the minty fresh green. I chose a pale green to make it easy on the eyes, and once I got on a roll, I just copy and pasted my own code.
 




On The Following Indicator...
( GREEN will indicate your current location)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

[ COURSE INDEX ] [ HTML GLOSSARY ] [ HOME ]

Otherwise - please click to visit an advertiser so they know you saw their ad!


This Course was written by Ray Dall © All Rights Reserved.
This page and all its content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1

VISITORS:
Add Me!