Using color on a web site is something many of us take for granted. Simply select the color of the text, background, image etc. and include it on your web page. Color however, is a very complex topic. Just how many colors are there? How are they specified? How many colors are available on a
visitor's computer? How do you specify the color of the background, links, filled objects etc?
The technical aspect of color is something I am quite experienced with. I have written a lot of graphics software from Ray Tracing to Compositing. I think it would be useful for many of you to understand just a bit about how color works in order to be better able to use it more effectively and creatively.
The first place to start is with the human eye. From the front the Cornea (lens) focuses light on the Retina at the back. The Retina is composed of Rods and Cones that are sensitive to four types of light. Rods detect light intensity and are especially useful in dim light. There are three types of Cones that are sensitive to brighter light at different wavelengths. These are approximately equivalent to Red, Green and Blue although there is some overlap. Color blindness is caused when some of the cones are not fully operational. It is rare for someone to have none of the cones working. Usually a color-blind person has some or all cones working but they are deficient in some way. They can
see color but are more sensitive to some wavelengths than others. A common condition is to see Blue quite well but to have difficulty distinguishing Red and Green.
Without being insensitive, should you care?
Over 8% of the population (mostly males) have some kind of color vision problem. What will they see when they look at your web site. If you mix a lot of Red and Green components they may be invisible to many of your visitors.
A simple but effective solution to make your web site color friendly is to use intensity to distinguish the major components. This works well because very few people are missing their Rods and can consequently distinguish gray scales quite well. If you have the ability to set or use a monochrome monitor, use it to view and test your site. If you don't have monochrome capabilities available, simply try to avoid using different colors of the same intensity, especially adjacent to each other.
But who would put red text on a green background? I did at is52fig1.htm . I trust it makes the point.
Another factor to consider is that the eye is far more sensitive to bright light than dim light. This is probably due to the fact that the eye's Cones need relatively bright light to operate. As the light intensity is increased the cones start to work. The eye consequently has an increased capability at distinguishing subtle changes in contrast at higher light levels.
This differing sensitivity to light at different intensity (and color wavelength) is often compensated for by hardware manufacturers and software developers through a technique called gamma correction. Gamma correction weights colors in order to create a perceived linear change. Because of the many different variables involved, this is often difficult to achieve.
From a web designers perspective however, it means that brighter colors are far more effective for subtle design elements than dim colors.
Something that confuses many graphic artists that are new to computers (or computer people that are new to paint) is that the primary colors are different between the two different media. For painters the primary colors are Red, Yellow and Blue. On a computer they are Red, Green and Blue. Although this may seem contradictory, in fact it is not.
Light viewed from a computer monitor is direct light. It is the same as looking directly into a flashlight or at a bulb. Light from paint is reflected. White light is composed of Red Green and Blue wavelengths. When a white light strikes a Red surface, the Blue and Green components are absorbed by the surface so that only the Red light is reflected. The paint is consequently working in a negative fashion to the light. Yellow paint only absorbs Blue light leaving the Red and Green to be reflected. When Yellow paint is mixed with Blue paint, The Blue absorbs the Red wavelength while the Yellow absorbs the Blue wavelength. This only leaves Green to be reflected.
For an artist wishing to mix colors for a web site, the important thing to remember is that colors are additive on a computer. As you add more Red, Green and Blue, the brighter the color will become until it is pure white at full RGB intensity. The secondary colors are Yellow (Red and Green), Cyan (Green and Blue) and Magenta (Blue and Red).
There are several other color models that are sometimes available. These include HSL (Hue, Saturation and Lightness), HSV (Hue, Saturation and Value) and of course Color Tables. HSV and HSL are two variations of a color description system that is intended to be more intuitive for graphic artists. A color table is simply a palette of pre-defined colors. In all cases they are resolved into RGB
values which is the basis of all color used on a computer.
Next week I will continue the topic with a look at how color is actually used by the computer.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
