《Photoshop网页视觉设计》课件第02章OK.pptx

1、2网页设计色彩基础第章本章要点色彩的对比网页色彩搭配的方法网页安全色认识网页色彩色彩理论色彩的情感网页色彩搭配的原则一、认识网页色彩色彩是人类生活中的重要视觉信息，在网页设计中，色彩是设计构成的关键因素之一色彩是有情感的，在进行网页设计时，颜色的搭配必须重点考虑，并且能够与主题呼应网页色彩是网站风格的决定性因素之一，色彩搭配要协调统一，给人以美感与舒适感二、网页安全色RGB模式的颜色网页安全色PS中的网页安全色显示器的工作原理是基于RGB模式的，它所表现的颜色是由红、绿、蓝三种基色混合而成的，每一种基色的取值范围为0255，如红色表示为（255，0，0），十六进制表示为#FF0000。这样，理

2、 论 上 可 以 得 到2562562561680万种颜色。最早使用互联网的一些发达国家花费了很长的时间探索这一问题的解决方案，终于发现了216网页安全色彩（216 Web Safety Color），如图2-2所示。它是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合，也就是说在任何用户的显示设备上都能显示相同效果的色彩。使用216网页安全色彩进行网页配色可以避免失真问题。在进行网页设计时，没有必要刻意记忆216网页安全色中的每一种颜色，Photoshop软件中已经设计了该功能。在【拾色器】对话框中选择“只有Web颜色”选项，这时显示的就是网页安全色。另外，Photosh

3、op还提供了【色板】调板，可以显示网页安全色。但是在网络上，即使是一模一样的色彩，也会由于显示设备、操作系统、显卡以及浏览器的不同而显示出不同的效果。这样，一个配色非常漂亮的网页，可能每个人看到的效果都会有所差异，那么，如何才能解决这个问题呢？网页安全色是当红、绿、蓝三种基色的取值为0、51、102、153、204、255时构成的颜色组合，共有 666=216种颜色（其中彩色为210种，非彩色为6种）三、色彩理论色彩的形成色彩的三属性色彩模式四、色彩的情感红色橙色黄色绿色蓝色紫色黑色白色灰色五、色彩的对比色相对比纯度对比明度对比冷暖对比六、网页色彩的搭配方法基于情感的搭配基于三属性的搭配七、网

4、页色彩搭配原则色彩的艺术性色彩的鲜明性色彩的独特性色彩的合理性色彩远看色，近看形。网页色彩的选择与搭配一定要鲜明，这样比较容易引人注意，会给浏览者耳目一新的感觉。色彩鲜明并不是说色彩一定要鲜艳，而是色彩搭配上独树一帜，能够瞬间抓住访问者的注意力并留下深刻的印象。一个网站的色彩设计必须要与众不同，有自己独特的风格，这样才能给浏览者留下深刻的印象。如果没有自己的特色，最多只能停留在美观层面上，无法达到专业层面。另外，网页用色也要结合网站特点，力求独特，给访问者以新鲜感。网页的色彩设计既要遵循平面设计的艺术规律，又要考虑到网站本身的一些特点，如显示器分辨率的限制、网页浏览器对HTML文档解释的差异性

5、等，做好整体规划与色彩设计，按照内容决定形式的原则，使网页表现出一定的艺术特色。色彩的合理性主要包括两个方面：一是色彩的选择要根据网站主题来确定。例如，用蓝色体现科技型网站。二是色彩搭配要合理，要给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩。本章总结网页设计属于视觉设计的范畴，色彩的选择与搭配相当重要，因为访问者对网页的第一印象往往来自于视觉，然后才是网页信息。所以，本章主要介绍了一些关于色彩的基础知识以及网页配色的方法。通过本章的学习，读者应该做到：了解网页色彩对访问者情绪的影响，网页安全色的概念与使用。认识色彩的形成，光、固有色、视觉之间的关系，色彩的三属性。掌握常用色彩模式的原理

6、，RGB模式与CMYK模式之间的关系。了解不同的色彩代表不同的情感，掌握一些常用颜色所表达的情绪，并且能够应用到网页设计中。掌握色彩对比的类型，熟悉色相对比、明度对比、纯度对比、冷暖对比的定义及其在设计中的运用。掌握网页色彩搭配的方法，能够在设计网页时基于色彩的三属性进行配色，也能够基于色彩的情感进行配色。掌握网页色彩搭配的基本原则。谢谢光的颜色首先从光说起，对于地球来说，最大的光源就是太阳，人们习惯上认为太阳光是白色的。在初中的物理实验课上，将一束阳光透过三棱镜折射到白色的屏幕上，就可以看到太阳光分解成了红、橙、黄、绿、青、蓝、紫等各种颜色的光，这种现象叫光的色散。光的色散现象说明太阳光是复

