color

The color CSS property sets the foreground color value of an element's text content and text decorations. It also sets the <currentcolor> value, which may be used as an indirect value on other properties, and is the default for other color properties, such as border-color.

/* Keyword values */
color: currentcolor;
/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> values */
color: #0f0;
color: #00ff00;
color: #0f0a;
color: #00ff0080;
/* <rgb()> values */
color: rgb(34, 12, 64, 0.3);
color: rgba(34, 12, 64, 0.3);
color: rgb(34 12 64 / 0.3);
color: rgba(34 12 64 / 0.3);
/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.3);
color: hsla(30, 100%, 50%, 0.3);
color: hsl(30 100% 50% / 0.3);
color: hsla(30 100% 50% / 0.3);
/* Global values */
color: inherit;
color: initial;
color: unset;

Note that the value must be a uniform color. It can't be a <gradient>, which is actually a type of <image>.

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)`.
Animation type	a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

The color property is specified as a single color value.

Values

<color>: Sets the color of the textual and decorative parts of the element.

Formal syntax

<color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

The following are all ways to make a paragraph's text red:

p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }
/* 50% translucent */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

Specifications

Specification	Status	Comment
CSS Color Module Level 4 The definition of 'color' in that specification.	Editor's Draft	Adds commaless syntaxes for the `rgb()`, `rgba()`, `hsl()`, and `hsla()` functions. Allows alpha values in `rgb()` and `hsl()`, turning `rgba()` and `hsla()` into (deprecated) aliases for them. Adds color keyword `rebeccapurple`. Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. Adds `hwb()`, `device-cmyk()`, and `color()` functions.
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	Deprecates system-colors. Adds SVG colors. Adds the `rgba()`, `hsl()`, and `hsla()` functions.
CSS Level 2 (Revision 1) The definition of 'color' in that specification.	Recommendation	Adds 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 (WebKit)
keywords colors	1.0	1.0 (1.0)	3.0^[1]	3.5	1.0 (85)
`#RRGGBB`, `#RGB`	1.0	1.0 (1.0)	3.0	3.5	1.0 (85)
`rgb()`	1.0	1.0 (1.0)	4.0	3.5	1.0 (85)
`hsl()`	1.0	1.0 (1.5)	9.0	9.5	3.1 (525)
`rgba()`, `hsla()`	1.0	3.0 (1.9)	9.0	10.0	3.1 (525)
`currentcolor`	1.0	1.5 (1.8)	9.0	9.5	4.0 (528)
`transparent`	1.0	3.0 (1.9)	9.0^[2]	10.0	3.1 (525)
`rebeccapurple`	38.0	33 (33)	11	25.0	7.1
`#RRGGBBAA`, `#RGBA`	No support^[3]	49 (49)	?	No support^[4]	9.1
`rgba()` and `hsla()` as aliases of `rgb()` and `hsl()` Space-separated function parameters rather than commas Percentages for alpha values Angles for the hue component in `hsl()` colors.	?	52 (52)	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
`rgba()`, `hsla()`	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
`rebeccapurple`	(Yes)	33.0 (33)	?	?	8
`#RRGGBBAA`, `#RGBA`	No support^[3]	49.0 (49)	No support	No support	?
`rgba()` and `hsla()` as aliases of `rgb()` and `hsl()` Space-separated function parameters rather than commas Percentages for alpha values Angles for the hue component in `hsl()` colors.	?	52.0 (52)	?	?	?

[1] The 'e'-grey colors (with an e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey) are only supported since IE 8.0. IE 3 to IE 7 only support the 'a' variants: gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray.

[2] IE 7-8 supports the transparent keyword only for background and border. color: transparent; is drawn black in IE. IE6 renders transparent borders as black, as well.

[3] This feature is supported since Chrome 52.0 behind the "Experimental Web Platform features" flag in chrome://flags. See Chromium bug 76362.

[4] This feature is supported Opera 39.0 behind the "Enable experimental Web Platform features" flag in chrome://flags.