加入收藏 | 积分兑换

网站色彩搭配原理及方法

作者:启阳网络 发表时间:2014/3/12 10:58:37 点击:标签:

  

  研究色彩是为了使用色彩,也就是说最大限度地发挥色彩的作用。色彩的意义与内容在艺术创造和表现方面是复杂多变的,但在欣赏和解释方面又有共通的国际特性,可见它在人们心目中不但是活的,也是一种很美的大众语言。所以,通过对色彩的各种心理分析,找出它们的各种特性,可以做到合理而有效地使用色彩。
  首先我们先来了解一些色彩的基本知识:

1、颜色是因为光的折射而产生的。

2、红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000),白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3、颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。

4、任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。

  网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。

  我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。www.we2win.com

●非彩色的搭配

  黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

●彩色的搭配

  色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一、色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。(如下图)

红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红
|___________| |____| |_________| |_________|
   |     |     |      |
  暖色系  中性系  寒色系    中性系

二、色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色——是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色——介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色——也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色——具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色——是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色——具有洁白,明快,纯真,清洁的感受。

黑色——具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色——具有中庸,平凡,温和,谦让,中立和高雅的感觉。

  每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

●网页色彩搭配的原理

1、色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。

2、色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。

3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4、色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程

  随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

●网页色彩搭配的技巧

  文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色(在Photoshop 里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在Photoshop 里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)

4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。

在网页配色中,忌讳的是:

1、不要将所有颜色都用到,尽量控制在三种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。


色彩心理



色彩的物质性心理错觉

  色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。心理学家对此曾做过许多实验。他们发现,在红色环境中,人的脉搏会加快,血压有所升高,情绪兴奋冲动。而处在蓝色环境中,脉搏会减缓,情绪也较沉静。有的科学家发现,颜色能影响脑电波,脑电波对红色反应是警觉,对蓝色的反应是放松。自 19世纪中叶以后,心理学已从哲学转入科学的范畴,心理学家注重实验所验证的色彩心理的效果。不少色彩理论中都对此作过专门的介绍,这些经验向我们明确地肯定了色彩对人心理的影响。
冷色与暖色是依据心理错觉对色彩的物理性分类,对于颜色的物质性印象,大致由冷暖两个色系产生。波长长的红光和橙、黄色光,本身有暖和感,以次光照射到任何色都会有暖和感。相反,波长短的紫色光、蓝色光、绿色光,有寒冷的感觉。夏日,我们关掉室内的白炽灯,打开日光灯,就会有一种变量双的感觉。颜料也是如此,在冷食或冷的饮料包装上使用冷色,视觉上会引起你对这些食物冰冷的感觉。冬日,把卧室的窗帘换成暖色,就会增加室内的暖和感。启阳网站制作

  以上的冷暖感觉,并非来自物理上的真实温度,而是与我们的视觉与心理联想有关。总的来说,人们在日常生活中既需要暖色,又需要冷色,在色彩的表现上也是如此。

  冷色与暖色除去给我们温度上的不同感觉以外,还会带来其它的一些感受,例如,重量感、湿度感等。比方说,暖色偏重,冷色偏轻;暖色有密度强的感觉,冷色有稀薄的感觉;两者相比较,冷色的透明感更强,暖色则透明感较弱;冷色显得湿润,暖色显得干燥;冷色又很远的感觉,暖色则有迫近感。一般说来,在狭窄的空间中,若想使它变得宽敞,应该使用明亮的冷调。由于暖色有前进感,冷色有后退感,可在细长的空间中的两壁涂以暖色,近处的两壁涂以冷色,空间就会从心理上感到更接近方形。

  除去寒暖色系具有明显的心理区别以外,色彩的明度与纯度也会引起对色彩物理印象的错觉。一般来说,颜色的重量感主要取决于色彩的明度,暗色给人以重的感觉,明色给人以轻的感觉。纯度与明度的变化给人以色彩软硬的印象,如淡的亮色使人觉得柔软,暗的纯色则有强硬的感觉。

