热门问题
时间线
聊天
视角

网页颜色

用于设计网页的颜色 来自维基百科,自由的百科全书

网页颜色
Remove ads

网页颜色是在万维网显示网页时使用的颜色,可以用三种方法表示:RGB十六进制格式或者在一些情况下根据其常见的英文名称。十六进制的颜色通常是以井号(#)开头的[1][2]。颜色是根据其红色、绿色和蓝色成分的强度指定的,每一成分呈现为八个比特。这样,在sRGB色域内,指定一个网页颜色共有24比特,共有16777216种颜色可以表示。一些网页颜色可能还有透明度,默认情况下颜色是完全不透明的,即不透明度为1。

Thumb
网页颜色表

CSS中,不在sRGB色域内的颜色也可以表示,其红色、绿色和蓝色成分可能是负数或者超过100%,这样的颜色空间在理论上是没有边界的[3]。指定非RGB的颜色需要在CSS中调用rgb()函数,无法使用十六进制语法表示。

网页颜色有明确的色度定义,sRGB[4],选择这个是因为它与现实的计算机显示器和视觉条件相似,以尽可能渲染出与指定值相似的颜色而不需要进行特定的颜色管理,但一些高级的用户代理会需要颜色管理以提供更广的色域。

Remove ads

十六进制数字表示法

RGB颜色可以使用以井号开头的六位(或八位)十六进制数字(0-F)表示,相当于三个或者四个字节,每个字节相当于十进制数的0至255。三个字节分别表示红色、绿色和蓝色,第四个字节是可选的,表示Alpha通道

例如,白色的十六进制表示方法是#ffffff,表示其红、绿、蓝三种成分的值均为最大值255,相当于rgb(255 255 255)。又如,一种颜色在十进位中红、绿、蓝的成分分别是36、104、160( ),在十六进制中则相当于24、68、A0因此这个颜色的表示方法为#2468A0[5]

部分六位或八位的十六进制颜色可以简写为三位或者四位[6],部分软件可能并不支持简写形式的颜色。例如,#09c相当于简化的#0099cc#09c8相当于简化的#0099cc88。简写的颜色形式可以表示4096种颜色(不考虑alpha通道)。

CSS函数表示法

CSS中,颜色可以使用函数来表示。在CSS颜色模型3中,函数有两种表示方法:rgb()hsl,这两个函数也可以写为rgba()hsla()

rgb颜色是由红(英语:red)、绿(英语:green)、蓝(英语:blue)三个成分以及一个可选的alpha通道指定的,其语法为:

  • rgb(red green blue)rgb(red, green, blue)(没有alpha通道)
  • rgb(red green blue / alpha)rgb(red, green, blue, alpha)(有alpha通道)

例如,rgb(255 0 0)rgb(100% 0% 0%)可以表示红色( ),而rgb(255 0 0 / 50%)rgb(100% 0% 0% / 50%)则表示半透明的红色( )。

hsl颜色是由色相(英语:hue)、饱和度(英语:saturation)和明度(英语:lightness)表示的,其语法为:

  • hsl(hue saturation lightness)hsl(hue, saturation, lightness)(没有alpha通道)
  • hsl(hue saturation lightness / alpha)hsl(hue, saturation, lightness, alpha)(有alpha通道)

例如,hsl(120 100% 50%)表示绿色( ),hsl(120 100% 50% / 60%)则表示不透明度仅为40%的绿色( )。

CSS颜色模型4中还引入了一些依赖于设备的函数:

  • lab(lightness a b):在直角坐标模式下的CIELAB色彩空间中的颜色
  • lch(lightness chromaticity hue):在极坐标模式下的CIELAB色彩空间中的颜色
  • oklab(lightness a b)lch(lightness chromaticity hue):在CIELAB颜色基础上进行了改进的颜色表示,以更好地拟合视觉效果
  • xyz()
  • color():自定义色彩空间函数

上述函数表示方式均允许添加/ alpha以指定alpha值。

Remove ads

颜色名称

Thumb
SVG的X11颜色

颜色名称是指通过颜色的英文名称定义的颜色。在W3C标准中,颜色名称分为基本颜色和扩展颜色[7]。除了transparent之外,所有的颜色都是完全不透明的。

更多信息 中文名, 英文名 ...

在后来的CSS版本中,加入了橙色和透明色。

更多信息 CSS颜色模块版本, 中文 ...

除此之外,CSS3(CSS颜色模块版本3)接纳绝大部分X11颜色(或称SVG色)。

扩展颜色

Thumb
SVG1.1命名的颜色以及其sRGB十六进制和HSL代码

HTML 4.01、CSS 2.0、SVG 1.0和CSS 3加入了扩展颜色,有些颜色是由网页浏览器定义的。部分浏览器可能不支持所有的颜色颜色,但是在2005年,大多数浏览器已完成全面支持。其中这些颜色很多都是来自X11颜色名称英语X11_color_names

下面的表格列举出了CSS3规范中的所有X11颜色,以及其对应的十六进制值。这个列表中包含了一些常见的同义词,如aqua和cyan(均表示青色)、fuchsia和magenta(均表示品红色)、gray和grey(均表示灰色[9][10]

更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
更多信息 名称, 十六进制 ...
Remove ads

RGB颜色列表

#FFCCCC #FFC0C0 #FF9999 #FF8080 #FF6666 #FF4040 #FF3333 #FF0000
#FFE5CC #FFE0C0 #FFCC99 #FFC080 #FFB266 #FFA040 #FF9933 #FF8000
#FFFFCC #FFFFC0 #FFFF99 #FFFF80 #FFFF66 #FFFF40 #FFFF33 #FFFF00
#FFFFE5 #FFFFE0 #FFFFCC #FFFFC0 #FFFFB2 #FFFFA0 #FFFF99 #FFFF80
#E5FFCC #E0FFC0 #CCFF99 #C0FFA0 #B2FF66 #A0FF40 #99FF33 #80FF00
#CCFFCC #C0FFC0 #99FF99 #80FF80 #66FF66 #40FF40 #33FF33 #00FF00
#E5FFE5 #E0FFE0 #CCFFCC #C0FFC0 #B2FFB2 #A0FFA0 #99FF99 #80FF80
#CCE5CC #C0E0C0 #99CC99 #80C080 #66B266 #40A040 #339933 #008000
#CCFFE5 #C0FFE0 #99FFCC #80FFC0 #66FFB2 #40FFA0 #33FF99 #00FF80
#CCFFFF #C0FFFF #99FFFF #80FFFF #66FFFF #40FFFF #33FFFF #00FFFF
#E5FFFF #E0FFFF #CCFFFF #C0FFFF #B2FFFF #A0FFFF #99FFFF #80FFFF
#CCE5E5 #C0E0E0 #99CCCC #80C0C0 #66B2B2 #40A0A0 #339999 #008080
#CCE5FF #C0E0FF #99CCFF #80C0FF #66B2FF #40A0FF #3399FF #0080FF
#CCCCFF #C0C0FF #9999FF #8080FF #6666FF #4040FF #3333FF #0000FF
#CCCCE5 #C0C0E0 #9999CC #8080C0 #6666B2 #4040A0 #333399 #000080
#E5E5FF #E0E0FF #CCCCFF #C0C0FF #B2B2FF #A0A0FF #9999FF #8080FF
#E5CCFF #E0C0FF #CC99FF #C080FF #B266FF #A040FF #9933FF #8000FF
#E5CCE5 #E0C0E0 #CC99CC #C080C0 #B266B2 #A040A0 #993399 #800080
#FFCCFF #FFC0FF #FF99FF #FF80FF #FF66FF #FF40FF #FF33FF #FF00FF
#FFE5FF #FFE0FF #FFCCFF #FFC0FF #FFB2FF #FFA0FF #FF99FF #FF80FF
#FFCCE5 #FFC0E0 #FF99CC #FF80C0 #FF66B2 #FF40A0 #FF3399 #FF0080
#FFE5E5 #FFE0E0 #FFCCCC #FFC0C0 #FFB2B2 #FFA0A0 #FF9999 #FF8080
#E5CCCC #E0C0C0 #CC9999 #C08080 #B26666 #A04040 #993333 #800000
#E5E5CC #E0E0C0 #CCCC99 #C0C080 #B2B266 #A0A040 #999933 #808000
#E5E5E5 #E0E0E0 #CCCCCC #C0C0C0 #B2B2B2 #A0A0A0 #999999 #808080
#FF0000 #CC0000 #C00000 #990000 #800000 #660000 #400000 #330000
#FF8000 #CC6600 #C06000 #994C00 #804000 #663300 #402000 #331900
#FFFF00 #CCCC00 #C0C000 #999900 #808000 #666600 #404000 #333300
#FFFF80 #CCCC66 #C0C060 #99994C #808040 #666633 #404020 #333319
#80FF00 #66CC00 #60C000 #4C9900 #408000 #336600 #204000 #193300
#00FF00 #00CC00 #00C000 #009900 #008000 #006600 #004000 #003300
#80FF80 #66CC66 #60C060 #4C994C #408040 #336633 #204020 #193319
#008000 #006600 #006000 #004C00 #004000 #003300 #002000 #001900
#00FF80 #00CC66 #00C060 #00994C #008040 #006633 #004020 #003319
#00FFFF #00CCCC #00C0C0 #009999 #008080 #006666 #004040 #003333
#80FFFF #66CCCC #60C0C0 #4C9999 #408080 #336666 #204040 #193333
#008080 #006666 #006060 #004C4C #004040 #003333 #002020 #001919
#0080FF #0066CC #0060C0 #004C99 #004080 #003366 #002040 #001933
#0000FF #0000CC #0000C0 #000099 #000080 #000066 #000040 #000033
#000080 #000066 #000060 #00004C #000040 #000033 #000020 #000019
#8080FF #6666CC #6060C0 #4C4C99 #404080 #333366 #202040 #191933
#8000FF #6600CC #6000C0 #4C0099 #400080 #330066 #200040 #190033
#800080 #660066 #600060 #4C004C #400040 #330033 #200020 #190019
#FF00FF #CC00CC #C000C0 #990099 #800080 #660066 #400040 #330033
#FF80FF #CC66CC #C060C0 #994C99 #804080 #663366 #402040 #331933
#FF0080 #CC0066 #C00060 #99004C #800040 #660033 #400020 #330019
#FF8080 #CC6666 #C06060 #994C4C #804040 #663333 #402020 #331919
#800000 #660000 #600000 #4C0000 #400000 #330000 #200000 #190000
#808000 #666600 #606000 #4C4C00 #404000 #333300 #202000 #191900
#808080 #666666 #606060 #4C4C4C #404040 #333333 #202020 #191919
Remove ads

网页安全颜色

在20世纪90年代中期,很多显示器只支持显示256种颜色[11],这些颜色由硬件决定或者可以被“颜色表”改变。如果颜色不可用,就必须使用不同的颜色,通常就是最近的颜色或者抖动。在诸如X11的系统上,颜色图是在不同之间共享的,浏览器会分配一些小的颜色块。在2000年左右,由于24位颜色的普及,256色的显示锐减[12],“网页安全颜色”的实际使用减少。

“网页安全”颜色并非全都拥有标准的名称,但是每个颜色都可以以RGB十六进制的形式显示,每个分量(红、绿、蓝)都会接收以下表中的6个值之一:

更多信息 键, 十六进制值 ...

下面这个表显示了所有的网页安全颜色。

Remove ads

颜色表

216个网页安全颜色
*000* 300 600 900 C00 *F00*
*003* 303 603 903 C03 *F03*
006 306 606 906 C06 F06
009 309 609 909 C09 F09
00C 30C 60C 90C C0C F0C
*00F* 30F 60F 90F C0F *F0F*
030 330 630 930 C30 F30
033 333 633 933 C33 F33
036 336 636 936 C36 F36
039 339 639 939 C39 F39
03C 33C 63C 93C C3C F3C
03F 33F 63F 93F C3F F3F
060 360 660 960 C60 F60
063 363 663 963 C63 F63
066 366 666 966 C66 F66
069 369 669 969 C69 F69
06C 36C 66C 96C C6C F6C
06F 36F 66F 96F C6F F6F
090 390 690 990 C90 F90
093 393 693 993 C93 F93
096 396 696 996 C96 F96
099 399 699 999 C99 F99
09C 39C 69C 99C C9C F9C
09F 39F 69F 99F C9F F9F
0C0 3C0 6C0 9C0 CC0 FC0
0C3 3C3 6C3 9C3 CC3 FC3
0C6 3C6 6C6 9C6 CC6 FC6
0C9 3C9 6C9 9C9 CC9 FC9
0CC 3CC 6CC 9CC CCC FCC
0CF 3CF 6CF 9CF CCF FCF
*0F0* 3F0 *6F0* 9F0 CF0 *FF0*
0F3 *3F3* *6F3* 9F3 CF3 *FF3*
*0F6* *3F6* 6F6 9F6 *CF6* *FF6*
0F9 3F9 6F9 9F9 CF9 FF9
*0FC* *3FC* 6FC 9FC CFC FFC
*0FF* *3FF* *6FF* 9FF CFF *FFF*
Remove ads

网页最安全颜色

设计者会被鼓励在网页中使用这216个网页最安全的颜色,216色颜色表开发时还有许多的8位颜色,只有22种颜色会被可靠地显示而不需要重新映射。这22个颜色被称为“真正安全的颜色”,包含一系列亮度的绿色、黄色和青色[13][14]

更多信息 R---GB, C ...
Remove ads

无障碍

颜色选择

一些网页浏览器和设备不支持颜色,对于这些显示,以及对于失明或者色盲的用于,依赖于颜色的网页内容会难以显示或者无法显示。

颜色一般不应该被指定(而应该调用浏览器的默认颜色),或者背景和前景应该同时指定,例如纯文本颜色、未访问链接的颜色、已访问链接的颜色等。这样是为了避免在特定的背景上显示与背景颜色非常相似颜色的文本[15]

颜色对比度

网页内容无障碍指南要求文本的背景色与前景色具有一定的对比度,常规的文本对比度不小于4.5:1,大文本的对比度不小于3:1[16]。增强的无障碍需要对比度要超过7:1。但是,解决无障碍问题并非像增加对比度那样简单。根据网页无障碍倡议的报告,失读症的读者最适合阅读在最大值之下的对比度的文本[17]

参见

参考文献

外部链接

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads