Color fundamentals
By Virtual Mechanics |
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.
Source: "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.
To subscribe send an email to join.imswebtips@list.imswebtips.com
or visit www.IMSWebTips.com
for subscription information and a list of past articles.
More Articles
|
.
|
|
[an error occurred while processing this directive]
|
|
|
|
|
