Appendix D: SMIL Color Values

SMIL supports the color values defined in the Cascading Style Sheets 2 (CSS2) specification. For any SMIL color attribute, you can use a predefined color name, a hexadecimal value, or an RGB value, letting you specify millions of colors.

Note: Markup other than SMIL may not support all the color designations described in this appendix. RealText, for example, supports color names and hexadecimal values, but not RGB values.

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

Specifying RGB Color Values

Any SMIL 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 is 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:

rgb(0,0,0) is black

rgb(255,0,0) is bright red

rgb(255,255,0) is bright yellow

rgb(0,0,255) is bright blue

rgb(255,255,255) is white

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.

Defining Hexadecimal Color Values

You can specify any RGB color with 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:

#000000 is black

#FF0000 is bright red

#FFFF00 is bright yellow

#0000FF is bright blue

#FFFFFF is white

Note: Letter case does not matter for hexadecimal digits. Hence, #ACBD5F is equivalent to #acbd5f.

Defining a Three-Digit Hexadecimal Value

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

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).

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"

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)`

Tips for Defining Color Values

Both the RGB and hexadecimal color schemes let you define the same colors. Use whichever method you prefer.

Illustration programs typically define colors uisng the RGB scheme, while the hexadecimal scheme is common to HTML markup programs. Many newer programs support both schemes, though, and let you convert easily between them. Web resources are also available to convert an RGB value to hexadecimal, and vice versa.

You can mix color names, RGB values, and hexadecimal values within a SMIL file, using RGB for some attributes and hexadecimal values for others, for example.

Most color monitors can display all the colors that you can define through SMIL. If a monitor cannot display the full range of colors, it displays the nearest approximations.

Keep in mind that some viewers may be color blind (especially between greens and reds), or may not be able to discriminate between subtle color differences. It's a good idea always to use highly contrasting colors, such as bright, light text on a dark background.