网页配色技巧-课件.ppt

1、6.2.5网页网页配色技巧配色技巧目标目标一一了解网页色彩基本知识了解网页色彩基本知识二二掌握色彩的三要素掌握色彩的三要素三三掌握色彩对比和色彩心理的表现形式掌握色彩对比和色彩心理的表现形式四四掌握网页配色原则与技巧掌握网页配色原则与技巧 网站整体运营流程公司网站网站前期的策划与设计网站中期的制作与开发网站后期的推广与维护网站上传与维护网站推广与安全网站前台页面制作网站后台程序开发网站需求分析与策划方案网站页面效果图设计与定稿 网页的色彩是树立网站形象的关键之一。网页的背景，文字，图标，边框，超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵？一、色彩入门1、色彩与视觉

2、原理：l色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因，色是光感觉的结果。一、色彩入门2.颜色分无彩色和有彩色两大类。l无彩色是指黑，白，灰系统色。l有彩色是指除了非彩色以外的所有色彩，如，红、绿蓝等。3、三原色l一切颜色都来自三原色：红、绿、蓝RGB，其它的色彩都可以用这三种色彩调和而成。例如，黄=红+绿，紫色=红+蓝，白色=红+绿+蓝l用6个十六进制数来表示红、绿、蓝3种颜色的含量，组成一个6位的十六进制数，就是RGB颜色。l例如，红色为FF0000，绿色为00FF00，蓝色为0000FF，白色为FFFFFF。l通常情况下，RGB各有256级亮度，一共可以组合出l256*256*2

3、56=16777216，简称1600万色，也称为24位色。一、色彩入门一、色彩入门4、色彩的三要素l色相色相：色相也叫色泽，色相是色彩最基本的特征，反应颜色的基本面貌。色相是一种色彩区别于另一种色彩的最主要因素。色相最基本的代表色是红、黄、绿、青、紫5种。这5种在人们的心理方面有明确的特征，色相的心理反应特征是暖色或冷色。色相之间的关系可以用色相环表示，除了主要的5种色相外，橙、黄绿、青绿和青紫、紫红成为中间色相。人的眼睛可以分辨出约180种不同色相的颜色。12基本色相-色环一、色彩入门4、色彩的三要素l明度明度：明度是指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。其中黄色

4、明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。另外在同一色相的明度中还存在深浅的变化。如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。12基本色相-色环紫色（#993399）跟黄色（#ffff00）暗红（#cc3300）跟草绿（#99cc00）暗蓝（#0066cc）跟橙色（#ff9933）一、色彩入门4、色彩的三要素l纯度纯度：纯度是指色彩的鲜艳程度，也称色彩的饱和度。其取决于该色中含色成分和消色成分(灰色)

5、的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。相近色：相近色：色环中相邻的三种颜色。如黄绿色，黄色和桔黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。二、色彩对比互补色：互补色：在色环上，相对的两种颜色（即：在同一条直径上的两种颜色）为一组补色，如：红和绿，橙和蓝，黄和紫都是补色。补色的对比十分强烈，视觉上给人不和谐的感觉。补色的组合可以使人感觉红的更红绿的更绿，虽然不和谐，但如果运用得好的话也可以很漂亮，给人视觉冲击力很强，如果运用得不好，就会给人俗气，刺眼得感觉。补色在网站设计中用得也极为普遍。二、色彩对比补色对比分析：由冷色系的绿色、蓝色组成

6、大背景环境，纯度较低。前景主要是突出产品、文字信息内容的大红色形成补色对比效果，RGB的R255数值与HSB是H为零，数值显示非常明确，标准的大红色。纯度亮度非常高，达到最高值，加之白色的勾边，使得红色更为凸显，更易于视觉对信息的迅速捕捉。结论：对比色的合理搭配，能拉开前景与背景的空间感，突出页面主体物。尤其是红色在主体物的运用，能迅速传递视觉的效果。暖色暖色:暖色，如黄色，橙色，红色，紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。二、色彩对比暖色冷色冷色:冷色，如绿色，蓝

7、色，蓝紫色等等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果。二、色彩对比冷色 冷暖对比分析：该页面冷暖颜色较为丰富，橙和蓝是对比最强烈的补色，其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡作用。主色调的浅蓝色亮度较高，让页面不易给人沉闷的感觉。结论：冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。通常初学者较容易使两色相互排斥，导致画面色调不谐调。一般我们采用两种调和的方法。三、色彩的分析 当我们看到不同的颜色时，心理会受到不同颜色

