CSS Reference Property

color

The color property is used to set the color of an element’s text.

The color applied to the text using the color property is also applied to the text’s decorations that may be applied to it using the text-decoration property, such as underlines, upper lines, line-throughs, etc.

The color of text can be specified using any <color> value, which means that it can also be semi-transparent or even fully transparent. Note, though, that the color can not be a gradient because a <gradient> is an <image> value, and not a color value.

The value of the color property is the value that the currentColor of an element resolves to. Check the <color> entry for details.

The color value cascades. This means that if you set the text color of an element using the color property, all children of that element will have the same text color as the one specified on their ancestor, unless specified otherwise.

Trivia & Notes

The color property is used to specify the text color of an element, but it is also used, as the specification says, to provide a potential indirect value (currentColor) for any other properties that accept color values.

The currentColor keyword is used to make properties of an element, or child elements of an element, inherit the color set by the element’s color property. In other words, it acts as the inherit value to allow inheritance of a color that would otherwise not be inherited by a property or child element.

Because of this, the following will inherit the value of color set on the element or its parent:

The alt text of images (shown when an image cannot be displayed).
A border applied to a list item (li).
The marker (or bullet) of list items and/or a number marker (for example, for an ordered list item).

Official Syntax

Syntax:
```
color: <color>
```
Initial: The initial value is browser-defined. In most browsers it is set to ‘black’.
Applies To: all elements
Animatable: yes, as a <color>

Values

<color>: See the <color> entry for a list of possible values.

Notes

The color value can not be a <gradient>
If the currentcolor keyword is set on the color property, it is treated as color: inherit.

Examples

The following are all valid color values:

color: deepPink;                /* color keyword */
color: #fff;                    /* 3-letter hexadecimal notation */
color: #f5f5f5;                 /* hexadecimal notation */
color: rgba(0,0,0);             /* rgba() notation */
color: rgba(0,0,0,0.5);         /* sets text color to a translucent black color */
color: hsl(200, 50%, 80%);      /* hsl() notation */
color: hsla(140, 30%, 50%, 0.4);/* translucent color */

Live Demo

Play with the live demo:

View this demo on the Codrops Playground

Browser Support

The color property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.