网站建设04模块-网站及网页的色彩搭配

04模块网站及网页的色彩搭配网站的色彩搭配非常重要，色彩搭配好的网站能给浏览者留下很好的印象，而色彩搭配不好的网站则很难吸引浏览者。本模块主要介绍的色彩搭配的相关知识。内部包括三原色、常见网页色彩、色彩的冷暖视觉、网页的安全色、网站色彩规划与搭配原理和常见配色方案等。•能力目标•1．能区分冷暖色调。•2．能用PhotoshopCS5拾取图片颜色。•3．能根据网站内容规划网站色调。•知识目标•1．三原色。•2．冷暖色。•3．常见网页颜色代码。•4．常见网页配色方案。知识1色彩的基础知识•在物理学中，颜色由红、绿和蓝三原色[1]（又叫三基色）构成。三种原色的不同的组合，构成现实世界中的所有丰富多彩的颜色。黑色不是有颜色，而是黑色物体不反射任何光线，看上去才表现为黑色。白色不是没有颜色，而是含有全部的颜色。•在设计中，颜色分为彩色与非彩色两种。非彩色是指含有灰、白、黑三系的颜色。彩色是指非彩色以外的所有颜色。•网页HTML语言中的色彩表达即是分别用红、绿和蓝三种颜色的值来表示的。分别把红、绿和蓝三种颜色分为256个（0至255）等级，用不同的组合形成不同的颜色。经过组合后网页就可以表示224种颜色。通常每种颜色的值用两位十六进制数来表示，并以“#”开头。如红色表示为#FF0000，绿色表示为#00FF00，蓝色表示为#0000FF，白色表示为#FFFFFF。Photoshop颜色拾取知识2网页色彩的冷暖视觉•从色彩心理学角度来考虑，桔红的纯色被定为最暖色，在色立体上为暖极；天蓝的纯色被定为最冷色，在色立体上称为冷极，并用冷暖两极的关系来划分色立体其他颜色的冷暖程度与冷暖差别。与暖极近的为暖色，与冷极近的为冷色，与两极距离相等的颜色，称为中间色。由此可知，红、橙和黄等为暖色，蓝绿、蓝和蓝紫是冷色，黑、白、灰、彩和紫等色为中性色。淡雅清爽的百度网址大全首页温暖活泼的淘宝网首页知识3网页的安全色•不同的硬件环境、操作系统、浏览器对各种颜色的表现有所不同。当显示的颜色与设计的颜色不同时，就会产生失真。但所有的这些环境都可以显示216种颜色集合（调色板），也就是说这些颜色在任何计算机上的显示都是相同的。所有网页中如果使用这216种颜色，就可以避免失真的问题。•网络安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值为0、51、102、153、204、255时构成的颜色组合，它一共有6*6*6=216种颜色（其中彩色为210种，非彩色为6种）。•当网页中的有些颜色显示设备无法正确还原时，显示设备就会使用与需要相似的颜色，使显示的颜色尽量达到需要的效果。因此用这216种颜色表现高清晰度的图片时可能会有所欠缺，但表现网页的文字、背景的颜色还是完全可以的。•使用216中安全色是网页设计中累积经验的结果，在进行网页的页面设计时，要尽量使用网页安全色，这样就可以更准确、真实地表现网页的颜色效果。知识5网站总体色彩规划•1．定义网站的色彩基调•定义网站的色彩基调就是选择一个颜色作为网站最主要的风格色调。需要注意以下几个方面。•(1)网站的色彩要鲜明。人们在浏览网站时，更愿意接受鲜明的颜色。黯淡的颜色会给人一种压抑的感觉。•(2)网站的色彩要独特。一个优秀的网站，往往与别的网站有着不同的色彩风格。用户可能根据网站的独特风格而接受这个网站。•(3)色彩需要与网站的内容谐调。网站色彩应该依据网站内容给消费者营造相应的气氛。例如科技和教育类网站可以使用浅蓝色，婚庆类网站可以使用粉红色，庆典类网站可以使用大红色。•(4)要注意色彩和颜色的联想性。例如，黑色让人联想到夜晚，蓝色让人联想到天空或海洋，大红色可以让人联想到喜庆等。•2．站点内各栏目色彩搭配原则•在对网站进行颜色搭配时，需要遵循一些颜色搭配的原理和方法。这些配色原理是根据长期设计的经验和人们对颜色的感知形成的。网站的各个栏目，因为需要体现出不同的内容和浏览方式，需要针对不同的网站栏目进行不同的配色。•一般来说，需要吸引用户注意力的栏目应该使用鲜明的颜色。不同的栏目之间应该有一些颜色的对比，增强网页色彩的层次感。知识6网页色彩搭配原理•在网页中的一般处理方法是主要内容文字用非彩色（黑色），边框、背景、图片等次要内容用彩色。这样，页面的整体感觉很清爽但不单调，也不会给人眼花缭乱的感觉。•在非彩色的搭配中，黑白是最基本和最简单的搭配，白底黑字或白字黑底页面的内容都非常自然。灰色是万能色，可以和很多种颜色搭配，可以实现不同颜色的和谐过度。在网页中，当有两种对比很强烈的颜色组合在一起，而不好搭配其它颜色时，可以考虑使用灰色为过度的中间色。•彩色搭配是一个比较复杂的内容。网页进行配色时，需要先确定网页的主色调。然后根据主色调再确定搭配的颜色。网站中不要使用过多的颜色，一个网页的颜色应尽量控制在3种颜色以内。使用太多种颜色可能使网站颜色混杂，视觉效果混乱。•背景与文本的颜色对比要强烈，不要将背景与文本使用相近的颜色。不要使用鲜明的花纹作为背景，这样无法突显出网页的内容，浏览网页时也会很吃力。知识7常见的几种网页配色方案•1．红色色调的使用与搭配•红色的色感温暖、性格刚烈而外向，可以对人形成强烈的刺激。红色比其他颜色更能吸引人的注意，也可以引起人的兴奋、激动、紧张和冲动的感觉。过多的红色也会引起人的视觉疲劳，使人眼的视觉感减弱。在红色中可以搭配一些其他颜色丰富网页的效果。•(1)在红色中加入一些黄色，会增强红色的色感，可使红色更加趋向于躁动和不安。•(2)在红色中加入一些蓝色，会减弱红色的色感，可使红色更加趋向于文雅和柔和。•(3)在红色中加入一些黑色，会使红色的性格变得沉稳，给人以厚重和朴实的感觉。•(4)在红色中加入一些白色，会使色感温柔，趋于含蓄、羞涩和娇嫩。•2．绿色色调的使用与搭配•绿色是大自然中生命的颜色，给人们以生命、成长、希望的气息。绿色是人们最愿意接受的纯自然感觉。绿色的性格平和、安稳，是一种温顺、恬静、自然和优美的颜色。•(1)在绿色中加入一些黄色，会使绿色的性格趋于活泼和友善。•(2)在绿色中加入一些黑色，会使绿色的性格趋于庄重和成熟。•(3)在绿色中加入少量的白色，会使绿色的性格趋于洁净、清爽和鲜嫩。•3．蓝色色调的使用与搭配•蓝色的色感冷清，性格朴实内向，是一种有助于人头脑冷静的颜色。蓝色可以很容易让人感觉到天空、大海的氛围，提供一个深远、广阔和平静的空间，可以衬托其他活跃的颜色。蓝色淡化后仍然能保持较强个性，不同的蓝色给人完全不同的感觉。如果在蓝色中分别加入少量的红、黄、黑、橙和白等色，会对蓝色的色感造成鲜明的影响。•蓝色是最养眼的颜色，蓝色的背景可以使人平静、遐想。网站常常使用蓝色作为网站的背景色。而不同的蓝色往往给人完全不同的感觉。•蓝色是现今网站中最常使用的主色调。蓝色风格的网页最容易被用户接受和认可。很多大中型的科技教育类和网络公司的网站都是使用蓝色风格。•4．黄色色调的使用与搭配•黄色可以表现出冷漠、高傲、敏感和不安宁的视觉印象。在所有的颜色中，黄色的色感最容易发生变化。只要在纯黄色中搭配少量的其他颜色，其色感和表现出的性格就会发生很大的变化。黄色在搭配其他的颜色时，会因为色彩的对比给黄色带来完全不同的色彩感觉。•(1)在黄色中加入少量的蓝色，会使其转化为嫩绿色，可使黄色表现出平和潮润的感觉。•(2)黄色和红色搭配在一起，会使其转化为橙色，色感会从冷漠、高傲转化为有分寸感的热情和温暖。•(3)在黄色中加入少量的黑色，会使其转化为橄榄绿色，色感表现成熟和随和的感觉。•(4)在黄色中加入少量的白色，会使色感变得柔和，可以淡化黄色的性格感，使颜色趋近于含蓄和易于接近。•5．橙色色调的使用与搭配•橙色具有红和黄的成分，其性格趋于甜美、亮丽和芳香，也有红色的效果，性格趋于兴奋和狂躁。•橙色中加入少量的白色，可淡化橙色的效果，使橙色的色感趋于焦躁和无力。•6．紫色色调的使用与搭配•紫色的明度在彩色的色料中是最低的。紫色的低明度给人一种沉闷和神秘的感觉。•(1)紫色中红的成分较多时，就会给人以压抑威胁的感觉。•(2)紫色中加入黑色，其感觉就趋于沉闷、伤感和恐怖。•(3)紫色中加入白色，就会变得优雅、娇气，并充满女性的魅力。•7．白色色调的使用与搭配•白色的色感光明，性格朴实、纯洁和快乐。给人以雪山和冰川的感觉。如果在白色中加入其他的颜色，都会影响其纯洁性，使其性格变得含蓄，会减弱白色的色感。•(1)白色搭配少量的红色，会感受到一种粉红色，鲜嫩而充满诱惑。•(2)白色搭配少量的绿色，就如刚出土的绿芽，给人一种稚嫩和柔和的感觉。•(3)白色搭配少量的蓝色，会使气氛变得清冷和洁净。•(4)白色搭配少量的黄色，会成为一种乳黄色，给人一种温馨的感觉。•(5)白色搭配少量的橙色，就如同沙漠戈壁，如同干裂的土地，有干燥的气氛。•(6)白色搭配少量的紫色，就如同紫色兰花，让人联想到淡淡的芬芳。引例：经典网页设计色彩搭配实例欣赏•支付宝网站的颜色搭配，代表电子商务网站的配色趋势，有很多内容值得学习与借鉴。•(1)网站使用白色背景、橙色色调，合理搭配一些蓝色和绿色，页面美观、和谐、大方。•(2)网站的Logo使用橙色和蓝色，对比强烈。•(3)网站的导航条使用白底橙字或橙底白字，对比强烈，美观大气。•(4)网站巧妙地使用了一个橙白色的广告，增强了网页的活力和层次感，使网页的颜色有很大的跳跃性。•(5)网页主要以暖色调为主，但也有少量冷色调的图片和文字，这很好地丰富了网页的颜色元素。