Because I grew up with an older sister who was an artist, I had an interest in art. I discovered, while in grade school, that I didn't have much ability to make original drawings but I did have a fair ability to sketch pictures from books. I also enjoyed playing with water colors; it was fun to mix them and see new colors magically appear. I remember a disagreement I had with my high school physics teacher, Mr. Clark. We were studying light, and he said the primary colors were red, green, and blue (RGB). I said, "No they aren't. They are red, yellow, and blue." He then kindly explained the difference in primary colors between incident light and reflective light. We were both right. He was giving the primary colors for incident light, and I was giving the primary colors for reflective light. For an explanation of incident and reflective colors, go to Understanding Color.

When I began designing web sites, I was re-introduced to the RGB color model. I became very frustrated trying to get a particular color that I wanted. I instinctively wanted to add a bit of white to lighten, a bit of black to darken, a bit of this color or that color to change the hue. I couldn't do those things. All I could do was add red, green, or blue. Very frustrating.

Then, one day a spark of inspiration came.  "Yes, I can do those things! I can add any color I want by manipulating all three primary colors at once." Prior to this inspiration I was manipulating single colors. Duh! Obvious, but it took me several years of web design to realize this!

The XHTML notation for specifying colors is #RRGGBB, where RR, GG, and BB are hexadecimal values for the primary colors and range from 00 to FF (see the Color Compatibility page for more detail about hexadecimal representation of colors).

First, let's look at the XHTML notations for shades of gray. To see the variations in shades, you should set your monitor display properties to 32-bit color.

Notice the pattern:  Gray is having equal amounts of each primary color! (To simplify the hexadecimal arithmetic, I only changed the left hex digit in increments of 2, but I could have changed only the right digit, or I could have changed both digits). Notice that the larger the hex values, the lighter the gray.

Now, let's look at six basic colors, the three primary colors and the three secondary colors that are midway between the primary colors.

Notice the pattern: Yellow has equal but maximum amounts of red and green. Cyan has equal but maximum amounts of green and blue. Magenta has equal but maximum amounts of blue and red. This table of six colors is a linear version of the traditional color wheel. Other colors could be added to our "color wheel" by including additional combinations of equal amounts of adjacent colors (giving 12 colors, then 24, etc).

Now that we have the patterns for the gray scale and the color wheel, we're ready to mix colors. Suppose we have a purple color (995799) on our web page and we want tints (lighter) and shades (darker) of purple to see how those colors would look in the page. No problem, We can add gray to the purple to lighten or darken it. First, lets lighten the purple by adding grays that get lighter. Let's just increase the first digit of each hex number in increments of 1.

To understand the hex arithmetic, we have to remember that 9 + 1 = A in hexadecimal. Now, let's darken the purple by reducing the first hex digit in each color.

Ops, what went wrong? In adding the shades of gray, I decreased the first digit of green until that digit went to zero and it contributed no green. Then I decreased that digit from 0 to F. But, F is the largest hex value, and the first digit thus contributed maximum green; I should have kept the digit at 0. Thus, in changing the RGB values, change each digit between the values of 0 and F but don't go beyond those limits for each digit. Actually, hexadecimal arithmetic is more complicated than the procedure I've given, but my procedure is close enough to get many variations in color.

As our final example, suppose we have a dark purple, and we want to add red to it to give a warmer color.  No problem. Let's start with the 2nd shade of purple given above. First, we'll add some red to it by changing the R from 89 to B9, an increase in the left digit of 3. Next, we'll add the same amount of green to it to give the effect of adding yellow to the original color. Finally, we'll decrease the left digit of each value by 1 to add gray to darken it a bit.

There are web sites that give the hex values for the 216 safe colors, but with the advent of video boards that reproduce millions of colors, you may want to switch your editor to its XHTML mode and mix your own colors. Use your WYSIWYG editor to set a color, then go to XHTML mode and change the numbers.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Choosing a Theme ] [ Target Audience ] [ Organizing Your Site ] [ Site Navigation ] [ E-mail Addresses ] [ Copyright Law ] [ Aesthetics ] [ Mixing Colors ]

 
© Copyright 1998, 2011 Allen Leigh