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.

初始值Varies from one browser to another
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值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).
是否适用于 CSS 动画yes, as a color
正规顺序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;
color: inherit;

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
color
Working Draft Defines color as animatable.
CSS Color Module Level 3
color
Recommendation Deprecated system-colors; added SVG colors; added rgba(), hsl(), hsla() functional notation.
CSS Level 2 (Revision 1)
color
Recommendation Added the orange color and the system-colors.
CSS Level 1
color
Recommendation  

Browser compatibility

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

See also

文档标签和贡献者