<color>

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一种颜色可以用以下任意的方式来描述:

注意,以最新的 CSS3 颜色为准,公认颜色值列表已增加到成形的规范中。

一个与 sRGB 空间中色彩相关联的 <color> 值也有一个阿尔法通道(alpha-channel)坐标,即透明度值,来标明颜色如何与它的背景色混合(composite)

尽管 CSS 颜色值被精确定义,但在不同的输出设备上仍然有可能显示不一。它们大多数是不可被校准的,而且有些浏览器不支持输出设备的色彩配置(color profile)。除此之外,颜色渲染可以丰富多彩。

注意: W3C 的 WCAG 2.0(网页内容可访问性准则 2.0)介绍文档中强烈建议网页制作人员不要使用颜色作为唯一的方式去传达某个具体的信息,行为或结果。一些用户在分辨颜色上存在问题从而所传达的信息可能不被理解。当然,这并不是要阻止颜色的使用,只有在使用颜色作为唯一的方式去描述一些信息时才应当避免。

窜改

CSS 数据类型 <color> 的值可以被窜改以便表演动画或创建 <gradient> (渐变)值。在那种情况下,它们基于红,绿,蓝各部分来窜改,各自用一个浮点实数来控制。注意,颜色的窜改发生在预乘阿尔法值的标准RGB色彩空间(alpha-premultiplied sRGBA color space)以防止显示意外的灰色调。在动画中,窜改的速率由动画相关的时间函数(timing function)来决定。

取值

这里有几种方式来描述一个 <color> 值。

色彩关键字

色彩关键字是不区分大小写的标识符,它表示一个具体的颜色,例如 red, blue, brown, lightseagreen 。使用名称来表述颜色,尽管(颜色的)名称基本上是人工(命名)的。可接受值的列表经由不同的规范而变化了许多:

  • CSS 标准 1 只接受 16 个基本颜色,因它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors (视频图形阵列色彩)。
  • CSS 标准 2 增加了 orange 关键字。
  • 从一开始,浏览器接受其它的颜色,由于一些早期浏览器是 X11 应用程序,这些颜色大多数是 X11 命名的颜色列表,虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准;CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩张的颜色关键字X11 颜色SVG 颜色

在使用关键字时有几个需要留意的注意事项:

  • 除了通常的 16 个 HTML 基本颜色,其它的不能被用于 HTML 。HTML 将通过一个特定的计算程序转换这些未知的值,这将导致成为完全不同的颜色。这些关键字应只被用于 SVG 和 CSS 。
  • 未知的关键字会让 CSS 属性无效。无效的属性将被忽略,该颜色将没有作用。这是一个和 HTML 相比不同的行为。
  • 未使用关键字定义的颜色在 CSS 中有任意的透明度,它们是单实色。
  • 一些关键字表示同样的颜色:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • 虽然关键字的名称取自常见的 X11 颜色名,然而由于生产商为具体的硬件所做的定制,颜色可能与 X11 系统上相应的颜色有所偏差。
规范 颜色 关键字 RGB 十六进制数 实样
CSS Level 1   black(黑) #000000  
  silver(银) #c0c0c0  
  gray[*](灰) #808080  
  white(白) #ffffff  
  maroon(褐) #800000  
  red(红) #ff0000  
  purple(紫) #800080  
  fuchsia(紫红) #ff00ff  
  green(绿) #008000  
  lime(绿黄) #00ff00  
  olive(橄榄绿) #808000  
  yellow(黄) #ffff00  
  navy(藏青) #000080  
  blue(蓝) #0000ff  
  teal(青) #008080  
  aqua(水绿) #00ffff  
