颜色 | color (Color) - CSS 中文开发手册
colorCSS属性设置元素的文本内容和文本修饰的前景色值。它还设置currentcolor值，可用作其他属性的间接值，并且是其他颜色属性（如边框颜色）的默认值。
有关在HTML中使用颜色的概述，请参阅使用CSS将颜色应用于HTML元素。
/* Keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); /* Global values */ color: inherit; color: initial; color: unset;
请注意，该值必须是统一的color。它不能是一个<gradient>，这实际上是一种<image>类型。
| 初始值 | 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). |
| Animation type | a color |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该color属性被指定为单个color值。
值
<color>设置元素的文本和装饰部分的颜色。
正式语法
<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> 示例
以下是使段落的文字变为红色的所有方法：
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); } 规范
| Specification | Status | Comment |
|---|---|---|
| CSS Color Module Level 4The 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 TransitionsThe definition of 'color' in that specification. | Working Draft | Defines color as animatable. |
| CSS Color Module Level 3The 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 1The 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.01 | 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.02 | 10.0 | 3.1 (525) |
| rebeccapurple | 38.0 | 33 (33) | 11 | 25.0 | 7.1 |
| #RRGGBBAA, #RGBA | No support3 | 49 (49) | ? | No support4 | 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 support3 | 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) | ? | ? | ? |