The Use and Misuse of Color in Web Pages

[Copyright 2002,2003,2004,2005,2007,2012 Frank Durda IV, All Rights Reserved.
Mirroring of any material on this site in any form is expressly prohibited.
The official web site for this material is:  http://nemesis.lonestar.org
Contact this address for use clearances: clearance at nemesis.lonestar.org
Comments and queries to this address: web_reference at nemesis.lonestar.org]

Section 1: Color Television Fundamentals (NTSC)

To better understand how to select good colors and color combinations for web pages or other computer graphics work, it is essential to understand a few concepts about color television, which is the basis of computer video systems. Many techniques and optimizations were developed for color television to conserve bandwidth, and these techniques were developed based on research into how the human eye perceives light, detail and color. This information still largely applies to computer video displays, and absolutely applies if computer video is to be transmitted or stored in any color television video format.

This section provides a very brief introduction to how the NTSC color television system works and how its design applies to computer video.


Historical Details

The National Television Systems Committee (NTSC), a group of the Electronics Industries Association (EIA) developed the specifications for the color television broadcasting system that was selected for use in the United States, now known simply as "NTSC". The Federal Communications Commission adopted the NTSC system in December of 1953.

The first "consumer", mass-produced NTSC color televisions were manufactured beginning on March 25th, 1954 by the Radio Corporation of America (RCA). Initial sales were limited because these units cost over $1,000 US each and there was virtually no color programming, other than a few experimental broadcasts transmitted by the National Broadcasting Company (NBC).

Prior to the NTSC standard and the first RCA model that used that standard, there were a small number of other manufacturers that developed color television designs, some of which were produced in tiny quantities, with one design selling only one receiver. Of these pre-NTSC designs, the Columbia Broadcasting System was the main alternate contender to become the national color broadcast standard, despite it being incompatible with the existing black and white broadcast standard.

Experimentation on methods for transmitting color television began as early as 1929.

The NTSC system is scheduled to be withdrawn from broadcast use in the United States on February 17, 2009. Originally, the date was to be the end of 2006 or when the number of households with a HDTV receiver reached a certain level (whichever came later). This formula was changed in 2006 by the U.S. Congress and now the termination of NTSC broadcasts will occur at an arbitrary date in 2009 selected by Congress, regardless of market penetration at that date. (The proponents of the change believe the government can make large amounts of money auctioning the old VHF bands to wireless communication companies for wireless telephone and other purposes, although the larger aerial size required to effectively use those frequencies is a problem that Congress continues to ignore.)

To assist in the transition to the replacement broadcast system, converters are to be sold) that will receive the new broadcast signals and down-convert them into a NTSC format signal that the existing NTSC televisions can display. Consumers will have roughly one year to purchase this device or replace their NTSC receivers. In addition, the U. S. government will make available two government rebate coupons worth $40 each to apply toward the purchase of these devices. They can be requested at the web site: http://www.dtv2009.gov (NOTE: Following this link leaves this site.) As of December 2007, Walmart, Best Buy and Radio Shack are retailers that indicate that they will sell these devices, which are expected to go on sale in the first quarter of 2008.

NTSC is being replaced with a digitally-encoded broadcast system. U. S. broadcasters were issued with a license for a second channel in the mid-1990s, and it was hoped that the broadcasters would use the subsequent ten year period to install digital broadcast equipment and run the new transmissions in parallel with the old analog NTSC system until the FCC revokes the analog broadcast licenses. Many stations are now offering this simultaneous broadcast service, but a large number of stations have delayed the conversion until the last minute due to the substantial costs.

The analog NTSC system uses Amplitude Modulation (AM) to transmit the video image, and Frequency Modulation (FM) to transmit the audio. The new "digital" broadcast system for the United States uses Vestigial Side Band Modulation (VSB-32) to transmit all components of the television broadcast, and is not directly compatible with existing television equipment.