颜色表情

  色彩本身是没有灵魂的,它只是一种物理现象,但人们却能感受到色彩的情感,这是因为人们长期生活在一个色彩的世界中,积累着许多视觉经验,一旦知觉经验与外来色彩刺激发生一定的呼应时,就会在人的心理上引出某种情绪。

  无论有彩色的色还是无彩色的色,都有自己的表情特征。每一种色相,当它的纯度和明度发生变化,或者处于不同的颜色搭配关系时,颜色的表情也就随之变化了。因此,要想说出各种颜色的表情特征,就想要说出世界上每个人的性格特征那样困难,然而对典型的性格作些描述,总还是有趣并可能的。

  红色红色是强有力的色彩,是热烈、冲动的色彩。约翰·伊顿教授描绘了受不同色彩刺激的红色。他说:在深红的底子上,红色平静下来,热度在熄灭着;在蓝绿色底子上,红色就像炽烈燃烧的火焰;在黄绿色底子上,红色变成一种冒失的、莽撞的闯入者,激烈而又寻常;在橙色的底子上,红色似乎被郁积着,暗淡而无生命,好像焦干了似的。

  橙色橙色的波长仅次于红色,因此它也具有长波长导致的特征:使脉搏加速,并有温度升高的感受。橙色是十分活泼的光辉色彩,是暖色系中最温暖的色彩,它使我们联想到金色的秋天,丰硕的果实,因此是一种富足的、快乐而幸福的色彩。

  橙色稍稍混入黑色 或白色 ,会成为一种稳重、含蓄有明快的暖色,但混入较多的黑色后,就成为一种烧焦的色,橙色中加入较多的白色会带有一种甜腻的味道 。橙色与蓝色的搭配,构成了最响亮、最欢快的色彩。
  黄色黄色是亮度最高的色,在高明度下能够保持很强的纯度。黄色的灿烂、辉煌,有着太阳般的光辉,因此象征着照亮黑暗的智慧之光;黄色有着金色的光芒,因此又象征着财富和权利,它是骄傲的色彩。黑色或紫色的衬托可以使黄色达到力量无限扩大的强度。白色是吞没黄色的色彩,淡淡的粉红色也可以像美丽的少女一样将黄色这骄傲的王子征服。

  黄色最不能承受黑色或白色的侵蚀,这两个色只要稍微的渗入,黄色即刻失去光辉。

  绿色鲜艳的绿色非常美丽,优雅,特别是用现代化学技术技术创造的最纯的绿色,是很漂亮的的色。绿色很宽容、大度,无论蓝色还是黄色的渗入,仍旧十分美丽。黄绿色单纯,年青;蓝绿色清秀、豁达。含灰的绿色,也是一种宁静、平和的色彩,就像暮色中的森林或晨雾中的田野那样。

  蓝色蓝色是博大的色彩,天空和大海着最辽阔的景色都呈蔚蓝色,无论深蓝色还是淡蓝色,都会使我们联想到无垠的宇宙或流动的大气,因此,蓝色也是永恒的象征。蓝色是最冷的色,使人们联想到冰川上的蓝色投影。蓝色在纯净的情况下并不代表感情上的冷漠,它只不过代表一种平静、理智与纯净而已。真正令人的情感缩到冷酷悲哀的色,是那些被弄混浊的蓝色。

  紫色波长最短的可见光是紫色波。通常,我们会觉得有很多紫色,因为红色加少许蓝色或蓝色加少许红色都会明显地呈紫味。所以很难确定标准的紫色。约翰·伊顿对紫色做过这样的描述:紫色是非知觉的色,神秘,给人印象深刻,有时给人以压迫感,并且因对比的不同,时而富有威胁性,时而又富有鼓舞性。当紫色以色域出现时,便可能明显产生恐怖感,在倾向于紫红色时更是如此。歌德说:“这类色光投射到一副景色上,就暗示着世界末日的恐怖。”

  紫色时象征虔诚的色相,当紫色深化暗化时,有时蒙昧迷信的象征。潜伏的大灾难就常从暗紫色中突然爆发出来,一旦紫色被淡化,当光明与理解照亮了蒙昧的虔诚之色时,优美可爱的晕色就会使我们心醉。

  用紫色表现混乱、死亡和兴奋,用蓝紫色表现孤独与献身,用红紫色表现神圣的爱和精神的统辖领域——简而言之,这就是紫色色带的一些表现价值。

  伊顿教授的对紫色的描述,的确能给我们以启示,它似乎是色环上最消极的色彩。尽管它不想蓝色那样冷,但红色的渗入使它显得复杂、矛盾。它处于冷暖之间游离不定的状态,加上它的低明度的性质,也许就构成了这一色彩在心理上引起的消极感。与黄色不同,紫色可以容纳许多淡化的层次,一个暗的纯紫色只要加入少量的白色,就会成为一种十分优美、柔和的色彩。随着白色的不断加入,也就不断的产生出许多层次的淡紫色,而每一层次的淡紫色,都显得很柔美、动人。

  黑、白、灰色我们曾经说过,无彩色的在心理上与有彩色具有同样的价值。黑色与白色时对色彩的最后抽象,代表色彩世界的阴极和阳极。太极图案就是黑白两色的循环形式来表现宇宙永恒的运动的。黑白所具有的抽象表现力以及神秘感,似乎能超越任何色彩的深度。康丁斯基认为,黑色意味着空无,像太阳的毁灭,像永恒的沉默,没有未来,失去希望。而白色的沉默不是死亡,而是有无尽的可能性。黑白两色是极端对立的色,然而有时候又令我们感到它们之间有着令人难以言状的共性。白色与黑色都可以表达对死亡的恐惧和悲哀,都具有不可超越的虚幻和无限的精神,黑白又总是以对方的存在显示自身的力量。它们似乎是整个色彩世界的主宰。

  在色彩世界中,灰色恐怕是最被动的色彩了,它是彻底的中性色,依靠邻近的色彩获得生命,灰色一旦靠近鲜艳的暖色,就会显出冷静的品格;若靠近冷色,则变为温和的暖灰色。与其用“休止符”这样的字眼来称呼黑色,不如把它用在灰色上,因为无论黑白的混合、不色的混合、全色的混合,最终都导致中性灰色。灰色意味着一切色彩对比的消失,是视觉上最安稳的休息点。然而,人眼是不能长久地、无线扩大地注视着灰色的,因为无休止的休息意味着死亡。httwww.we2win.com

  色彩的表情在更多的情况下是通过对比来表达的,有时色彩的对比五彩斑斓、耀眼夺目,显得华丽,有时对比在纯度上含蓄、明度上稳重,又显得朴实无华。创造什么样的色彩才能表达所需要的感情,完全依赖于自己的感觉、经验以及想象力,没有什么固定的格式。

  色彩有六种标准色: 红 橙 黄 绿 青 紫 这六种色中,又有细分:
  (1)三原色: 红 黄 青
  (2)间色: 橙(红加黄) 绿(黄加青) 紫(青加红)大家可以发现,上述六色的排列中,原色总是间隔着一个间色,因此,只需将标准色背熟,对于原色及间色我们就可以分清了。

   事实上,还有一些颜色没有包括在以上色彩中。 金、银、灰、黑、白是五种中性色。一般来说,除非染上一定的感情色彩,我们的背景都采用灰、黑、白这三种颜色,因为金银太耀眼了,而灰、黑、白由于是中性色,比较容易与其它颜色搭配。

  一般的颜色的明度者不同,因此产生的距离感也不同。按明度顺序排列: 1黄、 2橙、3红、4绿、5青、6紫。我们可以发现,按照16、25、34的顺序,就可以得到对比色。善于运用对比色,对我们的设计是很有好处的。如:万绿丛中一点红。就是一个典型的例子。

  在黑色背景上,黄最近。而在白色背景上,则紫最近。因此,距离感只是相对而言,与我们的背景的对比。在设计中,有明度、纯度和冷暖的对比,而色彩的冷暖是设计问题的主要攻坚项目。这时我们需要《康定斯基定律》,其主要内容:

  将色彩分成角度:红90度,橙60度,黄80度,蓝190度,紫120度。 其中钝角:钝拙、柔弱、冷色锐角:敏锐、强烈、暖色这样就可以比较清楚的掌握了。

  我们来看看怎样调和色彩。调和色彩的基本法则是:页面各部分色彩一定要构成适当的色彩关系。组成统一的色调,表达某种情绪。这才会有自己的风格。怎样才能做到这一点呢?

