The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

color property

The foreground color of the text of an object.

CSS Color Module Level 3, Section 3.1


color: <color>

Property values


A String that specifies or receives one of the color names or RGB values in the Color Table.

CSS information

Applies ToAll elements
Initial Valueblack

Standards information


An RGB color value normally consists of a "#" immediately followed by a triad of two-digit hexadecimal numbers specifying the intensity of the corresponding color: (R)ed, (G)reen, and (B)lue. For example, the color value "#FF0000" is rendered red because the red number is set to its highest value, "FF" (or "255", in decimal).

Each of the following style rules refer to the same color—namely, red. The three digit short-hand form is converted into the six digit form by replicating digits ("#F00" becomes "#FF0000"). The functional rgb() notation uses a comma-separated list of integer numbers from 0 to 255, or percentage values.

em { color: red }              /* natural language / CNS */
em { color: #F00 }             /* #RGB */
em { color: #FF0000 }          /* #RRGGBB */
em { color: rgb(1.0,0.0,0.0) } /* float range: 0.0 - 1.0 */
em { color: rgb(100%,0%,0%) ]  /* float range: 0.0 - 100.0 */

Windows Store apps using JavaScript support the RGB, RGBA, HSL, and HSLA color models.

The RGB color model has been extended to include an alpha channel, or transparency. The format of an RGBA value is rgba(red,green,blue,alpha). The red, green, and blue components are identical to those of the RGB color model, and are expressed as integers or percentages. The alpha component is expressed as a value between 0.0 (completely transparent) and 1.0 (completely opaque).

The format of a hue-saturation-lightness (HSL) color value is hsl(hue,saturation,lightness). In the HSL color model, hue is defined as the indicated color's angle on the color wheel (for instance, red is "0" or "360", green is "120", blue is "240", and so on). Saturation and lightness are expressed as percentages.

The HSL color model can also be extended with an alpha channel. As with the RGBA model, the HSLA value's alpha channel is expressed as a value between 0.0 and 1.0. The format of an HSLA value is hsla(hue,saturation,lightness,alpha).


The following examples use the color CSS property and the color scripting property to change the text color of an object.

This example uses a call to an embedded (global) style sheet to change the text color to "red" when an onmouseover event occurs.

Code example:

.color1 {
  color: red;
.color2 {
  color: ;


<span onmouseout="this.className='color2'" 
    style="font-size: 14px">

This example uses inline scripting to change the text color to red when an onmouseover event occurs. Code example:

<span style="font-size:14" onmouseover="'red'">

See also

Color Table



© 2014 Microsoft