Understanding Color

by Bob Mulligan

This article explains how to understand and use color with your computer. It should help when you are creating a specific color, correcting a color graphic or photograph or writing HTML. You will learn how colors interact with each other by writing some HTML colors and viewing them on your Mac.

The Primary Colors

If you studied art, watercolors or oils, even crayons in grade school, you learned the primary colors were red, blue and yellow.

However, if you have worked with color in photography, lithography or computers you know the primary colors are red, green and blue. Which theory is correct? They both are!

There is a difference in eye response to color.

Red, blue and yellow are the primaries when we view colors from a reflected surface, an artist's paper or canvas, flowers, the world around us.

Red, green and blue are the primary colors when we are viewing colors from their source, the sun, an electric light bulb, a computer's monitor.

Red, green and blue are the three primary colors of the sun. Also, they are the only three colors our eyes are sensitive to. All other colors are made up of combinations of these three, a divinely designed, amazingly simple system.

But as you will see, we mortals have made it complicated.

The Color Chart

You have seen this circular color chart before, Picture 1. If we took three photographic slide projectors and placed primary red, green and blue slides in them and projected the pattern shown here the colors indicated on the chart are exactly what we would see.

Where the three primary colors overlap in the center we see white. Where only two colors overlap we see another color. Where no colors strike the movie screen, we see nothing, black. At least that would be so if we were in a darkened room. We can make a countless variety of colors by adding or subtracting others. This article will give you an understanding of how to combine primary colors to achieve a specific color.

The Secondary Colors

Looking at the chart you can see how red and green make yellow. Since there is no blue in yellow we can say yellow is the opposite of blue. Magenta is the opposite of green and cyan is the opposite of red. Check this out on the chart. We can say these "opposites" are "secondary" colors.

We could call these secondary colors purple, aqua marine and yellow, but lets stick to the nomenclature of the industry. They are magenta, cyan and yellow.

Color Correcting

Suppose you had a nice photo of your white plastic-sided house but, hey, in the photo your house has a green tint. What happened?

Don't get mad at your camera, that color shift was there when you took the picture. The house is reflecting green from nearby trees and grass. That is difficult to spot with your eye. These color-shift problems pop up all the time. Tungsten light bulbs are reddish. The sun in bluish. Fluorescent lights are greenish. The film could be poorly developed or your digital camera may be improperly color balanced.

Again, look at the chart. Too much green? You need more magenta. Too much red? You need more cyan. However, seldom will you be making a correction of just pure red, green or blue. We usually have to correct two colors mixed together. Blue with a little red, yellow with more green than red. Sometimes we have to make two corrections.

Understanding how colors mix with each other will help you use a color balance dialog box that is found in most graphics software. See Picture 2. Open this dialog box on the monitor next to a picture or photograph. Then move a color slider while watching the color correction progress on that picture.

Note the graphics dialog box has primary colors opposite their secondary colors. To correct the too-green house you would move the slider toward magenta until the siding was white again. Move it too far and your house will become magenta. If that happens, just slide it back toward green. All the colors work in this manner.

Browser HTML Colors

The billion plus Web sites on the Internet are all written with HTML text, including colors. It is a text language based on English and you can type these colors with your keyboard. This is not an HTML lesson but we will have to get into this language just a bit so you can write one very simple HTML "document" that will enable you to view on your monitor the colors you are going to make. Also, after reading this, you should know how to change colors on a Web site that was written with an automatic HTML "editor."

For the newbie, a "browser" is the software you use to view the Internet with, usually Netscape or Internet Explorer.

You can simply type an HTML document and spell a color's name -- red, violet, yellow or whatever and that will usually work. But then you will have no control of the lightness, darkness or "value" of that color. Red is going to be a fire-engine red. Period. Green will be Kelly green. Period. Also, not all browsers will display written colors.

To put color in your Web site, graphics, background or text, you should use the hexadecimal numbering color system. It is more versatile, accurate and is recognized by (just about) all browsers.

Hexadecimal Colors

"Hexadecimal?" Don't be scared, boys and girls, this is a piece of cake. Hexadecimal is Greek for the number 16. Here is how the sixteen numbers work and we promise not to use any math. But there will be a test.

The wise inventors of this system decided they needed sixteen single digit numbers. That meant they would have a problem with numbers 10 and larger. So, not wanting to count on their toes, they used the alphabet, 10 is A, 11 is B ending with 15 which is F. And the zero at the other end makes sixteen numbers. Got it? Zero through F. Sixteen single-digit hexadecimal numbers.

However, sixteen colors were not enough so they elaborated on the system. They assigned two sixteen single-digit numbers to each primary color. Since there are three primary colors this means every HTML color, or gradation of a color, has six numbers. Shake them up in a jar and out would come more than 16 million colors and gradation of colors. I told you we have made this complicated.

This is too much for any browser to "see." Heck, it is too much for the human eye to see. However, I did read somewhere that sometime there will be future systems where this numbering system will be useful. But for now they had to pare it down. Browsers are limited because computer monitors have a finite number of pixels to work with. So here is what they did.

