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
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.
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:
alttext of images (shown when an image cannot be displayed).
- A border applied to a list item (
- The marker (or bullet) of list items and/or a number marker (for example, for an ordered list item).
- Initial: The initial value is browser-defined. In most browsers it is set to ‘black’.
- Applies To: all elements
Animatable: yes, as a
<color>entry for a list of possible values.
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 */
Play with the live demo:View this demo on the Codrops Playground
color property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.