color

Summary

The color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.

Note that the color value must be a uniform color, which may include a transparency value from CSS3 onwards. It can't be a <gradient> which is an <image> in CSS.

Initial value	Varies from one browser to another
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Media	visual
Computed value	If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
Animatable	yes, as a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* A CSS Level 1 color */
color: red;

/* The only color added in CSS Level 2 (Revision 1) */
color: orange;

/* CSS Level 3 color, sometimes called a SVG or X11 color */
color: antiquewhite;

/* The color 'lime' with the 3-character dash notation */
color: #0f0;

/* The color 'lime' with the 6-character dash notation */
color: #00ff00;

/* A color using the available functional notations */
color: rgba( 34, 12, 64, 0.3);

/* Use the color of this element's direct ancestor */
color: currentcolor;

/* Global values */
color: inherit;
color: initial;
color: unset;

Values

<color>: Is a <color> value giving the color of the textual elements of the element.

Formal syntax

<color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Examples

The following are all ways to make the element's text red:

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); } 
element { color: hsla(0, 100%, 50%, 0.5); }

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'color' in that specification.	Working Draft	Defines `color` as animatable.
CSS Color Module Level 3 The definition of 'color' in that specification.	Recommendation	Deprecated system-colors; added SVG colors; added `rgba()`, `hsl()`, `hsla()` functional notation.
CSS Level 2 (Revision 1) The definition of 'color' in that specification.	Recommendation	Added the orange color and the system-colors.
CSS Level 1 The definition of 'color' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	3.0	3.5	1.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1)	6.0	6.0	1.0