Last week I introduced the technical fundamentals of color.
How our eyes detect it, how we perceive it and some of the
issues that are involved when we wish to use color on our
web site. If you wish to review the article, it is posted
at: issue52top1.
This week I shall discuss how the computer uses color. This
should help you to understand the different color selection
methods, the consequences of selecting a specific color and
how that color is going to be seen by a visitor to your web
site.
I first became involved with computers and computer graphics
as a Graduate student studying Architecture at the
University of British Columbia. I used a Tektronix storage
display (it was a few years back) connected to a mainframe
to construct wire frame 3D models of buildings. Storage
displays draw bright green lines on a dark green background
similar to an Etch-a-sketch. The school of electrical
engineering got the first color pixel display. I believe it
had a resolution of 320 x 240 and displayed 16 colors. It
cost 10's of thousands of dollars not including a computer.
If you did not have a mainframe available, that was going to
cost at least a few hundred thousand dollars extra.
I got my first color terminal a couple of years later. The
technology had progressed to the point where it had 640 x
480 resolution and 256 colors but still cost over $20,000.
It was ideal as a low cost terminal for the creation of
video animation which I had become involved in.
For many years, 640x480 by 256 colors was the state of the
art. Graphics display's were and still are memory hogs. The
most significant difference with advancing technology was a
rapid decline in price as memory prices declined. Today you
can get a state of the art PC graphic card that will display
1280 x 1024 by 16.8 million colors for a few hundred
dollars. Even so, cost is still a significant factor. Only a
high end PC will include a high-end graphic card. Most low
to mid-range new computers as well as older computers will
include something less.
So what is the deference between a high-end high-resolution
color display and a low-end display? How do they work?
A graphic display breaks a picture down into pixels (Picture
Elements). Each pixel references a memory location that
stores the color that is to be displayed. The number of
pixels divided horizontally and vertically on the screen
determines a display's resolution. A 640x480 display has
307,200 pixels. In a monochrome display, each pixel can be
represented by a single bit that specifies if the pixel is
On or Off. With 1 bit of memory a 640 x 480 display would
require 38,400 bytes to store an image.
To display color, additional memory is needed for each
pixel. The number of bits available determines the number of
possible colors that can be displayed. An 8 bit display uses
307,200 bytes at 640 x 480 while a 24 bit display requires
almost 1 Meg. A high-end display at 1280 x 1024 x 36 bits
will need over 5 Meg. 5 Meg's of memory by today's standards
is no longer very expensive but only a few years ago it was.
Bits represent colors as Red, Green and Blue intensities. An
8 bit byte can represent 256 values while 16 bits can
represent 65,536 values. When using 24 bits, each of the
Red, Green and Blue values can be represented by 256
separate intensities in each of 3 bytes. This is usually
referred to as True Color because the 16.8 million possible
combinations are greater than the total number of colors
that can be distinguished by the human eye.
To use an 8 bit value to represent a color, the bits must be
divided as evenly as possible between the Red, Green and
Blue values. If 3 bits are used for Red and 3 bits are used
for Green, then 2 bits will be left for Blue. This would
provide 8 possible intensities for Red, 8 for Green and 4
for Blue to create 256 possible colors. This method however,
would not provide any flexibility in the 256 colors that
could be created and used.
To provide greater flexibility in creating colors on an 8
bit display, a color lookup table is usually used. This
works by allowing the pixel to reference one of 256 color
table locations instead of an RGB value. Each color table
location then contains a 24 bit RGB value so that any of
16.8 million colors can be created. The limitation is that
only 256 of them can be used at any one time. The color
values in the table however, can be changed whenever it is
needed. When they are, any existing pixel references to
these colors will immediately change. This will cause an
anomaly that I am sure many of you are familiar with. The
images on the display will momentarily display scrambled
colors until they can be redrawn with the new color table
values.
My apologies if all of this sounds excessively technical. My
experience however, is that many people don't understand why
things sometimes go wrong with the colors on their Web Site
and in their pictures. "It looks great on my machine. Why
does it look like something out of a spotted bog on yours?"
How can you fix it and avoid it from happening in the
future?
When someone has their display set to true color 24 bit
mode, they will nearly always see the colors that are used
on your Web Site and in your pictures. Problems usually
occur when 8 bit color tables are being used. This is
because the colors that are stored in the color table do not
match the colors that are specified on the web site.
Consider an extreme case where an 8 bit GIF image has been
rendered using 256 shades of red but the loaded color table
contains 256 shades of blue. Which colors will be displayed?
Next week I will discuss selecting colors on your Web Site
for the typical visitor. How likely is a visitor to have a
monochrome or 8 bit display? Should you design your web site
for them? Which colors are safest?
"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.
