网页中的颜色呈现会受到各种因素的影响,即使你的网页使用了非常漂亮的配色方案,但是如果每个人浏览的时候看到的效果都不相同,那么你的配色理念就不能够非常好地传达给浏览者。使用216网页安全色进行网页配色可以避免颜色失真问题。
网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果。
网页安全色是当红色(Red)、绿色(Green)、蓝色(Blue)颜色数字信号值(DAC Count)为0、51、102、153、204、255时构成的颜色组合,它一共有 6 * 6 * 6 = 216 种颜色(其中彩色为210种,非彩色为6种)。
216网页安全色在需要实现高精度的渐变效果或显示真彩图像或照片时会有一定的欠缺,但用于显示徽标或者二维平面效果时却是绰绰有余的。不过我们也可以看到很多站点利用其他非网页安全色做到了新颖独特的设计风格,所以我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色,而是应该更好地搭配使用安全色合非安全色。
216 网页安全色一览
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
网页设计技巧:iframe自适应高度的问题
所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0赞 0分享
网页色彩对比与调和技巧分享
在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0赞 0分享
网页色彩性质的分类
任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0赞 0分享
使用Photoshop 制作网页线框图简单实用
这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0赞 0分享
CSS使用技巧总结
偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0赞 0分享
Web设计师如何制作Retina显屏设备的图片
到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0赞 0分享
组件化的前端开发流程详细说明
做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0赞 0分享
我们在囧途之UI工程师职业感慨
我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0赞 0分享
分享8款提高网页设计出色的CSS工具
当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0赞 0分享
查看更多