The replacement digital broadcast system still relies on many of the techniques that have been proven by the analog NTSC system, and analog NTSC will continue to be used for many years in home entertainment devices, in cable or direct satellite broadcast systems, and in other countries that also adopted the NTSC system with few or no changes.

The remainder of this discussion in this section focuses mainly on the NTSC analog system.


Video Basics - Luminance and Chrominance

To begin with, the actual image presented in color television systems can be described using two components: Luminance and Chrominance.

Luminance is a weighted sum of the three colors of light used in color television and computer displays - which are Red, Green and Blue - at a given point on the screen. A stronger Luminance signal indicates a more intense brightness of light at a given spot on the screen.

Chrominance describes the frequency of light at a given point on the screen, or in more common terms, the color of the light to be produced at a given point. The Chrominance signal specifies what color is to be shown at a given point on the display as well as how saturated or intense the shade of color that is shown. Combinations of Red, Green and Blue light produced by the video display are able to deceive the human eye into perceiving the full range of visible colors, even though only three narrow ranges of frequencies in the visible spectrum can actually be generated by the video display. (This is reasonable, since the human eye only detects light frequencies centered around what we perceive as Red, Green and Blue, although human sensitivity to wavelengths of light is greater than the narrow wavelengths that the typical video display generates.)

Together, Luminance indicates how bright a given location on the screen is, and Chrominance specifies how close to not having a color (just being "White"), or how intense the shade of color at the brightness specified by the Luminance should be.

Those familiar with printing or painting might wonder why Red, Yellow and Blue are not used in video, since these colors are usually stated (incorrectly) to be the primary ink colors. (They are really Magenta, Yellow and Cyan.) The difference is due to the fact that video is an additive light process, where light at the frequencies of Red, Green and Blue are combined to make what appears to the eye to be "White". In printing, you start with White paper and Magenta, Yellow and Cyan inks mask and take away reflectivity from the White paper, a process known as the Subtraction of Colors. Photographic film (also a subtractive system) also employ Magenta, Yellow, and Cyan dye layers.

For Addition of Colors, such as that found in lighting, things are different. Theater lighting designers had discovered many years ago that Green had to be used (instead of Yellow) with Red and Blue lights in order to obtain a more natural White area illumination when using border or "strip" lighting. Yellow, Red and Blue light combined tends to produce an Orange color, although part of this is due to the use of tungsten lighting, which already has a yellow bias. This experience was likely made known to the developers of color television. The fact that the cone in the human eye that detects the middle frequencies of visible light is more centered around wavelengths that are considered to be "green" light rather than yellow light was also a factor.

The three colors (Red, Green and Blue) found in color television are not used evenly to compute the Luminance value. This is because the human eye is much more sensitive to some frequencies of light than others. Green light, with a wavelength of 500nm or so, is detected by the human eye far more easily than the extremes of the visible spectrum, as in Red (approximately 700nm) and Violet (approximately 400nm). This unbalanced sensitivity must be replicated by color video systems to allow reproduced images to appear natural.

Studies into the sensitivity of the human eye and the sensitivity of black and white film to various frequencies of light were all used by the designers of the NTSC color television system in deciding what combination of Red, Green and Blue intensities should be considered to be "White".

A video signal containing a Luminance signal and no Chrominance signal is a black and white image. A Chrominance signal by itself has no meaning.


Transmission Signals in NTSC Video and the reduction of Color Detail

The image in NTSC Television is transmitted using three components. The first and most important is the Luminance (which is known simply as "Y"). As described above, Luminance specifies how bright a given spot on the display should be, and is the only signal used on black and white displays or receivers.

The additional components transmitted are known simply as "I" and "Q". These contain combinations of the Red, Green and Blue information to describe the color or Chrominance that should appear on the given spot on the screen. The combination of Y, I and Q signals are used by the NTSC color television receiver to recover Red, Green and Blue signals that are to be sent to the Cathode Ray Tube or other types of display electronics.

