Collapse the table of content
Expand the table of content

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


Some browsers do not recognize color names, but all browsers should recognize RGB color values and display them correctly.

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 */

A Windows Store app using JavaScript introduced support for the RGBA, HSL, and HSLA color models.

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


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



© 2017 Microsoft