color

Article
10/10/2017

Sets the color of the text of the object.

Syntax

{ color: sColor }

Possible values

sColor

Variant that specifies a valid HTML color name or RGB value.

This property has no default value. It is inherited.

Remarks

These are different ways to specify a color (in this example, red):

em {color: red}              /* natural language / CNS */
em {color: #F00}             /* #RGB */
em {color: #FF0000}          /* #RRGGBB */
em {color: hsl:(0, 100%, 50%)}             /* #HSL */
em {color: hsla:(0, 100%, 50%, 1)}             /* #HSLA */
em {color: rgb 100%, 0, 0}  /* percentage: 0 - 100 */
em {color: rgba 255, 0, 0, 1)  /* rgb: 0 – 255; a: 0.0 – 1.0 */

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

The format of an HSL 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.

In the RGBA and HSLA color models, the alpha component (A) is expressed as a value between 0.0 (completely transparent) and 1.0 (completely opaque).

Examples

The following example uses the color 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:

<style>
    .color1 {color:red}
    .color2 {color:}
</style>
</head>
<body>
<span style="font-size:14" onmouseover="this.className='color1'" onmouseout="this.className='color2'"> . . .

Standards information

This property is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 Ee371221.xtlink_newWindow(en-us,Expression.40).png and in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies to

a, address, applet, b, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, dfn, div, dl, dt, em, fieldset, form, hn, html, i, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, li, ol, option, p, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp