<color>

版本： CSS3

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

  • 使用一个关键字
  • 使用RGB立体坐标（RGB cubic-coordinate）系统（以"#"加十六进制或者 rgb()和 rgba()函数表达式的形式）
  • 使用HSL圆柱坐标（HSL cylindrical-coordinate）系统（以 hsl()和 hsla()函数表达式的形式）

注意，以最新的 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）来决定。

色彩关键字

色彩关键字是不区分大小写的标识符，它表示一个具体的颜色，例如 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 （杏仁白） #ffebcd
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)的简写。

currentColor 关键字

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

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

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个 或3个 值。整数 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）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的 被给出。定义 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 */

浏览器兼容性

特性 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

上篇： opacity

下篇： Color Name