To most people, the NTSC transmission system seems somewhat convoluted, and many people wonder why the separate Red, Green and Blue signals aren't just sent as is, like they are in the television studio or in computer video equipment. The main reason is that black and white television already existed when color television was being developed, and there was a strong desire to come up with a system that remained compatible with the Luminance signal transmission system that millions of existing black and white television receivers already had.

The second, and more subtle reason is that the chrominance part of the broadcast signal has a much lower resolution than the luminance signal. The number of lines of horizontal resolution in NTSC broadcast video is about 333 lines across the screen. Think of being able to display a maximum of 166.5 pairs of alternating black and white stripes, drawn vertically on the screen. That's the horizontal luminance resolution, so it only covers the resolution of the black and white detail of the image. Many television makers neglect to mention the "luminance" word when giving their specifications, and incorrectly describe their lines of resolution specification value as covering everything. It does not.

While the luminance resolution is up to 333 lines (in the broadcast standard), the chrominance part of the NTSC image has a horizontal resolution ranging between 25 and 125 lines. The chrominance resolution depends entirely on the colors that are being displayed horizontally adjacent to a given point on the display, and the saturation of that color. The PAL color system used in many countries also has far lower chrominance resolution for the picture being transmitted than it does for luminance resolution.

The decision to have less resolution for the color part of the signal was not arbitrary. Again, there was the important goal to remain compatible with the existing black and white televisions and their existing radio signal tuners, so the amount of bandwidth available for the entire video signal (black and white and color) was already established.

The FCC frequency allocations for the United States had television signals transmitted in 6 MHz "channels", and almost 2 MHz of each 6 MHz was unused to help guard adjacent channels from interfering with one another. This was a significant problem in the early days of television and radio, when the electronics of the transmitter and receiver were subject to frequency drift and other accuracy problems. So, the entire usable broadcast signal had around 4 MHz of bandwidth to work with to transmit everything.

In trying to address the issue of having a limited amount of bandwidth, research studies demonstrated that the human eye and brain are more sensitive to changes in brightness detail than changes in color detail. The result was that of the 4 MHz usable bandwidth allocated to each broadcast television channel, almost 88% continued to be used for Luminance (brightness) detail, and the remainder is used for audio and the new Chrominance (color) information.

It should be mentioned that all modern MPEG digital coding systems also rely on a similar "sub-sampled color" technique, with the majority of the data bits being used for conveying black and white luminance information. In fact, greatly reducing color detail is one of the first steps of all MPEG video encoding, a process that discards all but coarse color details in order to reduce the size of the data that is needed to approximately represent the original image.

The new HDTV broadcast system in the United States will continue to use 6 MHz channels even though HDTV broadcasts will not have to co-exist with the analog NTSC system after the licenses are withdrawn at some point after 2006. Thanks to more advanced modulation techniques and the use of data compression, considerably more information can be transmitted within the 6 MHz channel by the HDTV system than could be sent using the older analog NTSC system.


Computing Y, I and Q from Luminance and Chrominance in NTSC Video

To compute the Luminance signal (which is known as "Y"), circuitry at the television station or transmitter takes Red, Green and Blue signals from the television camera or other equipment and generates Y using this formula:
Y Luminance = (Red x 0.30) + (Green x 0.59) + (Blue x 0.11)
This weighting is also built into the circuitry of the video graphics circuitry in computer video systems so that it should be impossible to have the total of signal strength emitted by a video card exceed 100%. This means that when a color is specified in computer software or in HTML, an increment of one for the setting for Green brightness causes a much larger increase in overall brightness on the display than an increment of one in the Red or Blue colors.

(Note: Some televisions and computer monitors allow you to deviate from these values slightly by changing the "Color Temperature". Web page designers should avoid designing colors based on any custom temperature settings that they may have set on their own monitor.)

The other two signals that are transmitted by a television station that are used to represent Chrominance (color) are generated using these formulas:

