1、第6章 网页配色介绍色彩的基本概念以及网页配色的基本方法中国人民大学 王蓉引子n网页设计是一种特殊的视觉设计，对色彩的依赖性很高n色彩设计同时还是网站风格设计的决定性因素之一中国人民大学 王蓉内容n色彩基本知识n216网页安全色n制定配色方案中国人民大学 王蓉色彩基本知识n色彩的要素与配合n色彩的对比与调和n色彩的感觉与联想请观看FLASH 色彩基础知识.swf中国人民大学 王蓉色彩的三要素n自然界的色彩虽然各不相同，但任何色彩都具有色相、明度、饱和度这三个基本属性。 q色相也叫色泽，是颜色的基本特征，反映颜色的基本面貌。 q明度也叫亮度，体现颜色的深浅。 q饱和度也叫纯度，指颜色的纯洁程度。
2、 色彩基本知识中国人民大学 王蓉色彩的三要素-色相色彩基本知识中国人民大学 王蓉色彩的三要素-色相n色相(Hue) q简写H，表示色的特质，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等q与色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异q是不同波长的色光被感觉的结果色彩基本知识中国人民大学 王蓉色彩的三要素-色相n光谱中有红、橙、黄、绿、蓝、紫六种基本色光n人的眼睛可以分辨出约180种不同色相的颜色。 10色相环10种色相：红色（Red）、橙色（Yellow Red）、黄色（Yellow）、黄绿色（Green Yellow）、绿色（Green）、青绿色（Blue Green）、蓝
3、色（Blue）、蓝紫色（Purple Blue）、紫色（Purple）、紫红色（Red Purple）。 色彩基本知识中国人民大学 王蓉色彩的三要素-纯度色彩基本知识中国人民大学 王蓉色彩的三要素-纯度n纯度（Chroma）q简写Cq表示色的饱和度q是表示一种颜色中是否含有白或黑的成份。假如某色不含有白或黑的成份，便是“纯色”，彩度最高；如含有白或黑的成份越多，它的彩度就越会逐步下降q饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。 色彩基本知识中国人民大学 王蓉色彩的三要素-明度色彩基本知识中国
4、人民大学 王蓉色彩的三要素-明度n明度（Value）q简写V，色彩的强度q是指色彩感觉的明亮或晦暗程度q包括色彩本身的明暗程度或是一种色相在不同强弱光线下呈现的明暗程度色彩基本知识中国人民大学 王蓉色彩的三要素-明度n指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。n其中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。n另外在同一色相的明度中还存在深浅的变化。如绿色中由浅到深，有粉绿、淡绿、翠绿等明度变化。 色彩基本知识中国人民大学 王蓉色调n色调Tone结合明度和纯度的概念 n11种色调分别是指：q鲜明（Vivid）、高亮（Strong）、明亮（Brigh
5、t）、清澈（Pale）、苍白（Very Pale）、灰亮（Light Grayish）、隐约（Light）、浅灰（Grayish）、阴暗（Dull）、深暗（Deep）、黑暗（Dark）。低高在色调表中，从下到上亮度依次增加，而从左到右彩度依次增加，所以在色调表中越靠上的颜色越亮，越靠右的颜色就越鲜明。色彩基本知识中国人民大学 王蓉色相 & 色调（Hue & Tone）116色体系n将前面所介绍的色相环与色调表结合在一起n由110种彩色颜色（色相10个等级 X 色调11个等级 = 110种颜色）和6种非彩色颜色所构成的色彩基本知识中国人民大学 王蓉立体色标 n我们把以上在白光下混合所得的明度、色
6、相和彩色组织起来，选由下而上，在每一横断面上的色标都相同，上横断面上的色标较下横断面上色标的明度高。再由黑、白、灰作为中心轴，中心而外，使同一圆柱上，色标的纯度都相同，外圆柱上的比内圆柱上的纯度高。再队中心轴向外，每一纵断面上色标的色相都相同，使不同纵断面的色相不同的红、橙、黄、绿、青、蓝、紫等色相自环中心轴依时针顺序而列，这样就把数以千计的色标严整地组织起来，成为立体色标。n目前影响较大的立体色标是奥斯特奥斯特华华色标和门塞尔门塞尔色标。中国人民大学 王蓉立体色标中国人民大学 王蓉中国人民大学 王蓉色彩的分类 n色彩的分类有三种n冷色、暖色、中性色冷色、暖色、中性色q冷：白、蓝、灰、黑、绿、
7、等q暖：红、黄、橙、啡色等 q中性色：黑、白、灰、金、银色等n有光泽色和无光泽色有光泽色和无光泽色（根据布料质地来区分）：q有光泽色：质地为真丝，绸缎之类； q无光泽色：麻、毛等。 色彩基本知识中国人民大学 王蓉色彩的分类 n有彩色和无彩色有彩色和无彩色q无彩色：黑、白、灰等； q有彩色：有明显色彩倾向的红、蓝、绿。 色彩基本知识中国人民大学 王蓉色彩代表的含义n红色热烈、喜庆、激情、辟邪、危险 n橙色温暖、事物、友好、财富、警告 n黄色艳丽、单纯、光明、温和、活泼 n绿色生命、安全、年轻、和平、新鲜 n青色信任、朝气、脱俗、真诚、清丽 n蓝色整洁、沉静、冷峻、稳定、精确 n紫色浪漫、幽雅、神
8、秘、高贵、妖艳 n白色纯洁、神圣、干净、高压、单调 n灰色平凡、随意、宽容、苍老、冷漠 n黑色正统、严肃、死亡、沉重、恐怖 色彩基本知识中国人民大学 王蓉色彩的基本特质n色彩的特质和特性指的是色彩和色彩组合所能引发的特定情绪反映。n我们用很多词汇去形容和比较各个色彩的特色。n没有光源（阳光和人造光），就没有色彩。我们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和情绪。色彩基本知识中国人民大学 王蓉色彩的基本特质色彩基本知识中国人民大学 王蓉色彩的基本特质色彩基本知识中国人民大学 王蓉色彩的基本特质色彩基本知识中国人民大学 王蓉色彩与色彩之间的关系n两对双色组合表明一个强大的背景颜色
9、是如何改变相邻颜色的视觉感知的。n上下两对的中间色块是相同的颜色，但由于背景不同，给人的色彩感觉也是不同的。 色彩基本知识中国人民大学 王蓉RGB色彩体系 n人们把红(Red)、绿(Green)、蓝(Blue)这三种色光称之为“三原色光”，RGB色彩体系就是以这三种颜色为基本色的一种体系。n目前这种体系普遍应用于数码影像中，如：电视、计算机屏幕、数码相机、扫描仪等。nRGB值是从0至255之间的一个整数，不同数值叠加会产生不同的色彩。当三色数值相同时为无色彩的灰度色，而三色都为255时为最亮的白色，都为0时为黑色。 色彩基本知识中国人民大学 王蓉CMYK色彩体系 nCMYK分别代表青(Cyan
10、)、品红(Magenta)、黄(Yellow)、黑(Black)n这是一种基于反光的色彩体系，常用于彩色印刷中nCMYK值是以浓度0-100%来表示，不同浓度叠加会产生不同的色彩。n理论上相同浓度的CMY叠加，则会变成黑色，但实际混合色料后并不会呈现黑色而是暗灰色，所以将黑色独立出来，增加印刷时颜色的范围。 色彩基本知识中国人民大学 王蓉216网页安全色n216网页安全色（216 Web Safety Color）是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合n在网络上，即是一模一样的颜色，也会由于显示设备、操作系统、显卡及浏览器的不同而有不尽相同的显示效果用Firew
11、ors输出的一个颜色在安全色范围之外的gif图片中国人民大学 王蓉216网页安全色n216网页安全色是根据当前计算机设备的情况得到的结果。尽管一些图像格式的调色板是同成千上万、甚至数百万的颜色组成的，但低档的显示器只承认256色,而Window和Macintosh平台只共享256色中的216色中国人民大学 王蓉216网页安全色n只要在网页中使用216网页安全颜色，就可以控制网页的色彩显示效果n使用网页安全颜色的同时，也不排除非网页安全颜色的使用n网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255（ 十
12、六进制为00、33、66、99、CC 或 FF ）时构成的颜色组合，它一共有 6 * 6 * 6 = 216 种颜色（其中彩色为210种，非彩色为6种）。 中国人民大学 王蓉216网页安全色调色板n有多种216网页安全色调色板qBrowser-Safe Color Palette q216-Color Webmasters Palette qI.R.I Web Color Sense Palette Seriesn最值得推荐的是在Visibone（）上的调色板。该调色板合理的协调地显示了216网页安全色间的相互关系可在 站点得到相关信息http:/ 中国人民大学 王蓉216网页安全色调色板访问
13、更大图片http:/ 王蓉制定配色方案n配色就是处理好作品中色彩的统一与变化、秩序与多样性之间的关系n我们掌握色彩理论知识是为了培养对配色的感觉.n色彩是要与环境结合来判断的,即使是一种非常漂亮的颜色,也只有在与周围的环境相搭配时才能真正称得上漂亮请参看http:/ 王蓉制定配色方案n在选择色彩时大体上应考虑以下几个因素：q清楚界定出想要用色彩达到什么样的目的。q选择反映设计所需要的主色。q选完中央纯色后，再安排色彩搭配的设计。q以设计的特点或人的感觉为着眼点，让可以利用得到的色彩选择更加完美。主色彩不宜太多，最好不要超过三个中国人民大学 王蓉n主色调q页面彩n辅色调q仅次与主色调的视觉面积的
14、辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。 n点睛色q在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。n背景色q衬托环抱整体的色调，协调、支配整体的作用。中国人民大学 王蓉基本配色 http:/ 王蓉基本配色 制定配色方案中国人民大学 王蓉基本配色 制定配色方案中国人民大学 王蓉基于色相的配色关系n以色相环中的红色为基础进行的配色方案分析。n采用不同色调的同一色相时，称之为“同一色相配色”；n而采用两侧相近颜色时，称之为“类似色相配色”。 制定配色方案中国人民大学 王蓉基于色相的配色关系n在色相环中位于红色对面的青绿色是红色的补色n补色的概念就是完全相反的颜色
15、。n在以红色为基准的色相环中，蓝紫色到黄绿色范围之间的颜色为红色的相反色相。n相反色相配色是指搭配使用色相环中相距较远颜色的配色方案，这与同一色相配色或类似色相配色相比更具变化感。制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，类似色调配色n这种配色方案是采用相反色相类似色调的配色方案。n虽然使用了相反的色相，但通过使用类似的色调可以得到特殊配色效果。而影响这种配色方案效果的最重要的因素在于使用的色调。n当使用了彩度比较高的鲜明色调时，所使用色相效果将被突出从而得到较强的动态效果； n当使用了彩度较低的黑暗色调时，即使使用了多种不同的色相也能够得到较安静沉重的效果，这是因为使用暗色调
16、时色相的差异也会变得不太明显。制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，类似色调配色制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，类似色调配色制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，相反色相，相反色调配色相反色调配色n利用相反色相和相反色调的配色方案，因为采用了相反的色相和色调，所以得到的效果具有强烈的变化感和逆向性。n如果说类似色调配色方案能够凝造整齐的氛围，那么相反色调配色方案凝造出的，就是一种强弱分明的氛围。n影响这种配色方案效果的最大的因素在于所选颜色在整体画面中所占的比例。制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，相反色相
17、，相反色调配色相反色调配色n在图中，高彩度的红色与背景中暗绿色形成鲜明的对比。相反色相、相反色调配色方案通常用于突出显示较暗背景中一个较亮对象。制定配色方案中国人民大学 王蓉基于色相的配色关系相反色相，相反色相，相反色调配色相反色调配色制定配色方案中国人民大学 王蓉基于色相的配色关系非彩色和彩色n利用非彩色和彩色进行配色的方法。n非彩色主要由白色、黑色以及过渡阶段中的灰色构成，在与彩色搭配使用时，它们可以起到突出彩色的效果。n通过搭配使用高亮度的彩色和白色以及亮灰色，可以得到明亮轻快的效果。而低两度彩色和黑色以及暗灰色，可以得到黑暗沉重的效果。制定配色方案中国人民大学 王蓉基于色相的配色关系非
18、彩色和彩色红色的裙子与黑色的斗篷形成了鲜明的对比，高亮度的红色在黑色的衬托下显得更鲜明。而这种较强的对比会自然地吸引住鉴赏者的目光。黑色的斗篷同时也在衬托孩子雪白的皮肤制定配色方案中国人民大学 王蓉基于色相的配色关系非彩色和彩色制定配色方案中国人民大学 王蓉基于色调的配色关系n上一幅图像的基本色调为“苍白”色调。同一色调配色是指选择同一色调不同色相颜色的配色方案，例如使用“鲜红色（Vivid Red）”与“鲜黄色（Vivid Yellow）”的配色方案。制定配色方案中国人民大学 王蓉基于色调的配色关系n类似色调配色是指使用如“清澈”、“灰亮”等类似基准色调的配色方案，这些色调在色调表中比较靠近
19、基准色调。n相反色调配色是指示使用如“深暗”、“黑暗”等与基准色调相反色调的配色方案，这些色调在色调表中远离基准色调。n这种配色方案的着重点在于色调的变化，它主要通过对同一色相或类似色相设置不同的色调得到不同的颜色效果。n基于色调的配色方案的优点在于，通过使用同一色相或类似色相尽可能地减少色相使用范围。n这种配色方案在欧洲得到较好发挥，而大部分国家的纸币也使用了这种配色方案。通过使用多种不同的亮色调，可以制造出具有鲜明对比感的效果； 而使用多种不同的暗色调，可以制造出冷静温和的效果。 制定配色方案中国人民大学 王蓉基于色调的配色关系同一或类似色相，类似色调配色n这是使用同一或类似色相的同时使用
20、类似色调的配色方案，在所有配色方案中能够凝造出最强烈的冷静整齐感觉。但当使用了极为华丽鲜明的色相时，也可以得到强烈变化的感觉。制定配色方案中国人民大学 王蓉n读书少女的背景以及衣着等都是用了类似色相、类似色调的黄色和橙色，给人一种安详宁静的感觉。这种配色方案在诸多印象派画家的作品中得到了淋漓尽致的发挥。基于色调的配色关系同一或类似色相，类似色调配色制定配色方案中国人民大学 王蓉基于色调的配色关系同一或类似色相，类似色调配色制定配色方案中国人民大学 王蓉同一或类似色相，类似色调http:/ 王蓉基于色调的配色关系同一或类似色相，相反色调配色制定配色方案中国人民大学 王蓉基于色调的配色关系同一或类
21、似色相，相反色调配色n整个画面以紫色为主。在使用了隐约色调的背景中，紫色的鲜花得到了非常明显的突出效果。n可以发现，只凭借色调的变化也能得到很好的强调效果。制定配色方案中国人民大学 王蓉基于色调的配色关系同一或类似色相，相反色调配色制定配色方案中国人民大学 王蓉基于色调的配色关系渐变（Gradation）配色n规则与韵律的结合体n这是以颜色的排列为主的配色方案。雨后漂亮的彩虹就是最典型的渐变配色实例。n按照一定规律逐渐变化的颜色，会给人一种富有较强韵律的感觉。简便可以分为色相渐变和色调渐变。制定配色方案中国人民大学 王蓉基于色调的配色关系渐变（Gradation）配色n这是描绘海边夕阳风景的绘画作品，红橙黄绿的颜色过渡显得非常地美丽。阳光下的大自然向我们展示了很多渐变配色的美妙之处制定配色方案中国人民大学 王蓉基于色调的配色关系渐变（Gradation）配色制定配色方案中国人民大学 王蓉作业n网站设计q网站名称、主题q网站LOGOq栏目（导航）q首页布局（页头、内容、页尾）q配色方案n指明选用哪种配色方案n选用颜色n用Fireworks(或PS)画出设计模型，并用文字说明站点名称、主题，采用哪种配色方案，所选用颜色，以及自己设计时的一些想法
