网页配色基础.doc

时光足迹 QQ:562616761 百度空间：/chgzscn网页色彩设计概述1.1.1 色彩决定印象色彩是浏览者访问网页时目光无法回避的设计要素，在浏览者观看网页时，首先看到的就是网页的色彩搭配，在这一瞬间，对网页的整体印象就已经确定了下来，因此网页的色彩效果不可轻视。在不经意间，浏览者对网页的印象就已经固定正如初次拜访客户时，在互相介绍之前，通过这个人的衣着打扮、言谈举止就可以把我这个人的性格一样。1.1.2 色彩印象无法更改 色彩形成的印象非常稳固，不知不觉间，印入心灵的影像就被牢牢固定了。1.1.3 色彩无处不在，具有多重效果插图的内容或标题和配色的印象一致时，就能发挥最大的效果。配色无处不在，它与文字和图像相互协调，发挥着综合性作用。1.2 色彩概述光为何物？现代光学认为，光是一种以电磁波形式存在的辐射能。它主要包括宇宙射线、紫外线、可见光、无线电波和交流电波等。当电磁波只有400nm700nm波长时，其波谱称为“可见光谱”。而紫端波长（400nm）以外的紫外线、X线及红端波长（700nm）以外的红外线、电波等，则统称为“不可见光谱”。1.2.1 光的色彩色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因，色是眼睛感觉得结果。光在物理学上市电磁波的一部分，其波长范围为400nm700nm，在此范围内的电磁波可以被人眼的视网膜所感知，称为可视光。牛顿有名的色散实验得出了白色光是由七彩光混合而成的结论，而且发现并明确了光与色的关系，也反映出可见光中各色光具有不同的波长属性，如红光最长、绿光居中、紫光最短。七色光中，当任一色光都不能再单独分解时，称为“单色光”；反之，将这些色光用聚透镜收敛后，投射的七色光会再恢复到原来的白光之中。太阳光是由以上不同波长的色光复合而成的，故称“复合光”。除折射外，干涉、偏振及荧光等也可以发生分离色彩的物理现象。12.2 物体色物体本身是不会发光的。物体之所以能被看到，是因为光源色经物体表面吸收、反射，反映到视觉中的光色感觉。物体在自然光照下，只反射其中一种波长的光，而其他波长的光被全部吸收，这个物体就呈现出反射光的颜色。如果物体反射所有的色光，我们就会感觉这个物体是白色的。如果物体吸收所有的色光，那么这个物体就会呈现黑色。实际上，现实生活中的颜色是非常丰富的，各种物体不可能单纯反射一种波长的光，它只是对某一种波长的光反射较多，而对其他波长的光按不同的比例反射较少。所以，物体的颜色不可能是一种绝对标准的色彩，而只能是倾向于某一种颜色，同时又具有其他色光的成分。所以，物体的色彩是由光源的色彩和该物体的选择吸收与反射能力所决定的。在常见的黑、白、灰物体色中，白色的反射率是64%-92.3%;灰色的反射率是10%-64%；黑色的吸收率在90%以上。物体对色光的吸收、反射或投射能力，易受物体表面肌理状态的影响。表面光滑、平整、细腻的物体，对色光的反射较强，如镜子、光盘表面、丝绸织物等。表面粗糙、凹凸、疏松的物体，易使光线产生漫射现象，故对色光的反射较弱，如毛玻璃、呢绒、海绵等。1.2.3 显示器的颜色我们知道，物体的色彩是对色光反射的结果，那么显示器的色彩又是如何生成的呢？彩色显示器产生色彩的方式类似于大自然中的发光体。在显示器内部有一个和电视机一样的显像管，当显像管内的电子枪发射出的电子流打在荧光屏内侧的磷光片上，磷光片就产生光效应。三种不同性质的磷光片分别发出红、绿、蓝三种光波，计算机程序量化地控制电子束强度，由此精确控制各个磷光片的光波的的波长，再经过合成叠加，就模拟出自然界的各种颜色。由于显示器内存容量的不同，使得显示器能够显示的颜色数量也有所不同。这个问题直接影响到网页的设计效果。目前，显示器通常采用的颜色数有24位（约1700万种颜色，也成为真彩色）、16位彩色（约65000种颜色）、8位（256钟颜色）三种色彩模式。如果网页中的图片是24位色，当在8位色彩模式下时，图片中很多的颜色都不能正常显示，而只能以近似的颜色显示，就会出现“抖动”现象。 1.3 网页色彩生活在数字时代的我们，提到数字最先想到的应该是0和1，计算机就是将所有的信息转换成0和1构成的信息流，然后再进行传递的。数字彩色也是指通过0和1构成的数字信号显示出的颜色，这与模拟信号的概念不同。能够显示数字颜色的设备很多，比如显示器、数字电视、打印机、投影仪、数码相机等。在通过数据流交换书籍的所有设备中显示的颜色统称为数字颜色，光盘中的电影颜色、利用扫描仪扫描的照片的颜色、在显示器中显示的颜色、通过打印机打印出来的颜色等都属于数字颜色的范畴。现在，随着数码广播技术的逐渐发展，数字颜色的应用领域也在不断的扩大。在数字环境中有很多不同的设备与计算机相连接，光源色与物体色的特性在数字颜色中同时存在，也互相影响。 1.3.1 RGB色彩模式在网页设计中主要使用的颜色模式是RGB，即红、绿、蓝三原色的表示方法。之所以RGB称为三原色，是因为红、绿、；蓝这三种颜色。并且所有的电子显示设备都是以RGB颜色模式为主。在许多的图像处理软件中，都提供了色彩的调配功能，输入三原色的数值可以调整颜色的变化，也可以根据软件所提供的调色板来选择颜色。1.3.2 HTML语言对颜色的描述在网页中，HTML语言对于色彩的描述方法是实用RGB的十六进制表示方法。对于三原色，HTML分别给予两个十六进制去定义，也就是每个原色可以有256种彩度，所以三原色混合生成1700万多种颜色。如红色的代码是“#ff0000”.1.3.3 色彩类型根据色彩专家规定，裸视能够识别的色彩达数万种，而通过科学仪器可以辨认的色彩则达上亿种。要把如此丰富绚丽的色彩化庞杂凌乱为秩序井然，就必须建立科学而系统的色彩分类方法及规范尺度。目前，国际指认的色彩分类主要依据有色彩系和无色彩系两大颜色序列的内在共性规律划分而成的。无彩色系，指光源色、反射光或透射光在视觉中未能显示出某一种单色特征的色彩序列。如黑色、白色及两者按不同比例混合，所能得到深浅各异的灰色系列等。他们呈现出一种绝对的、坚固的和抽象的色彩效果。反之，称为有彩色系。可见光谱中的红、橙、黄、绿、青、蓝、紫七种基本色及它们之间不同量的混合色都属于有彩色系。这些色彩往往给人以相对的、易变的及具体的感受。无彩色系不仅可以从物理学上，如全吸收或全反射得到科学的论证，而且在视觉和心理反应上，也与有彩色系一样有着并驾齐驱的表现价值。因此，无彩色系毋庸置疑地属于色彩体系中的一个重要组成部分。1.3.4 色彩三要素在自然界中，颜色可以分为色彩和非色彩两大类，黑色、白色和灰色在色彩学中属于非色彩。且黑色和白色的对比可以说是色彩对比的最高境界，很多网站都是用黑色、白色和灰色来进行配色。所有的色彩都具有最基本的三个要素：色相、饱和度和亮度。1.色相色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。色的不同是由光的波长的长短差别所决定的。所谓色相，指的是这些不同波长的色的情况。波长最长的是红色，最短的是紫色。把红、黄、绿、蓝、紫和处在他们两两之间的黄红、黄绿、蓝绿、蓝紫、红紫这10种颜色作为色相环。在色相环上排列的色是饱和度高的色，称为纯色。这些色在色相环上的位置是根据视觉和感觉得相等间隔来进行安排的。用类似的方法还可以差别细微的多种色来。在色相环上，与环中心对称，并在180的位置两端的色，称为互补色2饱和度用数值表示颜色的鲜艳或鲜明的程度称为饱和度。有色彩的各种颜色都具有饱和度值，所有非色彩的饱和度值为0，对于色彩饱和度的高低，区别方法是根据这种颜色中包含灰色的程度来计算的。例如，红、橙、黄、绿、蓝、紫等都是饱和度最高的色彩。任何一个色彩加入白、灰、黑，都会降低其饱和度。3. 亮度在非彩色中，亮度最高的色为白色，亮度最低的色为黑色，中间存在一个从亮到暗的灰色系列。在色彩中，任何一种饱和度色都有着自己的亮度特征。例如，黄色为亮度最高的颜色，处于光谱的中心位置，紫色是亮度最低的颜色，处在光谱的边缘，一个彩色物体表面的光反射率越大，对视觉刺激的程度越大，看上去就越亮，这一颜色的亮度也就越高。亮度在三要素中具较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。色相与饱和度则必须依赖一定的明暗才能显现，色彩一旦发生，明暗关系就会同时出现，在我们进行一幅素描的过程中，需要把对象的有色彩关系抽象为明暗色调，这就需要有对明暗的敏锐判断力。我们可以把这种抽象出来的亮度关系看作色彩的骨骼，它是色彩结构的关键。4、色彩三要素之间的关系如果给亮蓝色添加白色，那么原来的亮蓝色的色值将减小，而且所得色彩的饱和度也会降低，最终呈现白色。为同样的亮蓝色添加黑色，会生成一个暗蓝色，并且由于饱和度的变化，这个新颜色比较靠近中性色彩。如何给这个亮蓝色添加灰色，原饱和度将降低，但色值不发生任何变化。1.3.5 色相、色调116色体系色相、色调体系的最初来源是根据人的语言对颜色的描述：对偏白的颜色人们通常会使用“浅”、“柔”等形容词看来描述，而对作为三原色的红色、黄色、蓝色等人们自然会联想到“鲜艳”、“强烈”等形容词。而色调就是人们对可以利用同一形容词描述的颜色进行的汇总。色相、色调体系是结合颜色的三种属性并从人们心理的角度对颜色进行分类的科学体系，它在很大程度上方便了用户对颜色的分类和使用。在色相、色调体系中，10种色相分别指：红色、橙色、黄色、黄绿色、绿色、青绿色、蓝色、蓝紫色、紫色、紫红色。在色相、色调体系中，11种色调分别指：鲜艳、高亮、明亮、清澈、苍白、灰亮、隐约、浅灰、阴暗、深暗、黑暗。在这11种色调中，“鲜艳”和“高亮”色调的彩度很高，所以会给人一种华丽而又强烈的感觉；“清澈”和“隐约”的亮度和彩度都比较高，所以会给人一种柔和的感觉；“灰亮”和“浅灰”以及“阴暗”会给人一种朴素而又冷静的感觉；”深暗“和”黑暗“的亮度很低，所以会给人一种深沉而又凝重的感觉。色相、色调116色体系就是将前面所介绍的色相环与色调表结合在一起的产物。它是由110种彩色颜色（10个等级的色相 * 11个等级的色调=110种颜色）和6种非彩色颜色所构成的。 1.4 色相环的作用作为一名设计师，如果你还说出“这种颜色好看，那种颜色不好看“之类的话时，这说明你对颜色还没有正确了解。哪里有光，哪里就有颜色。有时我们会认为颜色是独立的这是蓝色，那是红色，但事实上，颜色不可能但单独存在，它总是与另外的颜色产生联系，就像音乐的音符，没有某一种颜色是所谓的”好“或”坏“。只有当与其他颜色搭配作为一个整体时，我们才能说是协调或者不协调。色相环将告诉我们颜色之间的相互关系。1.4.1 色相环的构成白色光包含了所有的可见颜色，我们看到的是由紫到红之间的无穷光谱组成的可见光区域，就像你所看到的彩虹颜色。为了在使用颜色时更加实用，人们对它进行了简化，将它们分为12种基本的色相。色相环由12种基本的颜色组成。首先包含的是色彩三原色，即红、黄、蓝。原色混合产生了二次色，用二次色混合，产生了三次色。原色是色相环中所有颜色的“父母“。在色相环中，只有三原色中的这三种颜色不是由其他颜色混合而成的。三原色在色相环中的位置是平均分布的。二次色所处的位置是位于两种三原色一半的地方。每一种二次色都是由离它最近的两种原色等量混合而成的颜色。三次色是由相邻的两种二次色混合而成。1.4.2 色相环中的颜色特点在色相环中的每一种颜色都拥有部分相邻的颜色，如此循环成一个色环。共同的颜色是颜色关系的基本要点，必须对此有深入的了解。与原色相邻的左、右各3种的七种颜色，则都是包含这个原色的色彩。离原色越远，其包含原色就越少。颜色有明暗之分，或者称为颜色数值。为了显示颜色的明暗，所以色相环有多个环。两个外围的大环是暗色，里面两个小环是明色。色相环由五个同心环组成，从暗到亮暗色处于大环，明色处于小环，而中间是颜色的基本色相。1.5 网页色彩的四种功能就像小说和电影中有主角和配角一样，在色彩设计中也有不同职责的分别。在色彩设计职责中，有主色、背景色、融合色（辅助色）和强调色（点睛色）四种不同的功能。1.5.1 主色在舞台上，主角站在聚光灯下，配角们退后一步来衬托踏他。配色上的主角也一样，其配色要比配角更清楚、更强烈，使人一看就知道是主角。从而使视线固定下来。画面的整体统一，观众的情绪也就稳定下来。1.5.2 背景色舞台的中心是主角，但是决定整体印象的却是背景色。用花纹、文字或具体图像构成的背景图像，效果类似于边框和背景色，能够表现出稳重的格调。背景图像对于想传达趣味性强、稳重和格调高的网页时很适合的，但对于以商业信息为主的网页就不匹配了。1.5.3 融合色在页面上不同的地方涂上相同的颜色，通过颜色的反复效果使同样的颜色产生共鸣，从而让页面具有整体感。1.5.4 强调色页面的整体使用压抑的颜色，然后再小块面积上使用强烈的颜色，就能够起到着重强调的作用。色彩面积越小，着重的效果越强。2、色彩之间的关系（网页配色的方法）1、 单色搭配一种色相由暗、中、明三种色调组成，这就是单色。单色搭配上并没有形成颜色的层次，但形成了明暗的层次。这种搭配在设计中应用时，制作出来的效果永远不会差，其重要性也可见一斑。2、 类比色搭配相邻的颜色称为类比色。类比色都拥有共同的颜色。这种颜色搭配能产生一种令人愉悦、低对比度的和谐美感。类比色非常丰富，在设计时应用这种搭配同样能让浏览者轻易产生不错的视觉效果。3、 补色搭配在色相环上直线相对的两种颜色称为补色。补色形成强烈的对比效果，传达出活力、能量、兴奋等意义。补色要达到最佳的效果，最好是其中一种颜色所占面积比较小，另一种的比较大。比如在一个蓝色的区域里搭配橙色的小圆点。4、 分离补色搭配同时使用补色及类比色的方法来确定颜色的关系称为分离补色。这种颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感，形成了一种既和谐又有重点的颜色关系。5、 原色搭配除了在一些儿童的产品中，三原色同时使用（红、黄、蓝搭配）是比较少见的。但是，无论是在中国还是美国的文化中，红黄搭配都非常受欢迎。红黄搭配应用的范围很广从快餐店到加油站，我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见，但只有当两者的区域分离时，才会显得吸引人，如果紧邻在一起，则会产生冲突感。6、 二次色搭配二次色之间都拥有一种共同的颜色其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色所以它们能够轻易形成协调的搭配。如果三种二次色同时使用，则显得很舒适，有吸引力，并具有丰富的颜色深度及广度这一点在其它关系上很难找到。7、 全色相搭配从色相环上取出所有的色相，开放、热闹、像节日一样的配色就产生了。这种全色相搭配在游戏网站的设计上常用到。即使是相同的色相，排列的顺序不同，效果也会大不相同的。如彩虹色的色相顺序，给人以强调秩序、集中型好的印象。相反各种色相排列的顺序打乱，任意排列，就形成了节日版的、开放性的配色效果。色彩与心理色彩，是在生活中时时刻刻出现并与我们细细相关的“奇妙的世界”。在生活中我们时时与它相撞或擦肩而过，便会产生印象。例如，受过重伤的人在以后数年甚至更久都惧怕见红色；溺水的人怕再见到蓝色；有个醉酒经历的人见到黄色、白色也许会过分“敏感”等等。把色彩融于商业设计中更有许多有趣的表现；日本一家快餐店把店堂内所有的桌椅颜色都设计为刺目的红色。经营者发现过去那些用完餐后还爱滞留在店内聊天来的顾客都一反常态，就餐完后立即离开。结果客流量比起以前更大，经营额也加倍地增加。现在的一些膨化食品（如薯片）的包装往往采用黄、橙红之类的暖色，看起来分量感十足、性价比高，但打开后才发现内装食品“寥寥无几”。3.1 色彩的联想色彩是大自然中最神奇的现象，不管人们是否对其感兴趣，色彩都会影响人们的生理与心理活动。色彩具有精神的价值，我们常常感受到色彩对心理的影响，这些影响总是在不知不觉中起作用，左右着情绪。色彩的心里效应发生在不同层次中，有些属于直接的刺激，有些要通过间接地联想，有些更高层次的则涉及人的观念与信仰。3.1.1 色彩的具体联想当我们看到某种颜色的时候，总是能够将这种颜色和现实生活中的某种事物自然地联系起来，这称为色彩的具体联想。色彩的联想常常是通过经验、记忆或知识而取得的。色彩所形成的这种“视觉语言”常常表达着不同的含义。（1）、红色。红色可以让人联想到火、血液、太阳等。（2）、橙色。橙色可以让人联想到灯光、橙子、枫叶等。（3）、黄色。黄色可以让人联想到光、柠檬、迎春花等。（4）、绿色。绿色可以让人联想到草地、树叶、禾苗等。（5）、蓝色。蓝色可以让人联想到天空、冰、水等。（6）、紫色。紫色可以让人联想到丁香花、葡萄、茄子等。（7）、黑色。黑色可以让人联想到夜晚、墨汁、木炭、黑人等。（8）、白色。白色可以让人联想到白云、棉花糖、面粉、雪等。（9）、灰色。灰色可以让人联想到石头、乌云、草木灰、树皮等。3.1.2 色彩的抽象联想千万年来的生活实践，人类由鲜血的红色、植物的绿色、稻麦的黄色、海洋的蓝色等各种自然色彩中形成一系列共同的印象，使人们对色彩这一物理学上的光波赋予了特别的象征意义，这称为色彩的抽象联想。（1）、红色。红色可以让人联想到热情、危险、活力等。红色是强有力的色彩，是热烈、冲动的色彩。约翰伊顿教授描绘了受不同色彩刺激的红色。他说：“在深红色的底子上，红色平静下来，热度在熄灭这；在蓝绿色底子上，红色就像炽热燃烧的火焰；在黄绿色底子上，红色变成一种冒失的、莽撞的闯入者，激烈而又不寻常；在橙色的底子上，红色似乎被郁积着，暗淡而无生命，好像焦干了似的。“（2）、橙色。橙色可以让人联想到温暖、欢喜、嫉妒等。橙色的波长仅次于红色，因此它也具有长波所具有的特征:使脉搏加速，并有温度升高的感觉。橙色是十分活泼的光辉色彩，是暖色中最温暖的色彩，它使我们联想到金色的秋天、丰硕的果实。因此是一种富足的、快乐而幸福的色彩。橙色稍稍混入黑色或白色，会称为一种稳重、含蓄而又明快的暖色，但混入较多的黑色后，就成为一种烧焦的色，橙色中加入较多的白色会带有一种甜腻的味道。橙色与蓝色的搭配，构成了最响亮、最欢快的色彩。（3）、黄色。黄色可以让人联想到光明、希望、快乐、平凡等。黄色是亮度最高的色，在高明度下能够保持很强的纯度。黄色的灿烂、辉煌，有着太阳般的光辉，因此象征着照亮黑暗的智慧之光；黄色有着金色的光芒，因此又象征着财富和权利，它是骄傲的色彩。黑色或紫色的衬托可以使黄色达到无线扩大的强度。白色是吞没黄色的色彩，淡淡的粉红色也可以像美丽的少女一样将黄色这骄傲的王子征服。黄色最不能承受黑色或白色的侵蚀，这两个色彩只要稍微渗入，黄色即刻失去光辉。（4）、绿色。绿色可以让人联想到和平、安全、生长、新鲜等。鲜艳的绿色非常美丽、优雅，特别是用现代化学技术创造的最纯的绿色，是很漂亮的色彩。绿色很宽容、大度，无论蓝色还是黄色的渗入，仍旧十分美丽。黄绿色单纯，年轻；蓝绿色清秀、豁达。含灰的绿色，也是一种宁静、平和的色彩，就像暮色中的森林火晨雾中的田野那样。（5）、蓝色。蓝色可以让人联想到平静、悠久、理智、深远等。蓝色是博大的色彩，天空和大海等最辽阔的景色都呈蔚蓝色，无论深蓝色还是淡蓝色，都会使我们联想到无尽的宇宙或流动的大气，因此，蓝色也是永恒的象征。蓝色是最冷的色，使人们联想到冰川上的蓝色投影。蓝色在纯净的情况下并不代表感情上的冷漠，它只不过代表一种平静、理智与纯净而已。真正令人的情感缩到冷酷悲哀的色彩，是那些被弄混浊的蓝色。（6）、紫色。紫色可以让人联想到优雅、高贵、沉重、神秘。波长最短的可见光是紫色光。通常，我们会感觉有很多紫色，因为红色加少许蓝色或蓝色加少许红色都会呈现明显的紫色，所以很难确定标准的紫色。约翰伊顿对紫色做过这样的描述：紫色是非知觉的色，神秘，给人印象深刻，有时给人以压迫感，并且因对比的不同，时而富有威胁性，时而又富有鼓舞性。当紫色以色域出现时，便可能明显产生恐怖感，在倾向于紫红色时更是如此。歌德说：“这类色光透射在一幅景色上，就暗示着世界末日的恐怖。“紫色是象征虔诚的色相，当紫色深化或暗化时，有蒙昧迷信的象征。潜伏的大灾难就常从暗紫色中突然爆发出来，一旦紫色被淡化，当光明与理解照亮了蒙昧的虔诚之色是，优美可爱的晕色就会使我们心醉。用紫色表现混乱、死亡和兴奋，用蓝紫色表现孤独与献身，用红紫色表现神圣的爱和精神的统辖领域简而言之，这就是紫色色带的一些表现价值。它处于冷暖之间游离不定的状态，加上它的低明度的性质，也许就构成了这一色彩在心理上引起的消极感。与黄色不同，紫色可以容纳许多淡化的层次，一个暗的纯紫色只要加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的大