7、色光，由于它是由多种单色光混合而成的；而分解后的每一种光不能再继续分解，所以称为单色光。光的色散指的是复色光分解为单色光的现象。在各种不同的单色光中，红、绿、蓝被称为光的三原色。因为它们按不同的比例混合，会产生丰富多彩的颜色。在红、绿、蓝这3种单色光中，每一种光的发光级别也不一样，共有256个级别，即0255。其中0代表不发光；而255代表最亮。所以，红、绿、蓝这3种光按照不同的比例混合，就可以得到丰富多彩的颜色。所有发光物体都是基于这种原理工作的，如电视机、显示器、投影仪等。下一页物体颜色接下来介绍物体的颜色。物体本身具有固有色，但是没有光是看不见的，光线不同，物体所表现出的颜色也不同。那么

8、物体的颜色是如何呈现出来的呢？当光线照射到物体上时，一部分光被物体吸收，一部分光被物体反射，如果物体是透明的，还有一部分光会透过物体。不同的物体对不同颜色的反射、吸收和透过的情况是不同的，所以自然界中的物体呈现出不同的颜色。透明物体的颜色是由透过它的色光决定的，不透明物体的颜色是由它的反射色光决定的。下一页色彩的形成五光十色的自然界是光、色（物体的固有色）与视觉三者的统一。首先，没有光就没有色，比如在漆黑的夜晚是看不到颜色的。另外，视觉上不能存在问题，如色盲症，否则也无法辨别颜色。其次，不同的物体对光色的吸收与反射能力各不相同，被物体吸收的光线是看不见的，只有被物体反射的光线才能看到。例如，当

9、光照射到白色物体上，它反射所有的光线，所以看到的是白色；而当光照射到红色物体上，它反射红光而吸收了其他颜色的光，所以看到的是红色；而当光照射到黄色物体上，它反射黄光而吸收了其他颜色的光，所以看到的是黄色。返回色相色相（Hue）是指色彩的相貌，也是区别于其他色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。从光学意义上讲，色相的差别是由光波波长的长短决定的。即便是同一类颜色，也能分为几种色相，例如黄色可以分为中黄、土黄、柠檬黄等。最初的基本色相为红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色，按照光谱顺序为红、橙红、黄橙、黄、黄绿、绿、

10、绿蓝、蓝绿、蓝、蓝紫，紫、红紫，从而制出十二色相环，如图所示。在这十二色相中如果进一步再找出其中间色，便可以得到二十四色相环。在网页设计中，选择暖色相如红色、橙色、黄色等为主调，可以使网站显得喜庆、成熟或温馨；而选择冷色调如青色、蓝色、紫色等为主调，可以使网站显得宁静、深邃或优雅。下一页饱和度饱和度（Saturation）是指色彩的鲜艳程度，也称色彩纯度。纯度越高，颜色越鲜明，纯度较低，颜色越暗淡。在英文中，Saturation及Chroma讲的是同一回事。换句话说，饱和度是表明一种颜色中是否含有白色或黑色的成份。假如某颜色中不含有白色或黑色的成份，那就是纯色，饱和度最高；如果含有越多的白色或

11、黑色成份，它的饱和度就是越低，颜色就不纯，不鲜艳。明度明度（Brightness）是指色彩的明亮程度。各种有色物体由于它们反射光量的区别而产生颜色的明暗强弱。色彩的明度有两种情况：一是同一色相不同明度。如同一颜色在强光照射下显得明亮，弱光照射下显得较灰暗。二是各种颜色的不同明度。每一种纯色都有与其相应的明度。黄色明度最高，蓝紫色明度最低，红色、绿色为中间明度。色彩的明度变化往往会影响到饱和度，如红色加入黑色以后明度降低了，同时饱和度也降低了；如果红色加白则明度提高了，饱和度却降低了。返回HSB模式颜色的三属性，即颜色具有色相、饱和度、明度3个基本属性，这实际上就是HSB模式。这是一种从视觉的角