(1)确立主调统率页面的色彩关系。当页面上有几个色块时,必须以其中一块颜色为主,而且其面积,明度,位置大于其它色块。
(2)不但要善于运用原色,而且还要善于运用金、银、黑、白和灰这些中性色进行缓解,中和,以烘托出主题。
(3)增加共同点,会使设计更趋向协调。
(4)拉开距离,目的是为了主次分开,不要堆成一堆,别人看了都觉得讨厌。 可有方法:或者从平面拉开,或者从纯度和明度削弱。
① 两色一深一浅。
② 同时变化原有明度
③ 纯度对比,使一色鲜艳而一色朦胧
④ 同时变化原有纯度

  再来说说色彩均衡问题:要打动别人的视知觉,色彩要均衡。一般:

(1)比较全局
(2)不同的物体也不同。如:你可以看出页面上是块铁之类的东西的话,那么,潜意识里比看到页面上的一颗小草就会觉得不同份量了。这是我们生活上的体验。
(3)色彩不能偏于一方,否则就会失重。如页面中心有大色,则四周一定要有一些小色,左边有一定的物体一定的明度,右边就不能完全灰暗或空白,也要有适量的明色。   
(4)若说到均衡,则纯度或明度较差的大色块与面积小的鲜明色块也均衡

  要表达出我们主页的风格,这就需要理解色调的概念。色调,即我们页面的主色彩。我们所要表达的性格或心情,都会在页面上表示出来。如忧郁用冷色,热情开心用暖色等。而如要表达出我们所观察的色调,要用夸张、提炼、强调、概括等方法。为了突出重点,加强对比,表达气氛,是有必要进行夸张和调整的。以下是具体的方法:

