• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <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 1black(黑)#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 3aliceblue(浅灰蓝)#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 4rebeccapurple(利百加紫)#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 */ 
    

    浏览器兼容性

    特性ChromeFirefox(Gecko)Internet ExplorerOperaSafari(WebKit)
    关键字颜色1.01.0(1.0)3.0 [*]3.51.0(85)
    #RRGGBB| #RGB1.01.0(1.0)3.03.51.0(85)
    rgb()1.01.0(1.0)4.03.51.0(85)
    hsl()1.01.0(1.5)9.09.53.1(525)
    rgba()1.03.0(1.9)9.010.03.1(525)
    hsla()1.03.0(1.9)9.010.03.1(525)
    currentColor1.01.5(1.8)9.09.54.0(528)
    transparent1.03.0(1.9)9.0 [**]10.03.1(525)
    rebeccapurple38.033(33)1125.07.1
    特性AndroidFirefox Mobile(Gecko)IE PhoneOpera MobileSafari Mobile(WebKit)
    基础支持?????
    rgba()????5.1(534.46)(maybe earlier)
    rebeccapurple(Yes)33.0(33)??8

    上篇:opacity

    下篇:text-fill-color