12、度定义的颜色模式。基于人类对色彩的感觉，HSB模型描述了颜色的三个特征。色相H（Hue）：即颜色的名称，在0360的标准色轮上，色相是按位置度量的。饱和度S（Saturation）：指颜色的纯度或鲜浊度。表示色相中彩色成分所占的比例，是以0%100%来度量的。亮度B（Brightness）：指颜色的相对明暗程度，通常是以0%100%来度量的。RGB模式RGB模式是基于光色的一种颜色模式，所有发光体都是基于该模式工作的，例如电视机、电脑显示器、幻灯片等都是基于RGB模式来还原自然界的色彩。在该模式下，R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色），这三种颜色就是光的三原色

13、。每一种颜色都有256个亮度级别，所以三种颜色通过不同比例的叠加就能形成约1680万种颜色（俗称“真彩色”)，几乎可以得到大自然中所有的色彩。通俗地理解RGB模式，可以把它想象成红、绿、蓝三盏灯。当它们的光相互叠加的时候，就会产生不同的色彩，并且每盏灯有256个亮度级别。当值为0时表示“灯”关掉；当值为255时表示“灯”最亮。下一页CMYK模式CMYK模式是针对印刷的一种颜色模式。印刷需要油墨，所以CMYK模 式 对 应 的 媒 介 是 油 墨（颜 料）。在 印 刷 时，通 过 洋 红（Magenta）、黄色（Yellow）、青色（Cyan）三原色油墨进行不同配比的混合，可以产生非常丰富的颜色

14、信息，使用 0%100%的浓淡来控制。从理论上来说，只需要CMY三种油墨就足够了，它们以100%的比例混合在一起就应该得到黑色。但是由于制造工艺的原因，还不能造出高纯度的油墨，所以CMY三种油墨混合后的结果实际是一种暗红色。因此，为了满足印刷的需要，单独生产了一种专门的黑墨（Black），这就构成了CMYK印刷四分色。RGB与CMYK的关系 区别：RGB模式是针对发光体的，存在于屏幕等显示设备中。CMYK模式是反光的，需要外界光源才能被感知。RGB色域的颜色数比CMYK多出许多。但两者各有部分色彩是互相独立（即不可转换）的。联系：RGB模式是加色模式，CMYK模式是减色模式。两个加色相加得到一

15、个减色，两个减色相加得到一个加色。即红+绿黄，绿+蓝青，蓝+红洋红；青+洋红蓝，洋红+黄红，黄+青绿。互补色可以完全吸收对方。返回红色红色对人眼睛的刺激效果最显著、最容易引人注目，也最能够使人产生心理共鸣。一般说来，红色在高饱和度时，能够向人们传递出活力、力量、坚持、急躁、愤怒、热烈、喜庆、兴奋、生命、革命、敬畏、残酷、危险等的心理信息。如图所示为一家酒店的网页，采用了暗红色，既突出喜庆、红火的气氛，又不会给人过度的视觉刺激，引起视觉疲劳。任何一种颜色都具有积极情感与消极情感两个方面，例如红色可以表达出喜庆、热烈、革命等积极情感；也可以传递出血腥、凶杀、恐怖等消极情感。另外，色彩所传达的情感与

16、人们的社会意识、生活经验、风俗习惯、种族差异等因素密切相关。返回橙色橙色是仅次于红色波长的暖调色彩，让人联想到玉米、果实、桔子、秋叶等。所以橙色处于最饱和状态时，能够向人们传递喜悦、安全、刺激、温暖、华丽、富裕、丰硕、成熟、甜蜜、快乐、辉煌、富贵等心理信息。橙色没有红色那么激烈，在空气中的穿透力仅次于红色，适用范围较广，在网页设计中被应用于各种不同信息类型的网站，配合黑色、深灰色，显得非常时尚。返回黄色黄色是所有色彩中最明亮的。黄色表现出乐观、光明、纯真、轻松、高贵、权势、诱惑等多种情感。黄色中加入黑则会丧失黄色特有的光明，表现出妒嫉、怀疑、失信及缺少理智；加白淡化为浅黄色时，它显得苍白乏力、

