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: issue92top1.
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.
