TV-Friendly ColorPicker Guide

A guide to the WebTV ColorPicker, an easy-to-use tool that will help you pick colors that display well on television.

• Selecting Colors
• Selecting Background, Text or Link Colors
• "TV-Friendly" Colors
• Bugs

If Webmasters ignore these limitations, some colors and color combinations on their pages may distort when viewed on a television screen. The purpose of this tool and accompanying documentation is to help Webmasters identify problem colors and avoid them easily.

While this help file gives some background regarding colors on television, readers more interested in the topic should read our article, Avoiding Color Distortion on Television, which investigates this topic in depth.

The tool works by modifying individual colors as well as color combinations in an attempt to make them "TV-Friendly". While it is still possible to pick bad colors and combinations with this tool, the chances are greatly reduced.

Taking up most of the space on the screen are the color selection fields. There are two columns of fields, the left column containing RGB information, and the right containing HSB. The "Y" value from the "YUV" color model is on the bottom of the RGB column. The ColorPicker currently converts RGB to HSB and RGB to YUV, but only the "Y" field is displayed.

Entering data into any of these text fields will automatically cause all the other fields to update with fresh values. "Y" is the only field that you cannot manually change. And if you mis-type an entry, don't worry, the ColorPicker will find the closest usable value.

Let's go into more detail about each one of these "color spaces", and how the ColorPicker represents it.

RGB

Red, Green, Blue. The most common model of color, RGB defines a color as a combination of varying amounts of red, green and blue light. While not very intuitive, it has a basis in biology - the human eyeball has photoreceptors for red, green and blue light. Also, televisions create a picture by illuminating red, green or blue phosphors on the screen.

In the ColorPicker, values are entered into the Red, Green and Blue fields as numbers between 0 and 255.

If you prefer to enter RGB values as Web Hex triplets, all valid hex values entered into this field will automatically update the colors on the page; invalid entries will be discarded.

HSB

Hue, Saturation, Brightness. The most intuitive model of color, HSB defines a color as a combination of: its Hue, the position around a 360 degree color wheel; its Saturation, the "purity" of the color; and its Brightness, the lightness or darkness of the color. This chart may help you visualize the model.

In the ColorPicker, Hue is measured from 0 to 359 degrees, and Saturation and Brightness as percentages from 0 to 100.

YUV

Y = luminance, UV = chrominance. The most complex and specialized model of color, YUV is the color model used for constructing the color television signal. Because the "U" and "V" values are not important to this tool, they are not displayed. For more detail on the YUV color space, please read our article on avoiding color distortion on television.

In the ColorPicker, "Y" is measured from 0 to 255, and cannot be modified manually.

Browser-Safe Colors

Under the HSB selection fields, there is a link called "Browser-Safe Palette".

Clicking this will allow you to pick a color from the Netscape 216 browser safe color palette. Although these colors will not dither on a computer monitor, most of them are not "TV-Friendly". TV-Friendly colors are explained at the end of this document.

On the left-hand side of the screen, there is a pull-down menu which allows you to modify the background, text, link or visited link color.

Color choices that you make in the selection fields will only affect the component that is selected in the pull-down menu.

Certain colors and color combinations may distort when viewed on a television. By checking the "Snap to TV-Friendly Colors" option, your color choices will be instantly checked and - if necessary - modified by the ColorPicker to display well on an NTSC television screen.

Depending on your computer, the ColorPicker may take up to several seconds to make your color choices "TV-Friendly". If you find the tool too slow, consider changing colors with the "Snap To" option unchecked. When you have found a color combination you like, check the "Snap To" box, and the tool will find the closest "TV-Friendly" alternative.

How Does It Work?

The "Snap To TV-Friendly Colors" options works based on the principles described in our article, Avoiding Color Distortion on Television. These principles are:

1. Avoid colors saturated over 80%, and certain color combinations where the hue is very far apart should be kept to even lower saturations.
2. Avoid "pure white" backgrounds, as they can cause some television screens to "bow".
3. Keep the luminance (Y) values for color combinations far apart.

Any color that you choose will show up immediately in the bottom frame. If you have "Snap To TV-Friendly Colors" checked, the ColorPicker will then attempt to ensure your background and text color choices will display properly on a television. Again, depending on your computer, this may take up to several seconds.

Bugs