17、幼稚等等。如图所示为黄色调的网页，给人以清新明朗的感觉。但是这种色调的网页并不多见，因为黄色过于明亮，容易引起视觉疲劳，所以黄色主要作为配色出现在网页中。返回绿色绿色是植物的颜色，象征着生命。对人的生理作用及心理反应均显得非常平静、温和。最纯正的绿色蕴涵着和平、和谐、放松、真诚、满意、慷慨、生命、青春、希望、舒适、安逸、公正等情感含义。如图所示为绿色调的网页，整个网页给人以充满希望的感觉。返回蓝色蓝色最容易让人联想到大海和天空，它使人感到辽阔、永久和深远。一般情况下，饱和度高的蓝色表现出宽广、和平、希望、忠诚、灵活、容忍、纯洁、理想、深邃、博大、永恒、理想、信仰、尊严、保守、冷酷等心理感受。蓝

18、色变淡时，它给人以高雅、轻盈、飘渺的美感；蓝色变暗时，则显示出朴素、顽强、孤独等感觉。一般地，科技企业类的网站多喜欢使用蓝色调。返回紫色紫色是一种在自然界中比较少见的颜色。象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。紫色在色相环中明度最低，注目性差。但是由于饱和度较高的紫色表现出高贵、纯洁、庄重、虔诚、神秘等心理感受，所以在网页设计中，紫色调的网页多与女性有关。返回黑色黑色是没有纯度的颜色，它本身没有刺激性，但是与其它颜色搭配可以增强心理刺激。黑色与白色的搭配充满个性；黑色与橙色搭配则非常时尚；黑色与红色搭配则产生极强的视觉冲击力黑色通常给人充实、刚正、毅力、永

19、恒、严肃、力量、阴森、荒凉、恐怖、死亡、悲哀、沉默等心理感受。在网页设计中，黑色能和许多色彩构成良好的对比关系，运用范围很广。返回灰色灰色是黑、白的中和色，介于黑色和白色之间。灰色能够吸收其他色彩的活力，削弱色彩的对立面。灰色是一种中立色，也被称为高级灰，是经久不衰的颜色。在心理上灰色有柔和、独立、平凡、谦逊、沉稳、孤独、含蓄、优雅、绝望、消极的感受。在网页设计中，合理运用灰色可以给人以高品味、含蓄、精致、耐人寻味的感觉。白色白色让人们联想到雪、白云、天鹅等，给人的心理感受是纯洁、光明、干净、孤立、宽广、无私、空虚、飘渺、和平等。白色在大多数的场合是被人们所喜欢的一种颜色。网页设计中，白色一直

20、都是永恒的颜色，无论是作为网页的主色调还是配色，白色的使用都是最多的。返回同类色对比在色相环上相隔距离15度以内的颜色，被看作为同类色。这种色相对比是最弱的，一般看作是同一色相里的不同明度与纯度的对比，非常有利于统一色调，效果单纯、柔和、协调，但负面作用是容易出现单调呆板、平淡无力的感觉。邻近色对比在色相环上相隔距离60度左右（不超过90度）的颜色为邻近色。邻近色对比属于色相的中对比，比同类色对比明显些、丰富些、活泼些，对比效果丰满、柔和，既保持了协调统一的优点，又克服了视觉不满足的缺点。下一页对比色对比在色相环上相隔距离120度左右的颜色为对比色。对比色对比属于色相中的强对比，它要比邻近色对

21、比鲜明、强烈、饱满。正是因为对比效果强烈，容易使人兴奋激动，所以过分地刺激会使视觉疲劳，处理不当会产生烦躁、不安之感。应用这类对比时一定要注意色彩的调和与统一，使画面协调一致。互补色对比在色相环上两两相对的颜色为互补色，互补色对比是色相中最强烈的对比关系。对比效果更完整、更充实、更富有刺激性，其优点是饱满、活跃、生动、刺激。不足之处是有一种幼稚、原始的和粗俗的感觉，不含蓄，不雅致，过分的刺激易引起视觉疲劳。返回明度对比色彩的明度分为11个色阶，三个基调。在明度色标中，凡是明度在03级的色彩称为低调色，46级的色彩称为中调色，710级的色彩称为高调色。（1）高长调，如10：8：1，该调明暗反差大

