web安全色Web上的颜色运用,对于设计师来说是小菜一碟,对于不是设计师来说还真是头痛的事情。打个比方说,Web
web安全色
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#000000RGB
HTML#000033RGB
HTML#000066RGB
HTML#000099RGB
HTML#0000CCRGB
HTML#0000FFRGB
HTML#003300RGB
HTML#003333RGB
HTML#003366RGB
HTML#003399RGB
HTML#0033CCRGB
HTML#0033FFRGB
HTML#006600RGB
HTML#006633RGB
HTML#006666RGB
HTML#006699RGB
HTML#0066CCRGB
HTML#0066FFRGB
HTML#009900RGB
HTML#009933RGB
HTML#009966RGB
HTML#009999RGB
HTML#0099CCRGB
HTML#0099FFRGB
HTML#00CC00RGB
HTML#00CC33RGB
HTML#00CC66RGB
HTML#00CC99RGB
HTML#00CCCCRGB
HTML#00CCFFRGB
HTML#00FF00RGB
HTML#00FF33RGB
HTML#00FF66RGB
HTML#00FF99RGB
HTML#00FFCCRGB
HTML#00FFFFRGB
HTML#330000RGB
HTML#330033RGB
HTML#330066RGB
HTML#330099RGB
HTML#3300CCRGB
HTML#3300FFRGB
HTML#333300RGB
HTML#333333RGB
HTML#333366RGB
HTML#333399RGB
HTML#3333CCRGB
HTML#3333FFRGB
HTML#336600RGB
HTML#336633RGB
HTML#336666RGB
HTML#336699RGB
HTML#3366CCRGB
HTML#3366FFRGB
HTML#339900RGB
HTML#339933RGB
HTML#339966RGB
HTML#339999RGB
HTML#3399CCRGB
HTML#3399FFRGB
HTML#33CC00RGB
HTML#33CC33RGB
HTML#33CC66RGB
HTML#33CC99RGB
HTML#33CCCCRGB
HTML#33CCFFRGB
HTML#33FF00RGB
HTML#33FF33RGB
HTML#33FF66RGB
HTML#33FF99RGB
HTML#33FFCCRGB
HTML#33FFFFRGB
HTML#660000RGB
HTML#660033RGB
HTML#660066RGB
HTML#660099RGB
HTML#6600CCRGB
HTML#6600FFRGB
HTML#663300RGB
HTML#663333RGB
HTML#663366RGB
HTML#663399RGB
HTML#6633CCRGB
HTML#6633FFRGB
HTML#666600RGB
HTML#666633RGB
HTML#666666RGB
HTML#666699RGB
HTML#6666CCRGB
HTML#6666FFRGB
HTML#669900RGB
HTML#669933RGB
HTML#669966RGB
HTML#669999RGB
HTML#6699CCRGB
HTML#6699FFRGB
HTML#66CC00RGB
HTML#66CC33RGB
HTML#66CC66RGB
HTML#66CC99RGB
HTML#66CCCCRGB
HTML#66CCFFRGB
HTML#66FF00RGB
HTML#66FF33RGB
HTML#66FF66RGB
HTML#66FF99RGB
HTML#66FFCCRGB
HTML#66FFFFRGB
HTML#990000RGB
HTML#990033RGB
HTML#990066RGB
HTML#990099RGB
HTML#9900CCRGB
HTML#9900FFRGB
HTML#993300RGB
HTML#993333RGB
HTML#993366RGB
HTML#993399RGB
HTML#9933CCRGB
HTML#9933FFRGB
HTML#996600RGB
HTML#996633RGB
HTML#996666RGB
HTML#996699RGB
HTML#9966CCRGB
HTML#9966FFRGB
HTML#999900RGB
HTML#999933RGB
HTML#999966RGB
HTML#999999RGB
HTML#9999CCRGB
HTML#9999FFRGB
HTML#99CC00RGB
HTML#99CC33RGB
HTML#99CC66RGB
HTML#99CC99RGB
HTML#99CCCCRGB
HTML#99CCFFRGB
HTML#99FF00RGB
HTML#99FF33RGB
HTML#99FF66RGB
HTML#99FF99RGB
HTML#99FFCCRGB
HTML#99FFFFRGB
HTML#CC0000RGB
HTML#CC0033RGB
HTML#CC0066RGB
HTML#CC0099RGB
HTML#CC00CCRGB
HTML#CC00FFRGB
HTML#CC3300RGB
HTML#CC3333RGB
HTML#CC3366RGB
HTML#CC3399RGB
HTML#CC33CCRGB
HTML#CC33FFRGB
HTML#CC6600RGB
HTML#CC6633RGB
HTML#CC6666RGB
HTML#CC6699RGB
HTML#CC66CCRGB
HTML#CC66FFRGB
HTML#CC9900RGB
HTML#CC9933RGB
HTML#CC9966RGB
HTML#CC9999RGB
HTML#CC99CCRGB
HTML#CC99FFRGB
HTML#CCCC00RGB
HTML#CCCC33RGB
HTML#CCCC66RGB
HTML#CCCC99RGB
HTML#CCCCCCRGB
HTML#CCCCFFRGB
HTML#CCFF00RGB
HTML#CCFF33RGB
HTML#CCFF66RGB
HTML#CCFF99RGB
HTML#CCFFCCRGB
HTML#CCFFFFRGB
HTML#FF0000RGB
HTML#FF0033RGB
HTML#FF0066RGB
HTML#FF0099RGB
HTML#FF00CCRGB
HTML#FF00FFRGB
HTML#FF3300RGB
HTML#FF3333RGB
HTML#FF3366RGB
HTML#FF3399RGB
HTML#FF33CCRGB
HTML#FF33FFRGB
HTML#FF6600RGB
HTML#FF6633RGB
HTML#FF6666RGB
HTML#FF6699RGB
HTML#FF66CCRGB
HTML#FF66FFRGB
HTML#FF9900RGB
HTML#FF9933RGB
HTML#FF9966RGB
HTML#FF9999RGB
HTML#FF99CCRGB
HTML#FF99FFRGB
HTML#FFCC00RGB
HTML#FFCC33RGB
HTML#FFCC66RGB
HTML#FFCC99RGB
HTML#FFCCCCRGB
HTML#FFCCFFRGB
HTML#FFFF00RGB
HTML#FFFF33RGB
HTML#FFFF66RGB
HTML#FFFF99RGB
HTML#FFFFCCRGB
HTML#FFFFFFRGBGreens / Blues
HTML#000000RGB
HTML#000033RGB
HTML#000066RGB
HTML#000099RGB
HTML#0000CCRGB
HTML#0000FFRGB
HTML#003300RGB
HTML#003333RGB
HTML#003366RGB
HTML#003399RGB
HTML#0033CCRGB
HTML#0033FFRGB
HTML#006600RGB
HTML#006633RGB
HTML#006666RGB
HTML#006699RGB
HTML#0066CCRGB
HTML#0066FFRGB
HTML#009900RGB
HTML#009933RGB
HTML#009966RGB
HTML#009999RGB
HTML#0099CCRGB
HTML#0099FFRGB
HTML#00CC00RGB
HTML#00CC33RGB
HTML#00CC66RGB
HTML#00CC99RGB
HTML#00CCCCRGB
HTML#00CCFFRGB
HTML#00FF00RGB
HTML#00FF33RGB
HTML#00FF66RGB
HTML#00FF99RGB
HTML#00FFCCRGB
HTML#00FFFFRGBReds / Blues
HTML#000000RGB
HTML#000033RGB
HTML#000066RGB
HTML#000099RGB
HTML#0000CCRGB
HTML#0000FFRGB
HTML#330000RGB
HTML#330033RGB
HTML#330066RGB
HTML#330099RGB
HTML#3300CCRGB
HTML#3300FFRGB
HTML#660000RGB
HTML#660033RGB
HTML#660066RGB
HTML#660099RGB
HTML#6600CCRGB
HTML#6600FFRGB
HTML#990000RGB
HTML#990033RGB
HTML#990066RGB
HTML#990099RGB
HTML#9900CCRGB
HTML#9900FFRGB
HTML#CC0000RGB
HTML#CC0033RGB
HTML#CC0066RGB
HTML#CC0099RGB
HTML#CC00CCRGB
HTML#CC00FFRGB
HTML#FF0000RGB
HTML#FF0033RGB
HTML#FF0066RGB
HTML#FF0099RGB
HTML#FF00CCRGB
HTML#FF00FFRGBReds / Greens
HTML#000000RGB
HTML#003300RGB
HTML#006600RGB
HTML#009900RGB
HTML#00CC00RGB
HTML#00FF00RGB
HTML#330000RGB
HTML#333300RGB
HTML#336600RGB
HTML#339900RGB
HTML#33CC00RGB
HTML#33FF00RGB
HTML#660000RGB
HTML#663300RGB
HTML#666600RGB
HTML#669900RGB
HTML#66CC00RGB
HTML#66FF00RGB
HTML#990000RGB
HTML#993300RGB
HTML#996600RGB
HTML#999900RGB
HTML#99CC00RGB
HTML#99FF00RGB
HTML#CC0000RGB
HTML#CC3300RGB
HTML#CC6600RGB
HTML#CC9900RGB
HTML#CCCC00RGB
HTML#CCFF00RGB
HTML#FF0000RGB
HTML#FF3300RGB
HTML#FF6600RGB
HTML#FF9900RGB
HTML#FFCC00RGB
HTML#FFFF00RGBGreys
HTML#000000RGB
HTML#111111RGB
HTML#222222RGB
HTML#333333RGB
HTML#444444RGB
HTML#555555RGB
HTML#666666RGB
HTML#777777RGB
HTML#888888RGB
HTML#999999RGB
HTML#AAAAAARGB
HTML#BBBBBBRGB
HTML#CCCCCCRGB
HTML#DDDDDDRGB
HTML#EEEEEERGB
HTML#FFFFFFRGBEarth Tones
HTML#333333RGB
HTML#333366RGB
HTML#333399RGB
HTML#3333CCRGB
HTML#336633RGB
HTML#336666RGB
HTML#336699RGB
HTML#3366CCRGB
HTML#339933RGB
HTML#339966RGB
HTML#339999RGB
HTML#3399CCRGB
HTML#33CC33RGB
HTML#33CC66RGB
HTML#33CC99RGB
HTML#33CCCCRGB
HTML#663333RGB
HTML#663366RGB
HTML#663399RGB
HTML#6633CCRGB
HTML#666633RGB
HTML#666666RGB
HTML#666699RGB
HTML#6666CCRGB
HTML#669933RGB
HTML#669966RGB
HTML#669999RGB
HTML#6699CCRGB
HTML#66CC33RGB
HTML#66CC66RGB
HTML#66CC99RGB
HTML#66CCCCRGB
HTML#993333RGB
HTML#993366RGB
HTML#993399RGB
HTML#9933CCRGB
HTML#996633RGB
HTML#996666RGB
HTML#996699RGB
HTML#9966CCRGB
HTML#999933RGB
HTML#999966RGB
HTML#999999RGB
HTML#9999CCRGB
HTML#99CC33RGB
HTML#99CC66RGB
HTML#99CC99RGB
HTML#99CCCCRGB
HTML#CC3333RGB
HTML#CC3366RGB
HTML#CC3399RGB
HTML#CC33CCRGB
HTML#CC6633RGB
HTML#CC6666RGB
HTML#CC6699RGB
HTML#CC66CCRGB
HTML#CC9933RGB
HTML#CC9966RGB
HTML#CC9999RGB
HTML#CC99CCRGB
HTML#CCCC33RGB
HTML#CCCC66RGB
HTML#CCCC99RGB
HTML#CCCCCCRGBPastels
HTML#666666RGB
HTML#666699RGB
HTML#6666CCRGB
HTML#6666FFRGB
HTML#669966RGB
HTML#669999RGB
HTML#6699CCRGB
HTML#6699FFRGB
HTML#66CC66RGB
HTML#66CC99RGB
HTML#66CCCCRGB
HTML#66CCFFRGB
HTML#66FF66RGB
HTML#66FF99RGB
HTML#66FFCCRGB
HTML#66FFFFRGB
HTML#996666RGB
HTML#996699RGB
HTML#9966CCRGB
HTML#9966FFRGB
HTML#999966RGB
HTML#999999RGB
HTML#9999CCRGB
HTML#9999FFRGB
HTML#99CC66RGB
HTML#99CC99RGB
HTML#99CCCCRGB
HTML#99CCFFRGB
HTML#99FF66RGB
HTML#99FF99RGB
HTML#99FFCCRGB
HTML#99FFFFRGB
HTML#CC6666RGB
HTML#CC6699RGB
HTML#CC66CCRGB
HTML#CC66FFRGB
HTML#CC9966RGB
HTML#CC9999RGB
HTML#CC99CCRGB
HTML#CC99FFRGB
HTML#CCCC66RGB
HTML#CCCC99RGB
HTML#CCCCCCRGB
HTML#CCCCFFRGB
HTML#CCFF66RGB
HTML#CCFF99RGB
HTML#CCFFCCRGB
HTML#CCFFFFRGB
HTML#FF6666RGB
HTML#FF6699RGB
HTML#FF66CCRGB
HTML#FF66FFRGB
HTML#FF9966RGB
HTML#FF9999RGB
HTML#FF99CCRGB
HTML#FF99FFRGB
HTML#FFCC66RGB
HTML#FFCC99RGB
HTML#FFCCCCRGB
HTML#FFCCFFRGB
HTML#FFFF66RGB
HTML#FFFF99RGB
HTML#FFFFCCRGB
HTML#FFFFFFRGB255 255 255
如需转载,烦请注明出处:http://www.w3cplus.com/css/216-web-safe-color-info.html