color

Summary

The color property sets the color of an element’s foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a).

Overview table

Initial value: black, except in a few cases (see notes)
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: For a non-translucent color, an hexadecimal equivalent is used. Otherwise it is the RGBa equivalent
Animatable: Yes
CSS Object Model Property: color
Percentages: NA

Syntax

color: color

Values

color: CSS color value

Examples

/* Setting a paragraph color to turquoise with a name value */
p {color:turquoise}

/* Setting the same propriety with an hexadecimal value*/
p {color:#40E0D0}

/* with a RGB decimal value */
p { color: rgb(64,224,208) }

/* with a RGB percentage value */
p { color: rgb(25.1%,87.8%,81.6%) }

/* with an HSL value */
p { color: hsl(174,72%,56%) }

/* We now want our color to be 20% translucent which means a 80% opacity */

/* We can achieve this with an RGBa value */
p { color: rgba(64,224,208,0.8) }

/* Or an HSLa value */
p { color: hsla(174,72%,56%,0.8) }

View live example

Usage

 Though CSS color values are precisely defined, they may appear differently between different output devices. Most of them are not calibrated, and some browsers do not support output device color profiles. Without these, color rendering may vary significantly.

Notes

Default color

Some browsers change the default color from black to another color in their default css (user-agent stylesheet).

RGB, HSL, RGBa and HSLa support

HSL, RGBa and HSLa are not supported by older browsers (IE6-8), therefore if you do use such colours you should also provide a fallback color property that uses something similar but more widely supported, like a hex value. This should be placed either next to the modern color value but earlier in the cascade, or in a separate stylesheet hidden behind a conditional comment.

Separating foreground from background

In order to make it easier for users to see and hear content including separating foreground from background, [WCAG] indicates the following:

color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. [Guideline 1.4.1] (Level A)
The visual presentation of text and images of text has a minimum contrast ratio of at least 4.5:1, with some exceptions. [Contrast Minimum Guideline 1.4.3] (Level AA)
The visual presentation of text and images of text has an enhanced contrast ratio of at least 7:1 [Guideline 1.4.6] (Level AAA)

Related specifications

CSS3 Color Module Level 3: W3C Recommendation
Color in CSS1: W3C Recommendation