previous next

Appendix C: Color Values

Most markup, such as RealText and RealPix, can use color names and hexadecimal values for color attributes. SMIL 2.0 supports the color values defined in the Cascading Style Sheets 2 (CSS2) specification, letting you use RGB values as well.

For More Information: The CSS2 color specification is located at http://www.w3.org/TR/REC-CSS2/syndata.html#value- def-color.

Using Color Names

The simplest, but most limited, way to specify a color is to use a predefined color name, as shown in the following example:

backgroundColor="blue"

RealText, RealPix, SMIL 2.0, CSS2, and HTML 4.0 all support the same 16 predefined color names, which are listed in the following table. Each color name's hexadecimal and RGB color value is included as reference, but you specify only the name when defining the color.

white
#FFFFFF
rgb(255,255,255)
silver
#C0C0C0
rgb(192,192,192)
gray
#808080
rgb(128,128,128)
black
#000000
rgb(0,0,0)
yellow
#FFFF00
rgb(255,255,0)
fuchsia
#FF00FF
rgb(255,0,255)
red
#FF0000
rgb(255,0,0)
maroon
#800000
rgb(128,0,0)
lime
#00FF00
rgb(0,255,0)
olive
#808000
rgb(128,128,0)
green
#008000
rgb(0,128,0)
purple
#800080
rgb(128,0,128)
aqua
#00FFFF
rgb(0,255,255)
teal
#008080
rgb(0,128,128)
blue
#0000FF
rgb(0,0,255)
navy
#000080
rgb(0,0,128)

Defining Hexadecimal Color Values

For most color attributes, including those in RealText, RealPix, SMIL, and embedded playback, you can specify any RGB color by using a hexadecimal (base 16) value and a leading pound sign (#), as shown in the following example:

backgroundColor="#34F9A8"

Hexadecimal numbering uses the digits 0 through 9, along with the "digits" A through F. Decimal 5 and hexadecimal 5 are the same value, for example, but decimal 10 corresponds to hexadecimal A, decimal 15 corresponds to hexadecimal F, and decimal 16 corresponds to hexadecimal 10.

Using Six-Digit Hexadecimal Values

Hexadecimal color values are typically six digits, in which the first pair of digits defines an RGB red value, the second pair specifies a green value, and the last pair specifies a blue value. Each hexadecimal pair can specify 256 colors (16 x 16), thereby replicating the RGB single-color values of 0 to 255. Each hexadecimal red, green, or blue color value ranges from 00 (no color) to FF (full color). Here are some examples:

Defining Three-Digit Hexadecimal Values

For SMIL 2.0 color values, you can use a three-digit value, in which each digit specifies a red, green, and blue RGB value, respectively, in place of any six-digit hexadecimal value:

backgroundColor="#3F8"

The three-digit value is converted to a six-digit value by duplicating each digit. The preceding three-digit value is therefore equivalent to the following value:

backgroundColor="#33FF88"

Tip: Using the three-digit notation, you can quickly specify white (#FFF) or black (#000).

Specifying RGB Color Values

Any SMIL 2.0 color attribute accepts a red/green/blue (RGB) value, as shown in the following example:

backgroundColor="rgb(128,56,10)"

Tip: Spaces between the color values are OK, so
rgb(128, 56, 10) works, too.

Using Standard RGB Color Values

In the RGB color scheme, there are 256 possible values for each of the red, green, and blue components of a color pixel on a computer screen. In RGB notation, each color value ranges from 0 (no color) to 255 (full color). A full color value combines a red, a green, and a blue value. Here are a few examples of RGB color values:

Specifying RGB Percentages

SMIL also supports percentage values for RGB coordinates, in which 0% corresponds to the value 0, and 100% corresponds to the value 255. Here is an example that is equivalent to rgb(25,191,103):

backgroundColor="rgb(10%,75%,40.5%)"

Tip: Decimal values are acceptable for percentages. In all cases, RealOne Player converts the percentage values to their closest RGB equivalents.

Tips for Defining Color Values


RealNetworks, Inc. ©2002 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks
Click here if the Table of Contents frame is not visible at the left side of your screen.
previous next