CSS Level 2 (Revision 1)   orange(橙) #ffa500  
CSS Color Module Level 3   aliceblue(浅灰蓝) #f0f8ff  
  antiquewhite(古董白) #faebd7  
  aquamarine(海蓝) #7fffd4  
  azure(蔚蓝) #f0ffff  
  beige(浅褐) #f5f5dc  
  bisque(橘黄) #ffe4c4  
  blanchedalmond(杏仁白) #ffe4c4  
  blueviolet(蓝紫) #8a2be2  
  brown(褐) #a52a2a  
  burlywood(原木色) #deb887  
  cadetblue(灰蓝) #5f9ea0  
  chartreuse(黄绿) #7fff00  
  chocolate(巧克力色) #d2691e  
  coral(珊瑚红) #ff7f50  
  cornflowerblue(矢车菊蓝) #6495ed  
  cornsilk(玉米穗黄) #fff8dc  
  crimson(深红) #dc143c  
  darkblue(深蓝) #00008b  
  darkcyan(深青) #008b8b  
  darkgoldenrod(暗金) #b8860b  
  darkgray[*](深灰) #a9a9a9  
  darkgreen(深绿) #006400  
  darkgrey[*](深灰) #a9a9a9  
  darkkhaki(暗黄褐) #bdb76b  
  darkmagenta(深紫) #8b008b  
  darkolivegreen(深橄榄绿) #556b2f  
  darkorange(深橙) #ff8c00  
  darkorchid(深兰花紫) #9932cc  
  darkred(深红) #8b0000  
  darksalmon(深橙红) #e9967a  
  darkseagreen(深海绿) #8fbc8f  
  darkslateblue(暗灰蓝) #483d8b  
  darkslategray[*](墨绿) #2f4f4f  
  darkslategrey[*](墨绿) #2f4f4f  
  darkturquoise(暗宝石绿) #00ced1  
  darkviolet(深紫罗兰) #9400d3  
  deeppink(深粉红) #ff1493  
  deepskyblue(深天蓝) #00bfff  
  dimgray[*](暗灰) #696969  
  dimgrey[*](暗灰) #696969  
  dodgerblue(遮板蓝) #1e90ff  
  firebrick(砖红) #b22222  
  floralwhite(花白) #fffaf0  
  forestgreen(丛林绿) #228b22  
  gainsboro(浅灰) #dcdcdc  
  ghostwhite(幽灵白) #f8f8ff  
  gold(金) #ffd700  
  goldenrod(橘黄) #daa520  
  greenyellow(黄绿) #adff2f  
  grey(灰) #808080  
  honeydew(蜜瓜色) #f0fff0  
  hotpink(亮粉) #ff69b4  
  indianred(印第安红) #cd5c5c  
  indigo(靛蓝) #4b0082  
  ivory(象牙白) #fffff0  
  khaki(卡其色) #f0e68c  
  lavender(淡紫) #e6e6fa  
  lavenderblush(淡紫红) #fff0f5  
  lawngreen(草绿) #7cfc00  
  lemonchiffon(粉黄) #fffacd  
  lightblue(淡蓝) #add8e6  
  lightcoral(浅珊瑚色) #f08080  
  lightcyan(淡青) #e0ffff  
  lightgoldenrodyellow(浅金黄) #fafad2  
  lightgray[*](浅灰) #d3d3d3  
  lightgreen(浅绿) #90ee90  
  lightgrey[*](浅灰) #d3d3d3  
  lightpink(淡粉) #ffb6c1  
  lightsalmon(浅肉色) #ffa07a  
  lightseagreen(浅海绿) #20b2aa  
  lightskyblue(浅天蓝) #87cefa  
  lightslategray[*](浅青灰) #778899  
  lightslategrey[*](浅青灰) #778899  
  lightsteelblue(浅钢蓝) #b0c4de  
  lightyellow(浅黄) #ffffe0  
  limegreen(酸橙绿) #32cd32  
  linen(亚麻色) #faf0e6  
  mediumaquamarine(中绿) #66cdaa  
  mediumblue(中蓝) #0000cd  
  mediumorchid(间兰花紫) #ba55d3  
  mediumpurple(中紫) #9370db  
  mediumseagreen(间海绿) #3cb371  
  mediumslateblue(中暗蓝) #7b68ee  
  mediumspringgreen(中春绿) #00fa9a  
  mediumturquoise(中海湖蓝) #48d1cc  
  mediumvioletred(中紫罗兰) #c71585  
  midnightblue(午夜蓝) #191970  
  mintcream(薄荷乳白) #f5fffa  
  mistyrose(粉玫瑰红) #ffe4e1  
  moccasin(鹿皮色) #ffe4b5  
  navajowhite(纳瓦白) #ffdead  
  oldlace(浅米色) #fdf5e6  
  olivedrab(橄榄褐) #6b8e23  
  orangered(橙红) #ff4500  
  orchid(兰花紫) #da70d6  
  palegoldenrod(灰菊黄) #eee8aa  
  palegreen(苍绿) #98fb98  
  paleturquoise(苍宝石绿) #afeeee  
  palevioletred(苍紫罗兰) #db7093  
  papayawhip(木瓜色) #ffefd5  
  peachpuff(桃色) #ffdab9  
  peru(秘鲁色) #cd853f  
  pink(粉) #ffc0cb  
  plum(李子色) #dda0dd  
  powderblue(粉蓝) #b0e0e6  
  rosybrown(玫瑰粽) #bc8f8f  
  royalblue(宝蓝) #4169e1  
  saddlebrown(马鞍棕) #8b4513  
  salmon(鲑肉色) #fa8072  
  sandybrown(沙褐色) #f4a460  
  seagreen(海绿) #2e8b57  
  seashell(贝壳白) #fff5ee  
  sienna(赭) #a0522d  
  skyblue(天蓝) #87ceeb  
  slateblue(青蓝) #6a5acd  
  slategray[*](青灰) #708090  
  slategrey[*](青灰) #708090  
  snow(雪白) #fffafa  
  springgreen(春绿) #00ff7f  
  steelblue(铁青) #4682b4  
  tan(棕褐) #d2b48c  
  thistle(苍紫) #d8bfd8  
  tomato(番茄红) #ff6347  
  turquoise(蓝绿) #40e0d0  
  violet(紫罗兰色) #ee82ee  
  wheat(麦色) #f5deb3  
  whitesmoke(烟白) #f5f5f5  
  yellowgreen(黄绿) #9acd32  