22、，感觉刺激、明快、积极、活泼。（2）高中调，如10：8：6，该调明暗反差适中，感觉愉快、清晰、鲜明、安定。（3）高短调，如9：8：7，该调明暗反差微弱，感觉优雅、柔和、高贵、软弱、朦胧、女性化。（4）中长调，如4：6：10或7：6：1，该调以中明度色作为基调，用浅色或深色进行对比，感觉强硬、稳重中显生动、男性化。（5）中中调，如4：6：8或7：6：3，该调为中对比，色彩效果饱满，有丰富含蓄的感觉。（6）中短调，如4：5：6，该调为中明度弱对比，感觉含蓄、平板、模糊。（7）低长调，如1：3：10，该调深暗而对比强烈，感觉雄伟、深沉、警惕、有爆发力。（8）低中调，如1：3：6，该调对比适中，感觉保

23、守、厚重、朴实、男性化。（9）低短调，如1：3：4，该调深暗而对比微弱，感觉沉闷、忧郁、神秘、孤寂、恐怖。（10）最长调，如1：10，该调是最明色与最暗色各占一半的配色，对比最强烈，感觉强烈、单纯、生硬、锐利、眩目等。返回在纯度色标中，左侧为灰色，右侧为最纯色，中间划分为9个等级。纯度对比的强弱决定于纯度差，共分为3个纯度基调。低纯度基调：由13级的低纯度色组成的基调，产生脏浊，含混无力的感觉。中纯度基调：由46级的低纯度色组成的基调，产生温和、柔软、沉静的感觉。高纯度基调：由79级的低纯度色组成的基调，产生强烈、鲜艳、明丽的感觉。在选择色彩组合时，当基调色与对比色间隔距离在5级以上时，称为强

24、对比；35级时称为中对比；12级时称为弱对比。据此可划分出九种纯度对比基本类型。（1）鲜强调，如9：8：1，感觉鲜艳、生动、活泼、华丽、强烈。（2）鲜中调，如9：8：5，感觉较刺激，较生动。（3）鲜弱调，如9：8：7，由于色彩纯度都高，组合对比后互相起着抵制、碰撞的作用，故感觉刺目、俗气、幼稚、原始。（4）中强调，如4：6：9或7：5：1，感觉适当、大众化。（5）中中调 如4：6：8或7：6：3，感觉温和、静态、舒适。（6）中弱调 如4：5：6，感觉平板、含混、单调。（7）灰强调 如1：3：9，感觉大方、高雅而又活泼。（8）灰中调 如1：3：6，感觉朴素、沉静、较大方。（9）灰弱调 如1：3：

25、4，感觉雅致、细腻、耐看、含蓄、朦胧、较弱。纯度对比在色相环的基础上，将纯色与同明度的灰色按等差比例混合，可以建立一个11等级纯度色系。返回冷暖对比由于色彩感觉的冷暖差别而形成的色彩对比称为冷暖对比。色彩的冷暖感觉并非肌肤的温度感觉，而是人们对色彩的一种心理反应，它与人们的生活经验相联系，是联想的结果。一般来说，红、橙、黄色使人联想到太阳、火花、火炬、烧红的铁块等，从而与温暖的感觉联系起来。而青、蓝色使人联想到大海、蓝天、远山、雪地等，从而与凉爽的感觉联系起来。色彩的冷暖感觉主要由色相决定的，在色相环上把红、橙、黄称为暖色，把橙色称为暖极；把蓝绿、蓝、蓝紫为冷色，把蓝色称为冷极，如图2-25所

26、示。在网页设计中，恰当地运用色彩的冷暖对比，不仅可以增强远近距离感，而且可以加强色彩的艺术感染力。返回基于色彩的三属性搭配1、无色系搭配在网页配色时不使用彩色，只用黑、白、灰色进行协调统一，这种配色效果简洁、质朴又不失厚重，给人以冷淡而理智的现象。2、同一色搭配只使用单一的色相，然后调整其明度和纯度，将色彩变淡或加深，从而产生色彩的对比，这样的页面看起来色调统一，具有层次感。但是，一定要将明度与纯度的层次拉开，否则会含混不清。同一色搭配只是视觉设计的一种方式，形式过于单调，无法创造出多变的作品。3、邻近色搭配邻近色是指在色相环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以避免网页色彩杂乱，过渡自然，易于达到页面和谐统一的效果，没有大起大落的感觉。下一页基于情感的色彩搭配返回浪漫色调娇美色调轻快色调动感色调优雅色调华丽色调自然色调古典色调时尚色调潇洒色调清爽色调现代色调色彩本无情感内容，但却能通过视觉影响到人们的情绪、思想、行为等，所以是人类赋予了色彩不同的情感。以下是多色配色词典，是基于色彩情感的配色方案。