Q Signal = (Red x 0.21) - (Green x 0.52) + (Blue x 0.31)
I Signal = (Red x 0.60) - (Green x 0.28) - (Blue x 0.32)
Here is a set of standard NTSC "color bars", followed by "luminance bars". If both sets of bars were displayed on a black and white display, the shades of gray in each vertical column would be identical. In other words, the area that appears as Green, when shown on a black and white monitor, would appear as the same shade of gray as that which appears directly below the Green color. This is because each shade of Gray that is shown has the same level of Luminance as the color directly above. The luminance bars merely lack the Chrominance component.

The numerical values that create each color or luminance shade in NTSC television are shown, as well as what the the equivalent computer display settings are.

White








(R=+1.00)
(G=+1.00)
(B=+1.00)
("#FFFFFF")

(Y=+1.00)
(Q=+0.00)
(I=+0.00)
Yellow








(R=+1.00)
(G=+1.00)
(B=+0.00)
("#FFFF00")

(Y=+0.89)
(Q=-0.31)
(I=+0.32)
Cyan








(R=+0.00)
(G=+1.00)
(B=+1.00)
("#00FFFF")

(Y=+0.70)
(Q=-0.21)
(I=-0.60)
Green








(R=+0.00)
(G=+1.00)
(B=+0.00)
("#00FF00")

(Y=+0.59)
(Q=-0.52)
(I=-0.28)
Magenta








(R=+1.00)
(G=+0.00)
(B=+1.00)
("#FF00FF")

(Y=+0.41)
(Q=+0.52)
(I=+0.28)
Red








(R=+1.00)
(G=+0.00)
(B=+0.00)
("#FF0000")

(Y=+0.30)
(Q=+0.21)
(I=+0.60)
Blue








(R=+0.00)
(G=+0.00)
(B=+1.00)
("#0000FF")

(Y=+0.11)
(Q=+0.31)
(I=-0.32)








(Y=+1.00)
("#FFFFFF")








(Y=+0.89)
("#E3E3E3")








(Y=+0.70)
("#B3B3B3")








(Y=+0.59)
("#969696")








(Y=+0.41)
("#696969")








(Y=+0.30)
("#4D4D4D")








(Y=+0.11)
("#1C1C1C")
(Information on printing color tables on color printers can be found here.)

Note: On video systems that only support displaying 256 colors at a time, the gray scale values may not be displayed exactly as intended.

You may feel that the discussion is veering away from your area of interest, but write down the Y Luminance formula shown above. Now that you know it, you will be using it for years.


This I and Q stuff is confusing. Why did they do it this way?

Don't worry about the Chrominance formulas for Q and I used in NTSC television. There were included here for completeness, but the reason that they exist at all is because they provided a sneaky way for the color television designers to broadcast three pieces of information (how strong Red, Green and Blue color combinations are to be) with just three numbers (Y, I, and Q), and do it in a way that remained compatible with the existing black and white televisions, which already relied on the Y signal. This meant that all the existing black and white television systems would continue to be usable and color programs displayed on them would come out looking reasonable.

In the analog NTSC color television receiver, a lot of complexity is there just to receive the I and Q signals from the broadcast signal, and that circuitry has a critical need to maintain a tight synchronization to the timing of the transmitted color signals. Once I and Q are recovered, they and the Y signal are used to re-create the Red, Green and Blue signals to control the image displayed by the picture tube.



Section 2: Luminance, Luminance, Luminance! (Next Section)

Appendix F: Full Screen Color Bars These are useful for computer monitor or video alignment when a real color bar generator isn't available.

Return to The Use and Misuse of Color in Web Pages - Index


Valid HTML 4.01!

[Copyright 2002,2003,2004,2005,2007,2012 Frank Durda IV, All Rights Reserved.
Mirroring of any material on this site in any form is expressly prohibited.
The official web site for this material is:  http://nemesis.lonestar.org
Contact this address for use clearances: clearance at nemesis.lonestar.org
Comments and queries to this address: web_reference at nemesis.lonestar.org]