网页配色


“网页配色”的资料来源于电子工业出版社出版的《Web Color Design —— 设计师谈网页配色》,原作是韩国 I.R.I色彩研究所

这是一本非常不错的书,里面采用了大量的网站截图做例子,详细地说明了每种色彩的作用,对于初学配色的人来说,实在是非常好的教材。所以建议有条件的朋友还是去买上一本,随时都可以翻开来看一看。

由于时间和精力的问题,我在此省略了这些图例,只把配色辞典部分放上来,以方便大家使用。

网页设计已经渐渐走向成熟,我们已经习惯了各种各样、让人眼花缭乱的动画以及图片,而如果现在哪个网站还像98或者99年那样毫无修饰,必定会很快地被人遗忘。

而正因为各种各样的网站大量地涌现,要如何在这些网站中脱颖而出,显得与众不同呢?

颜色,当然是颜色!

不需要太多的图片,也不需要花哨的装饰,好的颜色搭配就会让人眼前一亮。

网站配色,往往要注意以下几点:

网页安全色


什么是216网页安全色?

我们了解了“数字色彩”以后,就会知道网页中的颜色会受到各种不同环境的影响。即使你的网页使用了非常合理、非常漂亮的配色方案,但是如果每个人浏览的时候看到的效果都各不相同,那么你的配色方案的意愿就不能够非常好地传达给浏览者。

那么我们要通过什么方法才能解决这一问题呢?

答案就是——216网页安全色。

216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合(调色板),也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以使用216网页安全色进行网页配色可以避免原有的颜色失真问题。

网络安全色是当红色(Red)、绿色(Green)、蓝色(Blue)颜色数字信号值(DAC Count)为0、51、102、153、204、255时构成的颜色组合,它一共有 6 * 6 * 6 = 216 种颜色(其中彩色为210种,非彩色为6种)。

16进制色值表 / 10-16进制色值表

Dithering 是什么?

Dithering 是当目标颜色信息不可用时,通过混合其他相近颜色模拟显示目标颜色的一种处理方法。当网页中没有使用网页安全色时,系统就自动利用这种处理方法对超出网页安全色范围的颜色进行相应的处理。具体的方法就是选择两个类似的网页安全色进行交叉现实,而此时的现实效果通常都比较模糊。

下面这个图片,就是用Firewors输出的一个颜色在安全色范围之外的gif图片。

216网页安全色在需要实现高精度的渐变效果或显示真彩图像或照片时会有一定的欠缺,但用于显示徽标或者二维平面效果时却是绰绰有余的。

不过我们也可以看到很多站点利用其他非网页安全色做到了新颖独特的设计风格,所以我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色,而是应该更好地搭配使用安全色合非安全色。

216网页安全色是根据当前计算机设备的情况通过无数次反复分析论证得到的结果,这对于一个网页设计师来说是必备的常识,且利用它可以拟定出更安全、更出色的网页配色方案。

各种不同的216网页安全色调色板

为什么会有多种不同的216网页安全色调色板?

这是为了便于不同习惯的设计师们利用自己喜欢的方式选择颜色。

Browser-Safe Color Palette

Browser-Safe Color Palette

Browser-Safe Color Palette 是由最先对216网页安全色进行分析的 Lynda Weinman 开发的。

Browser-Safe Color Palette 最大的特点是可以让用户直观对比观察216种颜色间的亮度和彩度差异,且排列颜色时使用的自然渐变式排列方法,使用户能够更方便地选择需要的目标颜色。

216-Color Webmaster's Palette

216-Color Webmaster's Palette

由 Visibone Color Lab 开发的 216-Color Webmaster's Palette 在一个画面中合理协调地显示出了216网页安全色间的相互关系。

上面的调色板可以在 www.visibone.com 站点得到相关信息。或者点击观察大尺寸图片。

I.R.I Web Color Sense Palette Series


通过Color Whell I 和 Color Wheel II 合理的色相环结构,用户可以一目了然地观察到色调关系。

I.R.I Web Color Sense Palette Series

由韩国 I.R.I 色彩研究所开发的 I.R.I Web Color Sense Palette Series 是由根据不同的亮度和彩度分类的调色板和色相(Hue) & 色调(Tone)调色板构成的。

Hue & Tone Palette 是从216网页安全色中选取了116种颜色构成的调色板,它主要由10种色相和11种色调的组合外加6种非彩色结合而成。

通过Color Whell I 和 Color Wheel II 合理的色相环结构,用户可以一目了然地观察到色调关系。

16进制色值表


FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300
FF00FF FF00CC FF0099 FF0066 FF0033 FF0000
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900
CC66FF CC66CC CC6699 CC6666 CC6633 CC6600
CC33FF CC33CC CC3399 CC3366 CC3333 CC3300
CC00FF CC00CC CC0099 CC0066 CC0033 CC0000
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
9999FF 9999CC 999999 999966 999933 999900
9966FF 9966CC 996699 996666 996633 996600
9933FF 9933CC 993399 993366 993333 993300
9900FF 9900CC 990099 990066 990033 990000
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
6699FF 6699CC 669999 669966 669933 669900
6666FF 6666CC 666699 666666 666633 666600
6633FF 6633CC 663399 663366 663333 663300
6600FF 6600CC 660099 660066 660033 660000
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
3399FF 3399CC 339999 339966 339933 339900
3366FF 3366CC 336699 336666 336633 336600
3333FF 3333CC 333399 333366 333333 333300
3300FF 3300CC 330099 330066 330033 330000
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00
0099FF 0099CC 009999 009966 009933 009900
0066FF 0066CC 006699 006666 006633 006600
0033FF 0033CC 003399 003366 003333 003300
0000FF 0000CC 000099 000066 000033 000000

10-16进制色值表

 
                     
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255
#ffffff #ffccff #ff99ff #ff66ff #ff33ff #ff00ff #cc00ff #cc33ff #cc66ff #cc99ff #ccccff #ccffff
                       
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204
#ffffcc #ffcccc #ff99cc #ff66cc #ff33cc #ff00cc #cc00cc #cc33cc #cc66cc #cc99cc #cccccc #ccffcc
                       
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153
#ffff99 #ffcc99 #ff9999 #ff6699 #ff3399 #ff0099 #cc0099 #cc3399 #cc6699 #cc9999 #cccc99 #ccff99
                       
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102
#ffff66 #ffcc66 #ff9966 #ff6666 #ff3366 #ff0066 #cc0066 #cc3366 #cc6666 #cc9966 #cccc66 #ccff66
                       
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51
#ffff33 #ffcc33 #ff9933 #ff6633 #ff3333 #ff0033 #cc0033 #cc3333 #cc6633 #cc9933 #cccc33 #ccff33
                       
r 255 r 255 r 255 r 255 r 255 r 255 r 204 r 204 r 204 r 204 r 204 r 204
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0
#ffff00 #ffcc00 #ff9900 #ff6600 #ff3300 #ff0000 #cc0000 #cc3300 #cc6600 #cc9900 #cccc00 #ccff00
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0
#99ff00 #99cc00 #999900 #996600 #993300 #990000 #660000 #663300 #666600 #669900 #66cc00 #66ff00
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51
#99ff33 #99cc33 #999933 #996633 #993333 #990033 #660033 #663333 #666633 #669933 #66cc33 #66ff33
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102
#99ff66 #99cc66 #999966 #996666 #993366 #990066 #660066 #663366 #666666 #669966 #66cc66 #66ff66
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153
#99ff99 #99cc99 #999999 #996699 #993399 #990099 #660099 #663399 #666699 #669999 #66cc99 #66ff99
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204
#99ffcc #99cccc #9999cc #9966cc #9933cc #9900cc #6600cc #6633cc #6666cc #6699cc #66cccc #66ffcc
                       
r 153 r 153 r 153 r 153 r 153 r 153 r 102 r 102 r 102 r 102 r 102 r 102
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255
#99ffff #99ccff #9999ff #9966ff #9933ff #9900ff #6600ff #6633ff #6666ff #6699ff #66ccff #66ffff
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255 b 255
#33ffff #33ccff #3399ff #3366ff #3333ff #3300ff #0000ff #0033ff #0066ff #0099ff #00ccff #00ffff
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204 b 204
#33ffcc #33cccc #3399cc #3366cc #3333cc #3300cc #0000cc #0033cc #0066cc #0099cc #00cccc #00ffcc
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153 b 153
#33ff99 #33cc99 #339999 #336699 #333399 #330099 #000099 #003399 #006699 #009999 #00cc99 #00ff99
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102 b 102
#33ff66 #33cc66 #339966 #336666 #333366 #330066 #000066 #003366 #006666 #009966 #00cc66 #00ff66
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51 b 51
#33ff33 #33cc33 #339933 #336633 #333333 #330033 #000033 #003333 #006633 #009933 #00cc33 #00ff33
                       
r 51 r 51 r 51 r 51 r 51 r 51 r 0 r 0 r 0 r 0 r 0 r 0
g 255 g 204 g 153 g 102 g 51 g 0 g 0 g 51 g 102 g 153 g 204 g 255
b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0 b 0
#33ff00 #33cc00 #339900 #336600 #333300 #330000 #000000 #003300 #006600 #009900 #00cc00 #00ff00