Dithered and Non-Dithered Colors

They wrote the browser codes to recognize certain six-digit color numbers by default. However, browsers have to guess at what the heck color the other number combinations are. They do not always do this successfully and when that happens the color appears grainy or pebbly. We say those colors are dithered. That is a nice country word. Grandma used to say she was dithered when she was unsteady and trembly. That is what can happen to a non-default color.

Those 216 colors the browser does reproduce faithfully by default are called "non-dithering colors."

You can write a hexadecimal color not using non-dithering numbers any which way you want but you stand the chance they will dither. Also, these off colors may look fine on your computer/browser but others could be seeing a badly dithered color because they probably have a different browser on a different computer. Stick with the 216 non-dithering colors.

The Six Digit Color Number

The designers chose every third six-digit number as a non-dithering default number. See Picture 3. The non-dithering numbers are in boldface and circled. Remember, A, B, C, D, E and F are numbers.

Picture 3. Each primary color has two columns of sixteen hexadecimal numbers. Every third row of numbers, bold and circled, are recognized by most browsers to be "non dithering" numbers by default.

The first double column of two numbers represent red. The second double column represent green and the last is blue, like this: "RRGGBB". Always. FF is the brightest number of any color. Again, three primaries combined make white. In HTML white is "#FFFFFF". And yes, "#000000" is black.

Notice the style. The HTML code for colors has no spacing. If you put in a space all the browsers in the world will choke on that, they will not know what to do with such a mess. Also, the pound sign precedes the hex number when you are writing basic HTML, and everything has to be bracketed in straight, not curley, double quotation marks (you will be using SimpleText and it does this automatically). Warning. Do these things. HTML is simple but unforgiving.

If you combine all three colors in equal amounts, such as "#999999" you will get a solid gray. The higher the numbers, the lighter the gray. Many a Web site out there has a light gray background made with <BODY BGCOLOR="#CCCCCC">.

The Colors

Write a color with the brightest number, FF, and the other two primaries at zero and you will have made a pure primary color. Primary red is "#FF0000". Fire engine red. Primary green is "#00FF00". Kelly green. Primary blue is "#0000FF". Sky blue.

Add some gray, equal amounts of the other two primary colors, to a primary and that will make a lighter color. It is like pouring white paint into some colored paint. A good example is "#FFCCCC", a feminine pink. A darker pink is "#FF9999".

Write a color with a lower number and write the other two primaries at zero. This will make a darker shade of a primary, "#000033" is midnight blue. You can lighten up midnight blue by using "#000066" or "#000099".

Using non-dithering numbers, add unequal amounts of the other two colors and you will make some interesting hues. One of my favorites is "#FFCC99". A nice shade of peach. Notice how these non-dithering color numbers always use the same number twice for each primary. A number like "#e62b48" also is a color but it just might dither.

The Test

Refer to the color chart and see if you can understand this hexadecimal system. Remember, the first two numbers are red, the second two green and the last two are blue.

What is the code for a light blue? A dark green? Here is a toughie, write a yellow.

What color is "# FF00FF"? How about "#00FFFF". Another toughie, "#66FF66".

An HTML Document

Below is a very simple HTML document that you can type into a blank SimpleText word processor window. Use the classic OS 9 or older OS. You may have to query Sherlock to find where SimpleText (one word) is hiding. When it tells you where it is, your Mac computer has to have it, just double click on the icon in Sherlock and that word processor will open. Do not use a sophisticated word processor like AppleWorks or Microsoft Word. They are too complicated for a browser. It has to be an ASCII processor like SimpleText or TextEdit on a Mac or NotePad on a PC. This is what you will type. There is only one space in the entire line.

<HTML><BODY BGCOLOR="#00FF00"></BODY></HTML>

This will fill your browser with Kelly green. The <HTML> tag tells your browser this is an HTML document. The <BODY> tag fills the open browser window. BGCOLOR="#RRGGBB" is the background color for that window. The tags with forward slashes are closing tags. Now close and save the document and give it a name like "color.html." Drag the document's icon to the far right of your desktop.

Next open a browser, go to the file menu and click on Work Offline so the browser does not dial up the Internet. If it gets away from you and it goes on line anyway, that's OK. You can do this while on line, right on top of whatever is displayed. It will not hurt a thing.

You may have to go to the bottom right of the open browser window and drag the right margin to the left a half inch if it is covering the color.html icon. Now drag and drop the icon into the browser's window. Wow! You have a screen full of your color.

Now double click on your working HTML document's icon to open it again. It will open right on top of the browser window. Delete that color number and write another in its place within the quotation marks. No spacing. The rest of the line stays the same. Anticipate the color you are going to make by referring to the color chart. Follow the style, keep the pound sign "#" and hexadecimal numbers inside of straight "", not curley quotation marks. Close and Save. Drag and drop that color on top of the previous color in the browser window or simply click on the browser's Refresh button.

Practice the hexadecimal color code and learn how red, green and blue interact with each other to make all the colors you see on the Internet, in the world! Learn and have fun!