• Q群联盟
吾爱一起玩儿吾爱一起玩儿在线色板工具 方便获取216种网页安全颜色

什么是网页安全色

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

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

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

不过我们也可以看到很多站点利用其他非网页安全色做到了新颖独特的设计风格,所以我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色,而是应该更好地搭配使用安全色合非安全色。 216网页安全色是根据当前计算机设备的情况通过无数次反复分析论证得到的结果,这对于一个网页设计师来说是必备的常识,且利用它可以拟定出更安全、更出色的网页配色方案。

(一)不同颜色之间的印象差异

1.红色:动态的感觉。

2.蓝色:静态的生硬的感觉。

3.黄色:柔和的动态的感觉。

4.绿色:柔和的感觉,既不动态也不静态。

(二)配色印象空间

设计站点时,通常都需要搭配四五种甚至更多种颜色,为了对多种颜色的混合使用进行评价,需引入新的分析方法----配色印象空间。

1.静态柔和感觉:通常都是隐约柔和颜色之间的搭配。

2.动态柔和感觉:通常都是鲜亮颜色间的搭配。

3.动态生硬感觉:通常都是鲜亮颜色和浑浊暗淡色之间的搭配。

4.静态生硬感觉:通常都是灰冷颜色之间的搭配。

在“配色印象空间”中,相距较远的颜色之间的印象会有较大的差异,而距离较近的颜色之间的印象会比较相近,也就是说颜色间的距离与印象的差异程度成正比例关系。

(三)配色基本知识

1.基于色相的配色关系:

采用不同色调的同一色相时,称之为同一色相配色。

采用两侧相邻的色相配色时,称为类似色相配色。

采用互为补色的或使用色相环中距离较远的颜色配色,称为相反色相配色。

同一色相和类似色相配色总体上会给人一种安静整齐的感觉。

相反色相配色则更具变化感。

2.基于色调的配色关系:

选择同一色调不同色相的配色方案,称为同一色调配色。

选择类似基准色调的本色方案,称为类似色调配色。这些色调在色调表中比较靠近基准色调。

选择与基准色调相反的色调的配色方案,称之为相反色调配色。这些色调在色调表中远离基准色调。

(四)典型的五种配色原理

1.基于色相的配色。

基于色相策划了一个配色方案时,获得的效果通常会比较华丽明艳。此方式在拉丁美洲和亚洲使用最为广泛。适当地搭配好补色可以突出显示颜色并给人轻快的感觉,适当地搭配好类似色相可以获得整齐宁静的效果。

特点:可以获得稳定的变化效果。

*补色与相反色相配色:强烈而鲜明的效果。

*类似色相配色:冷静而稳重的感觉。

(A)相反色相、类似色调配色。

当使用了对比度较高的鲜明(Vivid)色调时,所使用色相效果将被突出从而得到较强的动态效果;当使用了对比度较低的黑暗(Dark)色调时,即使使用了多种不同的色相也能够得到较安静沉重的效果,这是因为使用暗色调时色相差异也会变得不太明显。

特点:静态的变化效果。

*补色与相反色相配色:强调效果,轻快的气氛。

*类似色相配色:整齐、安静的感觉。

TIP:

背景色:用于背景的颜色。

主颜色:主要颜色,起到在整体上显示出站点整体内容和风格的重要作用。

辅助颜色:辅助主要颜色的次要颜色,用于协助主颜色凝造整体气氛。

突出颜色:用于突出、强调显示,主要使用于占用范围较小的按钮、标签等处。

(B)相反色相、相反色调配色。

得到的效果具有强烈的变化感和逆向性。如果说类似色调配色方案能凝造出整齐的氛围,那么相反色调配色凝造出的就是一种强弱分明的氛围。影响这种配色方案效果的最大因素在于所选颜色在整体画面中所占的比例。

此方案通常用于突出显示较暗背景中的某一个较亮对象。

特点:变化感和逆向性。

*需要根据颜色的色相与色调调整所占比例的大小。

(C)非彩色和彩色

非彩色主要由白色、黑色以及过渡阶段中的灰色构成,在与彩色搭配使用时,可以起到突出彩色的效果。通过搭配使用高亮度的彩色和白色以及亮灰色,可以得到明亮轻快的效果。而低亮度彩色和黑色以及暗灰色,可以得到黑暗沉重的效果。

特点:当非彩色的范围较大时可以凝造宁静的氛围。

*高亮度配色:轻快的感觉。

*低亮度配色:沉重的感觉。

2.基于色调的配色。

3.渐变配色。

4.Separation配色----强弱对比效果。

5.重点突出配色----强调突出效果。