暖色 vs. 冷色

     在网站中使用互补色方案效果非常好,这是因为互补色方案同时包含暖色和冷色。使用暖色和冷色提供了一种对比的效果。同时,哪些颜色是暖色,哪些颜色是冷色,是很容易记住的,你在图8中就可以看到(在生成器网站上也可以看到)标出的暖色和冷色:

图8:暖色和冷色

     暖色是那些可以让你联想起夏天、太阳或火的颜色,包括色轮中从紫色起到黄色止的多种颜色。而冷色则是那些可以让你联想起春天、冰或水的颜色,包括色轮中从黄绿色起到紫色止的多种颜色。如果你仔细观察一下色轮,就会很快发现你选择一种主色后,生成器自动选出的相对应的互补色在冷暖色方面与主色是相反的。因此,如果你选择“暖”红色,相对应的互补色就是“冷”绿色;或如果你选择“冷”绿蓝色,则相对应的互补色就是“暖”红橙色。

     Ecolution 网站就是在网站中各页面都使用暖色和冷色搭配的一个实例,如图9所示。

图9:Ecolution网站——使用暖色和冷色搭配的一个模范实例

     Ecolution 网站在其主页上通常使用红色作为强调色,以和绿色的网站标识形成对比。他们接着将这两种对比色的亮色、灰色调和暗色在页面中各处混合搭配。某个图像中的“黑色”甚至都可以偏“暖”或偏“冷”,白色也同样如此。总体来看,这张网站截图的主色调是“暖色”,加上鲜明的纯绿色作为搭配,整体视觉效果非常好。尽管 Ecolution 网站使用的是和绿色和平组织网站一样的颜色,但由于 Ecolution 网站使用了很多灰色调和暗色,因此其外观就没有绿色和平组织网站的外观那样“耀眼”。

     你从来没有想到色彩理论会如此简单易学,对吧?那好,下面我们就学习略微高深和复杂一些的内容。

三色方案

     三色方案是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案,如图10所示:

图10:三色方案

     我为这个配色方案选择了原色,原因是想显示在配色方案中可以包含这种可走向极端的配色方法。原色在色轮中所处的位置绝非偶然,因为在每个原色之间的颜色,都包含有相等数量的间色和复色。但由于原色三色方案已被过度使用,所以它看上去似乎有些过时了。你可以使用在线颜色生成器,选择其它颜色来生成一个三色方案,如图11所示:

图11:另外一种三色方案

     以上所示的这个三色方案由橙黄色、蓝绿色、红紫色构建而成。我首先选择橙黄色(请注意上图中,色轮左边内圈上的那个黑色圆点),然后再选择色轮下方面板上的 Triad(三色)选项,生成器自动选定三色组合,包括所有的亮色、灰色调和暗色。在色轮上,伴随色以空心圆点标示,如同前面那个单色例子中互补色的标示一样。

     现在,我们手上需要一个真正的色轮,因为在线生成器的结果与真正色轮的结果并不是很一致。不过当我将色轮下方的Angle/Distance(角度/距离)工具拨到“max”(最大)时,在线生成器的结果与真正色轮的结果似乎就完全一致了。上图所示的结果是最接近真正的色轮生成的结果。

     三色方案也包含有暖色和冷色,但以一种暖色或冷色为主导色。一般说来,那种可以让其它颜色显暗的暖色或冷色应是你最先选择的。在我的这个三色方案中,我最先选择的是橙黄色,它是一种暖色。因此,在这个三色方案中,暖色就是主导色,其它两种颜色中有一种是冷色,以产生对比。

图12:Puzzle Pirates 网站——三色方案的一个模范实例

     Puzzle Pirates 网站(如图12所示),在其主页上使用了三色方案。该网站使用的是三原色(红-蓝-黄)方案,这个三原色方案非常适合一个少儿游戏网站。注意在该页面中,蓝色是主导色,红色和黄色被用作强调色,散布在页面各处。

四色方案

     你选择的颜色越多,则配色方案就越复杂。不过窍门是,选定一种亮色、灰色调或是暗色,并注意面板上那些,与选定颜色形成交叉的区域,而不是去混合调配纯色及它们的亮色、灰色调和暗色。这种方法很适用于四色方案这样的配色方案。这种四色方案(见图13)与互补色方案很相似,不同之处只在于使用了两组等距的互补色。

图13:四色方案

     图14显示如何使用在线生成器生成一个四色方案:

图14:在线生成器生成的一个四色方案

     注意色轮左边红色下面的那个黑色原点,红色是我选择的第一个颜色。然后我点击色轮下方面板上的Tetrad(四色)按钮,显示出来的四种颜色与我的手持式色轮显示出来的颜色又有点不同,不过当我将色轮下方的 Angle/Distance(角度/距离)工具拨到“max”(最大),在线生成器生成的结果与我的手持式色轮生成的结果似乎就完全一致了。以上所示的结果是最接近真正的色轮生成的结果。

     这种配色方案可以变得相当复杂,因此你可能会从右栏中的颜色中挑选出所有4种亮色或灰色调或暗色,为此你可以点击右端的箭头。例如,图15就显示了一个用这个配色方案的亮色填充的方块:

图15:四种亮色

     图16显示了一个中间色调的四色方案实例:

图16:四种中间色调

     如果你仔细观察上面所示的两个方块,就会发现生成器还为你提供了四个单色方案。这些单色方案同时显示在右栏内和大方块内的每个小方块内。

图17:Jane Goodall 研究所的网站——四色方案的模范实例

     Jane Goodall 研究所的网站(图17)是少数几个成功运用四色方案的网站之一。请注意网站截图中的紫色、黄色调、高亮红色(页面下部使用了更多的红色)、绿色。紫色与在线颜色工具生成的配色方案并不完全一致,它更偏于像红紫色。不过作为一个显示你如何能同时运用色轮和在线颜色生成器为你的网站确定配色方案的例子,它的效果已经很好了。

     当你在网上搜索配色和设计的创意时,请将色轮放在手边,以更多地了解网页设计师是如何在你喜爱的 Web 站点上使用配色方案的。

总结

     尽管色彩组合可能看起来有些复杂,但其实所有的配色方案都是遵循一定的“规则”的。了解这些指导原则,可以使我们易于理解色彩的搭配是如何为 Web 站点增添趣味和对比度的。

     色轮就是为我们所用的有用工具。有了色轮和其它工具如在线颜色生成器等,就是尚缺乏经验的设计师也能容易地挑选出颜色。

     本文所讲述的四种配色方案分别为:单色方案、互补色方案、三色方案、四色方案。尽管还存在其它的配色方案,但这四种配色方案是最容易理解和运用的。

 
 

版权声明:本文为websugar原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/websugar/archive/2012/03/19/2405546.html