CSS Color Module Level 4   rebeccapurple(利百加紫) #663399  

(译者注:颜色译名仅供参考。)

颜色 rebeccapurple 等价于颜色 #639,关于为何引进此颜色的更多信息可在由 Trezy "Honoring a Great Man" 发布的 Codepen 博客上找到。

transparent 关键字

transparent 关键字表示一个完全透明的颜色,即该颜色看上去将是背景色。从技术上说,它是带有阿尔法通道为最小值的黑色,是 rgba(0,0,0,0) 的简写。

过去的注释
transparent 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色。它是一个特殊的关键字,可以代替一个普通的 <color> 值用于两个 CSS 属性中: backgroundborder。本质上使用它可以覆盖一个继承的单色。

随着经由阿尔法通道(alpha channels)透明度的支持,transparent 在 CSS Colors Level 3 中被重新定义为一个真实的颜色,允许在任何一个需要 <color> 值的地方使用,像 color 属性。[**]

currentColor 关键字

currentColor 关键字代表原始的 color 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

它也能用于那些继承了元素的 color 属性计算值的属性,相当于在这些元素上使用 inherit 关键字,如果这些元素有该关键字的话。

实样

该行的颜色(一个填充颜色的 div)应用它继承自父级的 color 属性。

实样 1
<div style="color:darkred">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div> 

实样 2
<div style="color:blue">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div> 

rgb()

颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义:

十六进制符号 #RRGGBB#RGB
  • "#" 后跟6位十六进制字符(0-9, A-F)。
  • "#" 后跟3位十六进制字符(0-9, A-F)。