8、的影响而发生变化而产生一些联想。不同的色彩又可以表达了不同的含义。不同的色彩运用又会得到不同的效果。红色心理联想：是一种激奋的色彩。刺激效果，能使人产生冲动、愤怒、热情、活力的感觉。被用来传达有活力、积极、热诚、温暖、喜悦、前进等涵义的企业形象与精神。大红大红桃红桃红砖红砖红玫瑰红玫瑰红动态效果强烈的鲜明对比色彩赋于站点奔放、激情的个性。奔放、激情的配色返 回绿色绿色 绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生

9、命与希望，也充满了青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。大绿大绿翠绿翠绿橄榄绿橄榄绿墨绿墨绿绿色和淡白淡白搭配，可以产生优雅，舒适的气氛。紫色紫色 紫色是一种在自然界中比较少见的颜色。象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。另一方面又有孤独等意味。紫色在西方宗教世界中是一种代表尊贵的颜色，大主教身穿的教袍便采用了紫色。紫色中加入少量的黑，沉重、伤感、恐怖、庄严的感觉。紫色中加入白，变得优雅、娇气，并充满女性的魅力。大紫贵族紫葡萄酒紫深紫橙色橙色 也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。鲜

10、橙鲜橙橘橙橘橙朱橙朱橙香吉士香吉士黄色黄色 具有快乐，希望，智慧和轻快的个性，它的明度最高。大黄大黄柠檬黄柠檬黄柳丁黄柳丁黄米黄米黄蓝色蓝色 是最具凉爽，清新，专业的色彩。由于蓝色沉稳的特性，具有理智，准确的意象，在商业设计中，强调科技，效率的商品或企业形象，大多选用蓝色当标准色，企业色。它和白色混合，能体现柔顺，淡雅，浪漫的气氛。大蓝大蓝天蓝天蓝水蓝水蓝深蓝深蓝 白色白色 在商业设计中，白色具有高级，科技的意象，通常需和其他色彩搭配使用并且可以和任何颜色作搭配。黑色黑色 在商业设计中，黑色具有高贵，稳重，科技的意象，许多科技产品的用色，如电视，跑车，摄影机，音响，仪器的色彩，大多采用黑色，在

11、其他方面，黑色的庄严的意象，也常用在一些特殊场合的空间设计。灰色灰色 在商业设计中，灰色具有柔和，高雅的意象，而且属於中间性格，男女皆能接受，所以灰色也是永远流行的主要颜色，在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级，科技的形象，使用灰色时，大多利用不同的层次变化组合或他配其他色彩，才不会过於素，沉闷，而有呆板，僵硬的感觉。大灰大灰老鼠灰老鼠灰蓝灰蓝灰深灰深灰四、网页配色原则1、特色鲜明：l一个网站的用色必须要有自己的独特风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。2、搭配合理：l网页设计虽然属于平面设计的范畴，但它又与其他平面设计不同，它在遵从艺术规律的同时

12、，还要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。3、讲究艺术性：l网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身的特点同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站五、网页配色的方法1、单色的使用：简单的说，这种方法是采用一种颜色的深浅搭配，尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度与透明度也可以产生变化，使用网站避免单调。2、邻近色的使用：所谓邻近色，就是在色相环中相邻近的颜色，比如：红与黄、绿与蓝为相邻色。采用相邻色设计网

13、页可以使用网页避免色彩杂乱，易于达到页面的和谐统一五、网页配色的方法3、对比色使用：使用两种完全不同的颜色搭配，对比色可以突出重点，产生强烈的视觉效果。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点眼的作用五、网页配色的方法4、冷色的使用：5、暖色的使用：红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红|_|_|_|_|暖色系 中性系 冷色系 中性系五、网页配色的方法6、叠透法的使用：使用不同色彩纯度的颜色叠加搭配，由于色彩的纯度不同，从而形成不同色彩的叠加和透明。比如同种色的叠透、类似色的叠透和对比色的叠透明。使页面色彩具体立体感与空间感。7、主次搭配的使用：以

14、一种颜色为主要颜色，即作为主色，同时辅以其他颜色混合搭配，形成缤纷而不杂乱的搭配效果。六、网页配色技巧1、用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2、用两种色彩：先选定一种色彩，然后选择它的对比色。这样会使用整个页面色彩丰富但不花稍。六、网页配色技巧3、用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。因为是同一个色系，因此搭配出来的网页色彩和谐有序。4、用黑色和一种彩色：黑白灰是万能色，当配色时不知道该具体用那种颜色时，都可以采用黑白灰进行尝试。七、在网页配色中的忌讳的是1、控制颜色的数量：不要将所有颜色都用到，尽量控制在三种色彩以内。2、背景和前文的对比尽量要大：以便突出主要文字内容，背景色一般采用素淡清雅的颜色。(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。3、保持网站所有页面色彩风格一致，尽量避免同一主题网站使用若干种不相干的配色。