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.