三位数的 RGB 符号(#RGB)和六位数的形式(#RRGGBB)是相等的。
例如, #f03#ff0033 代表同样的颜色。
函数符 rgb(R,G,B)
"rgb" 后跟3个 <integer> 或3个 <percentage> 值。
整数 255 相当于 100%,和十六进制符号里的 F 或 FF 。
/* These examples all specify the same RGB color: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

hsl()

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观:你可以估算你想要的颜色,然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变明度/暗度和饱和度)。

色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的 <number> 被给出。定义 red=0=360,其它颜色分散于圆环,所以 green=120, blue=240,以此类推。作为一个角度,它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100% 是满饱和度,而 0% 是一种灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是“一般的”。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

rgba()

颜色可以使用 rgba() 函数符在红-绿-蓝-阿尔法(RGBa)模式下被定义。RGBa 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。
a 表示透明度:0=透明;1=不透明;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

hsla()

颜色可以使用 hsla() 函数符在色相-饱和度-明度-阿尔法(HSLa)模式下被定义。HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。
a 表示透明度:0=透明;1=不透明;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 

系统颜色

并非所有的系统都支持全部的系统颜色。 用于公共的网页。

ActiveBorder
Active window border.
ActiveCaption
Active window caption.  Should be used with CaptionText foreground color.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face background color for 3-D elements that appear 3-D due to one layer of surrounding border.  Should be used with ButtonText foreground color.
ButtonHighlight
The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow
The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText
Text on push buttons.  Should be used with ButtonFace or ThreeDFace background color.
CaptionText
Text in caption, size box, and scrollbar arrow box.  Should be used with ActiveCaption background color.
GrayText
Grayed (disabled) text.
Highlight
Item(s) selected in a control.  Should be used with HighlightText foreground color.
HighlightText
Text of item(s) selected in a control.  Should be used with Highlight background color.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.  Should be used with InactiveCaptionText foreground color.
InactiveCaptionText
Color of text in an inactive caption.  Should be used with InactiveCaption background color.
InfoBackground
Background color for tooltip controls.  Should be used with InfoText foreground color.
InfoText
Text color for tooltip controls.  Should be used with InfoBackground background color.
Menu
Menu background.  Should be used with MenuText or -moz-MenuBarText foreground color.
MenuText
Text in menus.  Should be used with Menu background color.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDFace
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.  Should be used with ButtonText foreground color.
ThreeDHighlight
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDLightShadow
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
Window
Window background.  Should be used with WindowText foreground color.
WindowFrame
Window frame.
WindowText
Text in windows.  Should be used with Window background color.

Mozilla System Color Extensions

-moz-ButtonDefault
The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget.  Should be used with -moz-CellHighlightText foreground color.  See also -moz-html-CellHighlight.
-moz-CellHighlightText
Text color for a selected item in a tree.  Should be used with -moz-CellHighlight background color.  See also -moz-html-CellHighlightText.
-moz-Combobox
Background color for comboboxes.  Should be used with -moz-ComboboxText foreground color.  In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
Background Text color for comboboxes.  Should be used with -moz-ComboboxText foreground color.  In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Background color for dialog boxes.  Should be used with -moz-DialogText foreground color.
-moz-DialogText
Text color for dialog boxes.  Should be used with -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
Background color for even-numbered rows in a tree.  Should be used with -moz-FieldText foreground color.  In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.
-moz-Field
textfield background color.  Should be used with -moz-FieldText foreground color.
-moz-FieldText
textfield foreground color.  Should be used with -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background colors.
-moz-html-CellHighlight
Background color for highlighted item in HTML select.  Should be used with -moz-html-CellHighlightText foreground color.  Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText
Background color for highlighted item in HTML select.  Should be used with -moz-html-CellHighlight background color.  Prior to Gecko 1.9, use -moz-CellHighlightText.
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover
Background color for hovered menu item.  Often similar to Highlight.  Should be used with -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText
Foreground color for hovered menu item.  Often similar to HighlightText.  Should be used with -moz-MenuHover background color.
-moz-MenuBarText
Foreground color for text in menu bars.  Often similar to MenuText.  Should be used on top of Menu background.
-moz-MenuBarHoverText
Foreground color for hovered text in menu bars.  Often similar to -moz-MenuHoverText.  Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext
default platform hyperlink color
-moz-OddTreeRow
Background color for odd-numbered rows in a tree.  Should be used with -moz-FieldText foreground color.  In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-EvenTreeRow.
-moz-win-communicationstext
Should be used for text in objects with appearance:-moz-win-communications-toolbox.
-moz-win-mediatext
Should be used for text in objects with appearance:-moz-win-media-toolbox.

Mozilla Color Preference Extensions

-moz-activehyperlinktext
User's preference for text color of active links.  Should be used against default document background.
 
-moz-default-background-color
User's preference for document background-color.
 
-moz-default-color
User's preference for text color.
-moz-hyperlinktext
User's preference for text color of unvisited links.  Should be used against default document background. 
-moz-visitedhyperlinktext
User's preference for text color of visited links.  Should be used against default document background.

规范

规范 状态 注释
CSS Color Module Level 4
<color>
Editor's Draft 添加 rebeccapurple.
CSS Color Module Level 3
<color>
Recommendation 废弃系统颜色;添加 SVG 颜色;添加 rgba(), hsl(), hsla() 函数符。
CSS Level 2 (Revision 1)
<color>
Recommendation 添加 orange 颜色和系统颜色。
CSS Level 1
<color>
Recommendation 初始定义

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
关键字颜色 1.0 1.0 (1.0) 3.0 [*] 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() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)
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 [**] 10.0 3.1 (525)
rebeccapurple 38.0 33 (33) 11 25.0 7.1
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile (WebKit)
基础支持 ? ? ? ? ?
rgba() ? ? ? ? 5.1(534.46) (maybe earlier)
rebeccapurple (Yes) 33.0 (33) ? ? 8

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

[**]  IE 7-8 只对 backgroundborder 支持 transparent 关键字。在 IE 下 color:transparent 被绘制成黑色。IE6 渲染透明边框也是黑色。

参见

文档标签和贡献者

 此页面的贡献者: xhlsrj, Sebastianz, liweimin, fscholz, KwenString, FredWe
 最后编辑者: xhlsrj,