(1)单色调是指只用一种颜色,只在明度和纯度上作调整,间用中性色。这种方法,有一种强烈的个人倾向。如采用单色调,易形成一种风格。我们要注意的是中性色必须做到非常有层次,明度系数也要拉开,才可以达到我们想要的效果。
(2)调和调:邻近色的配合。这种方法是采用标准色的队列中邻近的色彩作配合。但易单调,必须注意明度和纯度,而且注意在画面的局部采用少量小块的对比色以达到协调的效果。
(3)对比调:易造成不和谐。必须加中性色加以调和. 注意色块大小、位置,才能均衡我们的布局。注意:在调和色彩中要注意间用中性色。必须明白的是:近的纯由远的灰衬托明的纯由暗的灰衬托明的纯由暗的灰衬托主体的纯由宾体的灰衬托.

图案构图的稳、匀、奇
1、稳——安定、比例
安定(此处着重于心理、视觉印象的安定)
图案在构图上一般有对称、平衡。对称比较庄重、严肃。平衡比较生动、活泼。
比例
比例带有一定的数学性,较典型的有黄金分割(0.618/1),据说芭蕾演员踮脚表演就是为了使自己身体比例呈黄金分割。还有平方根、立方根等矩形,给人一种非常优美和谐的视觉效果。但不要被这些比例所束缚,很多是靠自己的感觉去应用。

2、匀——疏密、空间
疏——密、黑——白(并非纯粹的黑白色彩,指浓淡)、虚——实之间是对比关系,灵活合理地进行疏密、黑白布局,从而表现出一定的虚实,形成不同的美感和艺术效果。
空间实际上是由构图中安排的实体形象、空白形象,两者相结合构成的。空间的构图处理,是随着形象轨迹及视觉轨迹形成内在的空间层次。例如:网站“异空间”中,有一画面:太空背景,几个动感的人物都是一样的大小,我就建议:进行个别人物缩小或扩大,可以形成一种距离感和空间感,避免了原有的单板。

以上所做的各色系的心理分析,主要目的在于说明色彩心理的特质,这有利于设计者在实际设计中,根据不同的表达内容去合理运用色彩,使其表达的内容和所用的色彩相得益彰,最后产生理想的色彩情调



沈阳网站制作一条龙服务(沈阳网站策划、沈阳网站制作、沈阳网站改版、沈阳网站优化、沈阳网站维护、沈阳网站推广等一系列的专业互联网方面的服务)公司网址:www.we2win.com




  
分享到:

原创文章如转载,请注明转载自 沈阳网站优化-启阳网络 www.we2win.com
本文网址:http://www.we2win.com/html/site/wang-zhan-se-cai-da-pei-yuan-li-ji-fang-fa.html
上一篇:如何建设自己的网站
下一篇:做网站优化必须注意到问题