Web上的颜色运用,对于设计师来说是小菜一碟,对于不是设计师来说还真是头痛的事情。打个比方说,Web的安全色是什么?或者说Web的安全色有多少?说实话,我以前只知道一个数字216,但我不知道具体是什么?今天为大家整理了216个web安全颜色,仅供大家参考。
Web安全色产生的原因
不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。选择特定的颜色时,浏览器会尽量使用[2]本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色,就会通过抖动或者混合自身的颜色来尝试重新产生该颜色
Web安全色的产生
为了解决Web调色板的问题,人们一致通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型,在该模型中,可以用相应的16制进制值00、33、66、99、CC和FF来表达三原色(RGB)中的每一种。这种基本的Web调色板将作为所有的Web浏览器和平台的标准,它包括了这些16进制值的组合结果。这就意味着,我们潜在的输出结果包括6种红色调、6种绿色调、6种蓝色调。6*6*6的结果就给出了216种特定的颜色,这些颜色就可以安全的应用于所有的Web中,而不需要担心颜色在不同应用程序之间的变化。
Web安全色的应用
对于我们来说,将某种颜色的10进制值转化为16进制值不是一件容易的事情,尽管我们可以学会将RGB颜色转化为16进制的数学原理。
但是我们使用大多数图像编辑或者绘画程序中提供的颜色转化工具进行转化更为容易。通过使用滴管工具,可以在任何所需的颜色上单击,然后再颜色的拾取器中查看该颜色的RGB、HSB、CMYK、LAB和最终16进制数值。
在HTML里,颜色有两种表示方式。一种是用颜色名称表示,比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red,Green,Blue意思,RGB每个原色的最小值是0,最大值是255,如果换算成16进制表示,就是(#00),(#FF)。比如白色的RGB(255,255,255),就用#FFFFFF表示;还有黑色的RGB(0,0,0),就用#000000表示。
注:在W3C制定的HTML 4.0标准中,只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow),其它的颜色都要用16进制RGB颜色值表示。
Web安全色的详细列表
以前,很多电脑显示器最多支持256色,因此出现了216种Web安全颜色,以保证网页的颜色能够正确显示。之所以不是256种Web安全颜色,是因为Microsoft和Mac操作系统有40种不同的系统保留颜色。
以下就是Web中216种安全颜色的信息示意图:
216 Web Safe Colors
HTML#000000
RGB
0
0
0
HTML#000033
RGB
0
0
51
HTML#000066
RGB
0
0
102
HTML#000099
RGB
0
0
153
HTML#0000CC
RGB
0
0
204
HTML#0000FF
RGB
0
0
255
HTML#003300
RGB
0
51
0
HTML#003333
RGB
0
51
51
HTML#003366
RGB
0
51
102
HTML#003399
RGB
0
51
153
HTML#0033CC
RGB
0
51
204
HTML#0033FF
RGB
0
51
255
HTML#006600
RGB
0
102
0
HTML#006633
RGB
0
102
51
HTML#006666
RGB
0
102
102
HTML#006699
RGB
0
102
153
HTML#0066CC
RGB
0
102
204
HTML#0066FF
RGB
0
102
255
HTML#009900
RGB
0
153
0
HTML#009933
RGB
0
153
51
HTML#009966
RGB
0
153
102
HTML#009999
RGB
0
153
153
HTML#0099CC
RGB
0
153
204
HTML#0099FF
RGB
0
153
255
HTML#00CC00
RGB
0
204
0
HTML#00CC33
RGB
0
204
51
HTML#00CC66
RGB
0
204
102
HTML#00CC99
RGB
0
204
153
HTML#00CCCC
RGB
0
204
204
HTML#00CCFF
RGB
0
204
255
HTML#00FF00
RGB
0
255
0
HTML#00FF33
RGB
0
255
51
HTML#00FF66
RGB
0
255
102
HTML#00FF99
RGB
0
255
153
HTML#00FFCC
RGB
0
255
204
HTML#00FFFF
RGB
0
255
255
HTML#330000
RGB
51
0
0
HTML#330033
RGB
51
0
51
HTML#330066
RGB
51
0
102
HTML#330099
RGB
51
0
153
HTML#3300CC
RGB
51
0
204
HTML#3300FF
RGB
51
0
255
HTML#333300
RGB
51
51
0
HTML#333333
RGB
51
51
51
HTML#333366
RGB
51
51
102
HTML#333399
RGB
51
51
153
HTML#3333CC
RGB
51
51
204
HTML#3333FF
RGB
51
51
255
HTML#336600
RGB
51
102
0
HTML#336633
RGB
51
102
51
HTML#336666
RGB
51
102
102
HTML#336699
RGB
51
102
153
HTML#3366CC
RGB
51
102
204
HTML#3366FF
RGB
51
102
255
HTML#339900
RGB
51
153
0
HTML#339933
RGB
51
153
51
HTML#339966
RGB
51
153
102
HTML#339999
RGB
51
153
153
HTML#3399CC
RGB
51
153
204
HTML#3399FF
RGB
51
153
255
HTML#33CC00
RGB
51
204
0
HTML#33CC33
RGB
51
204
51
HTML#33CC66
RGB
51
204
102
HTML#33CC99
RGB
51
204
153
HTML#33CCCC
RGB
51
204
204
HTML#33CCFF
RGB
51
204
255
HTML#33FF00
RGB
51
255
0
HTML#33FF33
RGB
51
255
51
HTML#33FF66
RGB
51
255
102
HTML#33FF99
RGB
51
255
153
HTML#33FFCC
RGB
51
255
204
HTML#33FFFF
RGB
51
255
255
HTML#660000
RGB
102
0
0
HTML#660033
RGB
102
0
51
HTML#660066
RGB
102
0
102
HTML#660099
RGB
102
0
153
HTML#6600CC
RGB
102
0
204
HTML#6600FF
RGB
102
0
255
HTML#663300
RGB
102
51
0
HTML#663333
RGB
102
51
51
HTML#663366
RGB
102
51
102
HTML#663399
RGB
102
51
153
HTML#6633CC
RGB
102
51
204
HTML#6633FF
RGB
102
51
255
HTML#666600
RGB
102
102
0
HTML#666633
RGB
102
102
51
HTML#666666
RGB
102
102
102
HTML#666699
RGB
102
102
153
HTML#6666CC
RGB
102
102
204
HTML#6666FF
RGB
102
102
255
HTML#669900
RGB
102
153
0
HTML#669933
RGB
102
153
51
HTML#669966
RGB
102
153
102
HTML#669999
RGB
102
153
153
HTML#6699CC
RGB
102
153
204
HTML#6699FF
RGB
102
153
255
HTML#66CC00
RGB
102
204
0
HTML#66CC33
RGB
102
204
51
HTML#66CC66
RGB
102
204
102
HTML#66CC99
RGB
102
204
153
HTML#66CCCC
RGB
102
204
204
HTML#66CCFF
RGB
102
204
255
HTML#66FF00
RGB
102
255
0
HTML#66FF33
RGB
102
255
51
HTML#66FF66
RGB
102
255
102
HTML#66FF99
RGB
102
255
153
HTML#66FFCC
RGB
102
255
204
HTML#66FFFF
RGB
102
255
255
HTML#990000
RGB
153
0
0
HTML#990033
RGB
153
0
51
HTML#990066
RGB
153
0
102
HTML#990099
RGB
153
0
153
HTML#9900CC
RGB
153
0
204
HTML#9900FF
RGB
153
0
255
HTML#993300
RGB
153
51
0
HTML#993333
RGB
153
51
51
HTML#993366
RGB
153
51
102
HTML#993399
RGB
153
51
153
HTML#9933CC
RGB
153
51
204
HTML#9933FF
RGB
153
51
255
HTML#996600
RGB
153
102
0
HTML#996633
RGB
153
102
51
HTML#996666
RGB
153
102
102
HTML#996699
RGB
153
102
153
HTML#9966CC
RGB
153
102
204
HTML#9966FF
RGB
153
102
255
HTML#999900
RGB
153
153
0
HTML#999933
RGB
153
153
51
HTML#999966
RGB
153
153
102
HTML#999999
RGB
153
153
153
HTML#9999CC
RGB
153
153
204
HTML#9999FF
RGB
153
153
255
HTML#99CC00
RGB
153
204
0
HTML#99CC33
RGB
153
204
51
HTML#99CC66
RGB
153
204
102
HTML#99CC99
RGB
153
204
153
HTML#99CCCC
RGB
153
204
204
HTML#99CCFF
RGB
153
204
255
HTML#99FF00
RGB
153
255
0
HTML#99FF33
RGB
153
255
51
HTML#99FF66
RGB
153
255
102
HTML#99FF99
RGB
153
255
153
HTML#99FFCC
RGB
153
255
204
HTML#99FFFF
RGB
153
255
255
HTML#CC0000
RGB
204
0
0
HTML#CC0033
RGB
204
0
51
HTML#CC0066
RGB
204
0
102
HTML#CC0099
RGB
204
0
153
HTML#CC00CC
RGB
204
0
204
HTML#CC00FF
RGB
204
0
255
HTML#CC3300
RGB
204
51
0
HTML#CC3333
RGB
204
51
51
HTML#CC3366
RGB
204
51
102
HTML#CC3399
RGB
204
51
153
HTML#CC33CC
RGB
204
51
204
HTML#CC33FF
RGB
204
51
255
HTML#CC6600
RGB
204
102
0
HTML#CC6633
RGB
204
102
51
HTML#CC6666
RGB
204
102
102
HTML#CC6699
RGB
204
102
153
HTML#CC66CC
RGB
204
102
204
HTML#CC66FF
RGB
204
102
255
HTML#CC9900
RGB
204
153
0
HTML#CC9933
RGB
204
153
51
HTML#CC9966
RGB
204
153
102
HTML#CC9999
RGB
204
153
153
HTML#CC99CC
RGB
204
153
204
HTML#CC99FF
RGB
204
153
255
HTML#CCCC00
RGB
204
204
0
HTML#CCCC33
RGB
204
204
51
HTML#CCCC66
RGB
204
204
102
HTML#CCCC99
RGB
204
204
153
HTML#CCCCCC
RGB
204
204
204
HTML#CCCCFF
RGB
204
204
255
HTML#CCFF00
RGB
204
255
0
HTML#CCFF33
RGB
204
255
51
HTML#CCFF66
RGB
204
255
102
HTML#CCFF99
RGB
204
255
153
HTML#CCFFCC
RGB
204
255
204
HTML#CCFFFF
RGB
204
255
255
HTML#FF0000
RGB
255
0
0
HTML#FF0033
RGB
255
0
51
HTML#FF0066
RGB
255
0
102
HTML#FF0099
RGB
255
0
153
HTML#FF00CC
RGB
255
0
204
HTML#FF00FF
RGB
255
0
255
HTML#FF3300
RGB
255
51
0
HTML#FF3333
RGB
255
51
51
HTML#FF3366
RGB
255
51
102
HTML#FF3399
RGB
255
51
153
HTML#FF33CC
RGB
255
51
204
HTML#FF33FF
RGB
255
51
255
HTML#FF6600
RGB
255
102
0
HTML#FF6633
RGB
255
102
51
HTML#FF6666
RGB
255
102
102
HTML#FF6699
RGB
255
102
153
HTML#FF66CC
RGB
255
102
204
HTML#FF66FF
RGB
255
102
255
HTML#FF9900
RGB
255
153
0
HTML#FF9933
RGB
255
153
51
HTML#FF9966
RGB
255
153
102
HTML#FF9999
RGB
255
153
153
HTML#FF99CC
RGB
255
153
204
HTML#FF99FF
RGB
255
153
255
HTML#FFCC00
RGB
255
204
0
HTML#FFCC33
RGB
255
204
51
HTML#FFCC66
RGB
255
204
102
HTML#FFCC99
RGB
255
204
153
HTML#FFCCCC
RGB
255
204
204
HTML#FFCCFF
RGB
255
204
255
HTML#FFFF00
RGB
255
255
0
HTML#FFFF33
RGB
255
255
51
HTML#FFFF66
RGB
255
255
102
HTML#FFFF99
RGB
255
255
153
HTML#FFFFCC
RGB
255
255
204
HTML#FFFFFF
RGB
255
255
255
Greens / Blues
HTML#000000
RGB
0
0
0
HTML#000033
RGB
0
0
51
HTML#000066
RGB
0
0
102
HTML#000099
RGB
0
0
153
HTML#0000CC
RGB
0
0
204
HTML#0000FF
RGB
0
0
255
HTML#003300
RGB
0
51
0
HTML#003333
RGB
0
51
51
HTML#003366
RGB
0
51
102
HTML#003399
RGB
0
51
153
HTML#0033CC
RGB
0
51
204
HTML#0033FF
RGB
0
51
255
HTML#006600
RGB
0
102
0
HTML#006633
RGB
0
102
51
HTML#006666
RGB
0
102
102
HTML#006699
RGB
0
102
153
HTML#0066CC
RGB
0
102
204
HTML#0066FF
RGB
0
102
255
HTML#009900
RGB
0
153
0
HTML#009933
RGB
0
153
51
HTML#009966
RGB
0
153
102
HTML#009999
RGB
0
153
153
HTML#0099CC
RGB
0
153
204
HTML#0099FF
RGB
0
153
255
HTML#00CC00
RGB
0
204
0
HTML#00CC33
RGB
0
204
51
HTML#00CC66
RGB
0
204
102
HTML#00CC99
RGB
0
204
153
HTML#00CCCC
RGB
0
204
204
HTML#00CCFF
RGB
0
204
255
HTML#00FF00
RGB
0
255
0
HTML#00FF33
RGB
0
255
51
HTML#00FF66
RGB
0
255
102
HTML#00FF99
RGB
0
255
153
HTML#00FFCC
RGB
0
255
204
HTML#00FFFF
RGB
0
255
255
Reds / Blues
HTML#000000
RGB
0
0
0
HTML#000033
RGB
0
0
51
HTML#000066
RGB
0
0
102
HTML#000099
RGB
0
0
153
HTML#0000CC
RGB
0
0
204
HTML#0000FF
RGB
0
0
255
HTML#330000
RGB
51
0
0
HTML#330033
RGB
51
0
51
HTML#330066
RGB
51
0
102
HTML#330099
RGB
51
0
153
HTML#3300CC
RGB
51
0
204
HTML#3300FF
RGB
51
0
255
HTML#660000
RGB
102
0
0
HTML#660033
RGB
102
0
51
HTML#660066
RGB
102
0
102
HTML#660099
RGB
102
0
153
HTML#6600CC
RGB
102
0
204
HTML#6600FF
RGB
102
0
255
HTML#990000
RGB
153
0
0
HTML#990033
RGB
153
0
51
HTML#990066
RGB
153
0
102
HTML#990099
RGB
153
0
153
HTML#9900CC
RGB
153
0
204
HTML#9900FF
RGB
153
0
255
HTML#CC0000
RGB
204
0
0
HTML#CC0033
RGB
204
0
51
HTML#CC0066
RGB
204
0
102
HTML#CC0099
RGB
204
0
153
HTML#CC00CC
RGB
204
0
204
HTML#CC00FF
RGB
204
0
255
HTML#FF0000
RGB
255
0
0
HTML#FF0033
RGB
255
0
51
HTML#FF0066
RGB
255
0
102
HTML#FF0099
RGB
255
0
153
HTML#FF00CC
RGB
255
0
204
HTML#FF00FF
RGB
255
0
255
Reds / Greens
HTML#000000
RGB
0
0
0
HTML#003300
RGB
0
51
0
HTML#006600
RGB
0
102
0
HTML#009900
RGB
0
153
0
HTML#00CC00
RGB
0
204
0
HTML#00FF00
RGB
0
255
0
HTML#330000
RGB
51
0
0
HTML#333300
RGB
51
51
0
HTML#336600
RGB
51
102
0
HTML#339900
RGB
51
153
0
HTML#33CC00
RGB
51
204
0
HTML#33FF00
RGB
51
255
0
HTML#660000
RGB
102
0
0
HTML#663300
RGB
102
51
0
HTML#666600
RGB
102
102
0
HTML#669900
RGB
102
153
0
HTML#66CC00
RGB
102
204
0
HTML#66FF00
RGB
102
255
0
HTML#990000
RGB
153
0
0
HTML#993300
RGB
153
51
0
HTML#996600
RGB
153
102
0
HTML#999900
RGB
153
153
0
HTML#99CC00
RGB
153
204
0
HTML#99FF00
RGB
153
255
0
HTML#CC0000
RGB
204
0
0
HTML#CC3300
RGB
204
51
0
HTML#CC6600
RGB
204
102
0
HTML#CC9900
RGB
204
153
0
HTML#CCCC00
RGB
204
204
0
HTML#CCFF00
RGB
204
255
0
HTML#FF0000
RGB
255
0
0
HTML#FF3300
RGB
255
51
0
HTML#FF6600
RGB
255
102
0
HTML#FF9900
RGB
255
153
0
HTML#FFCC00
RGB
255
204
0
HTML#FFFF00
RGB
255
255
0
Greys
HTML#000000
RGB
0
0
0
HTML#111111
RGB
17
17
17
HTML#222222
RGB
34
34
34
HTML#333333
RGB
51
51
51
HTML#444444
RGB
68
68
68
HTML#555555
RGB
85
85
85
HTML#666666
RGB
102
102
102
HTML#777777
RGB
119
119
119
HTML#888888
RGB
136
136
136
HTML#999999
RGB
153
153
153
HTML#AAAAAA
RGB
170
170
170
HTML#BBBBBB
RGB
187
187
187
HTML#CCCCCC
RGB
204
204
204
HTML#DDDDDD
RGB
221
221
221
HTML#EEEEEE
RGB
238
238
238
HTML#FFFFFF
RGB
255
255
255
Earth Tones
HTML#333333
RGB
51
51
51
HTML#333366
RGB
51
51
102
HTML#333399
RGB
51
51
153
HTML#3333CC
RGB
51
51
204
HTML#336633
RGB
51
102
51
HTML#336666
RGB
51
102
102
HTML#336699
RGB
51
102
153
HTML#3366CC
RGB
51
102
204
HTML#339933
RGB
51
153
51
HTML#339966
RGB
51
153
102
HTML#339999
RGB
51
153
153
HTML#3399CC
RGB
51
153
204
HTML#33CC33
RGB
51
204
51
HTML#33CC66
RGB
51
204
102
HTML#33CC99
RGB
51
204
153
HTML#33CCCC
RGB
51
204
204
HTML#663333
RGB
102
51
51
HTML#663366
RGB
102
51
102
HTML#663399
RGB
102
51
153
HTML#6633CC
RGB
102
51
204
HTML#666633
RGB
102
102
51
HTML#666666
RGB
102
102
102
HTML#666699
RGB
102
102
153
HTML#6666CC
RGB
102
102
204
HTML#669933
RGB
102
153
51
HTML#669966
RGB
102
153
102
HTML#669999
RGB
102
153
153
HTML#6699CC
RGB
102
153
204
HTML#66CC33
RGB
102
204
51
HTML#66CC66
RGB
102
204
102
HTML#66CC99
RGB
102
204
153
HTML#66CCCC
RGB
102
204
204
HTML#993333
RGB
153
51
51
HTML#993366
RGB
153
51
102
HTML#993399
RGB
153
51
153
HTML#9933CC
RGB
153
51
204
HTML#996633
RGB
153
102
51
HTML#996666
RGB
153
102
102
HTML#996699
RGB
153
102
153
HTML#9966CC
RGB
153
102
204
HTML#999933
RGB
153
153
51
HTML#999966
RGB
153
153
102
HTML#999999
RGB
153
153
153
HTML#9999CC
RGB
153
153
204
HTML#99CC33
RGB
153
204
51
HTML#99CC66
RGB
153
204
102
HTML#99CC99
RGB
153
204
153
HTML#99CCCC
RGB
153
204
204
HTML#CC3333
RGB
204
51
51
HTML#CC3366
RGB
204
51
102
HTML#CC3399
RGB
204
51
153
HTML#CC33CC
RGB
204
51
204
HTML#CC6633
RGB
204
102
51
HTML#CC6666
RGB
204
102
102
HTML#CC6699
RGB
204
102
153
HTML#CC66CC
RGB
204
102
204
HTML#CC9933
RGB
204
153
51
HTML#CC9966
RGB
204
153
102
HTML#CC9999
RGB
204
153
153
HTML#CC99CC
RGB
204
153
204
HTML#CCCC33
RGB
204
204
51
HTML#CCCC66
RGB
204
204
102
HTML#CCCC99
RGB
204
204
153
HTML#CCCCCC
RGB
204
204
204
Pastels
HTML#666666
RGB
102
102
102
HTML#666699
RGB
102
102
153
HTML#6666CC
RGB
102
102
204
HTML#6666FF
RGB
102
102
255
HTML#669966
RGB
102
153
102
HTML#669999
RGB
102
153
153
HTML#6699CC
RGB
102
153
204
HTML#6699FF
RGB
102
153
255
HTML#66CC66
RGB
102
204
102
HTML#66CC99
RGB
102
204
153
HTML#66CCCC
RGB
102
204
204
HTML#66CCFF
RGB
102
204
255
HTML#66FF66
RGB
102
255
102
HTML#66FF99
RGB
102
255
153
HTML#66FFCC
RGB
102
255
204
HTML#66FFFF
RGB
102
255
255
HTML#996666
RGB
153
102
102
HTML#996699
RGB
153
102
153
HTML#9966CC
RGB
153
102
204
HTML#9966FF
RGB
153
102
255
HTML#999966
RGB
153
153
102
HTML#999999
RGB
153
153
153
HTML#9999CC
RGB
153
153
204
HTML#9999FF
RGB
153
153
255
HTML#99CC66
RGB
153
204
102
HTML#99CC99
RGB
153
204
153
HTML#99CCCC
RGB
153
204
204
HTML#99CCFF
RGB
153
204
255
HTML#99FF66
RGB
153
255
102
HTML#99FF99
RGB
153
255
153
HTML#99FFCC
RGB
153
255
204
HTML#99FFFF
RGB
153
255
255
HTML#CC6666
RGB
204
102
102
HTML#CC6699
RGB
204
102
153
HTML#CC66CC
RGB
204
102
204
HTML#CC66FF
RGB
204
102
255
HTML#CC9966
RGB
204
153
102
HTML#CC9999
RGB
204
153
153
HTML#CC99CC
RGB
204
153
204
HTML#CC99FF
RGB
204
153
255
HTML#CCCC66
RGB
204
204
102
HTML#CCCC99
RGB
204
204
153
HTML#CCCCCC
RGB
204
204
204
HTML#CCCCFF
RGB
204
204
255
HTML#CCFF66
RGB
204
255
102
HTML#CCFF99
RGB
204
255
153
HTML#CCFFCC
RGB
204
255
204
HTML#CCFFFF
RGB
204
255
255
HTML#FF6666
RGB
255
102
102
HTML#FF6699
RGB
255
102
153
HTML#FF66CC
RGB
255
102
204
HTML#FF66FF
RGB
255
102
255
HTML#FF9966
RGB
255
153
102
HTML#FF9999
RGB
255
153
153
HTML#FF99CC
RGB
255
153
204
HTML#FF99FF
RGB
255
153
255
HTML#FFCC66
RGB
255
204
102
HTML#FFCC99
RGB
255
204
153
HTML#FFCCCC
RGB
255
204
204
HTML#FFCCFF
RGB
255
204
255
HTML#FFFF66
RGB
255
255
102
HTML#FFFF99
RGB
255
255
153
HTML#FFFFCC
RGB
255
255
204
HTML#FFFFFF
RGB
255
255
255
如需转载,烦请注明出处:http://www.w3cplus.com/css/216-web-safe-color-info.html