《网页配色设计》由会员分享，可在线阅读，更多相关《网页配色设计（153页珍藏版）》请在金锄头文库上搜索。
1、第六章 网页配色设计,色彩学是网页设计中的配色基础。在网页设计中，要合理的应用色彩，就要熟悉各种颜色的特性，了解色彩的象征意义以及色彩组合的效果。其次要熟悉网络的色彩环境，熟悉计算机中的色彩使用规律。,色彩是网站设计工作中很难把握的重要方面，是确立网站风格的前提，它决定着网站给浏览者的第一印象。页面的整体色调有活泼或庄重、雅致或热烈等不同的趋向，在用色方面也有着繁简之分。不同内容的网站或网站的不同部分，在这方面都会有不同。,色彩三要素 色相、饱和度和明度构成色彩的三要素。 自然界中的颜色可分为非彩色和彩色两大类。非彩色指黑色、 白色和各种深浅不一的灰色，其他所有颜色均属于彩色。,纯度，是指色彩
2、的纯净程度，也可以说是色相感觉鲜艳或灰暗程度。光谱中单色光都是纯度最高的光。任何一个色彩加入白、黑或灰都会降低它的纯度，含量越多纯度越低。,明度是指色彩的明暗程度，体现颜色的深浅。它是全部色彩都具有的属性，最适合表现物体的立体感和空间感。在其他颜色中加入白色，可提高混合色的明度；加入黑色则作用相反。,非彩色只有明度特征，没有色相和饱和度的区别。,色彩的不同文化内涵,色彩与心理,1、色彩的计算机表示,计算机采用的是二进制计数方式，只有0和1，逢2进位。在对颜色的表示上，如果只采用1位2进制，那么可以表示2种颜色；如果采用2位2进制，那么可以表示22=4种颜色；依此类推，8位2进制可以表示28=2
3、56种颜色。但是用二进制计数实在太麻烦了，因此计算机在提供给人们的应用接口上采用的是八进制和十六进制。在对颜色的表示上，通常采用十六进制。 现在常用的真彩色显示模式是由24位二进制数组成。如果用十六进制来表示，只需用六位。如FFFFFF代表白色，000000代表黑色，888888代表中间的灰色，数值越大颜色越浅。由于所有颜色均由红、绿、蓝三种三原色搭配而来，所以六位数值中，前两位代表红，中间两位代表绿，后两位代表蓝。由此可知，FF0000代表正红，00FF00代表正绿，0000FF代表正蓝。所有的颜色都由这六位数字的不同组合而来，区别是前两位数值大代表红色在颜色中所占的比例大，中间两位大代表绿
4、色的比例大，后两位大代表蓝色的比例大。,2、色彩模式,RGB色彩模式 CMYK色彩模式 索引色彩模式 灰度模式 位图模式,3、网页安全色,在我们的网络中，有一个程序员们使用数学立方体结构创建的浏览器调色板。这个调色板包含了在任何平台上任何分辨率显示的21种安全颜色的机制，它是网络颜色的标准。如果我们使用了这个调色板以外的颜色，当显示器设定到低分辨率时显示该种颜色抖动。为避免发生抖动现象，在Web页应中尽量使用安全色彩。我们通过一些简单的计算可以得到浏览器的安全色彩，只要简单地记住RGB颜色的值必须是51的倍数即可。如果用十六进制表示，只要包含00，33，66，99，CC，FF就是浏览器的安全颜
5、色了。,色调,网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。, 主色调页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。（背景白色不一定根据视觉面积决定，可以根据页面的感觉需要。） 辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。 点睛色 在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。 背景色 衬托环抱整体的色调，协调、支配整体的作用。,色彩的对比,对比与调和就是形式美的变化与统一规律在一定条
6、件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。很多朋友都以为色彩对比主要是红绿、橙蓝、黄蓝色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。,1：色相对比、明度对比 2：纯度对比、补色对比 3：冷暖对比 4：面积对比, 色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩
7、与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。, 明度对比明度对比可分为:彩色差的明度对比及非彩色差的明度对比 是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝蓝色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。, 纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低
8、纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。, 补色对比将红与绿、黄与蓝、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。, 冷暖对比是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色体系，蓝、绿、蓝则代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。, 面积对比同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，
9、影响到页面主次关系。 面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。,色彩的调和,两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。色彩调和是求得视觉统一，达到人们心理平衡的重要手段。 调和就是统一，下面介绍的四种方法能够达到调和页面色彩的目的。1：同种色的调和 2：类似色的调和 3：对比色的调和 4：渐变色的调和, 同种色的调和相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感。同种色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同来稍微加以区别的，产生了及其微妙的韵律美。为了不至
10、于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其他颜色做点缀。比如在某页面中使用了同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。同种色被称为最稳妥的色彩搭配方法。, 类似色的调和在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。不是每种主色调都是极其显眼的位置，通常多扮演着用于突出主体的辅助性配角。而重要角色往往在页面中用的份量极少，却又起到突出主体的作用。, 对比色的调和,调和方法有：1、提高或降低对比色的纯度；2、在对比色之间插入分割色（金、银、黑、白、灰等）；3、采用双方面积大小不同的处理方法；4、对比色之间加入相近的类似色。, 渐
11、变色的调和,渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。,6.2 根据网站内容进行配色,设计配色之前一定要深入了解网站内容，根据内容选择颜色搭配。,6.3 如何调节不同板块和内容间的色彩,根据内容的需要，使网页整体色彩达到平衡。,6.4 网站色彩的统一,6.4.1利用色彩的特性及联想作用色彩 6.4.2色彩的联想作用和心理效果 6.4.3人对色彩的情感,6.4.1利用色彩的特性及联想作用色彩,6.4.2色彩的联想作用和心理效果,色彩的联想是通过以往的经验、记忆或知识将当
12、前的色彩与其他具象或抽象及相联系起来的过程,常见颜色的联想：,具象联想： 红色：血火，太阳 橙色：灯光 柑橘 秋叶 都市 黄色：光 柠檬 迎春花 食品 绿色：草地 树叶 禾苗 蓝色：天空 宇宙 水 冰 蓝色：丁香花 葡萄 茄子 黑色：夜晚 墨 石炭 白色：雪 牛奶 白云 面粉 灰色：乌云 铁 木,常见颜色的联想：,抽象联想： 红色：热烈 热情 危险 活力 吉祥 喜庆 夏季 传统 橙色：温暖 欢喜 嫉妒 华丽 甜蜜 兴奋 黄色：光明 希望快活 平凡 权利 清爽 安静 蓝色：平静 神秘 悠久 理智 深远 科学 快捷 蓝色：优雅 高贵 注重 浪漫 神秘 女性 温柔 虚幻 魅力 黑色：严肃 刚健 恐怖
13、 死亡 罪恶 坚硬 沉默 绝望 悲哀 男性 机械 灰色：平凡 天意 谦逊 灰心 无聊 消极 谦虚 随便,6.4.3人对色彩的情感,最基本的情感表现：好 恶 情感的差异的原因： a. 年龄差异， 年龄高：冷色 明度纯度低 年龄低：明度纯度高 b性别差异： 男性：冷色或纯度高的色彩（如黑.灰）色调集中 女性：暖色.纯度较低的粉色及白色色调分散,c.种族差异 原因：生活环境.社会文化.历史.宗教信仰等不同 中国：红 黄 蓝 天蓝 浅蓝 美国：淡黄 红 明灰 明蓝 法国：黑 灰 红 蓝 绿 白 德国：黑 白 天蓝 咖啡 菲律宾：淡黄 蓝 绿 印度：红 黄 蓝 绿 埃及：绿 红 黑 蓝 绿,色彩的四种功
14、能角色,、主色主色比其它配色明显、清楚、强烈，能够将浏览者的视线固定下来，达到传达中心思想的作用。,、背景色,又称为支配色，在网页中，中心虽然是主色，但是决定整体印象的是背景色。在决定网页配色的时候，如果背景明亮，那网页整体也会给人明亮的印象；如果背景素雅，那么整体也会给人素雅的感觉。,、融合色,、强调色,色彩意象的设计应用,当我们看到色彩时，除了感觉其物理方面的影响，心理也会立即产生感觉，这就是色彩的意象。,.红色的色彩意象由于红色容易引起注意，所以在各种媒体中被广泛的采用；除了具有较佳的明视效果之外，更被用来传达有活力 .热诚.温暖.前进等涵义的企业精神与形象。另外红色也常用来作为警告.危
15、险.禁止.防火等标志用色.(例:中国人一看见红色就充满了喜悦和激情),朱红色 深红色 玫瑰红色 明度粉红色 对比色：橙红色+蓝色 配色：红色+黑色 配色：红色+黑色+灰色,朱红色,朱红色,背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。 这类颜色的组合比较容易使人提升兴奋度，红色特性明显，这一醒目的特殊属性，比较被广泛的应用于食品、时尚休闲等等类型的网站。,深红色,深红色,深红色在原有的
16、红色基础上降低了明度而得，是红色系中的明度变化。通过上图的数值显示看出明度较低。这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而的，使得明度稍暗。数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入提亮，页面视觉效果强化。结论：前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和
17、统一的效果。,玫瑰红色,玫瑰红色,玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。这个页面主要由两种不同明度、纯度的玫瑰色调组成。两色数值显示，我们看到RGB数值中R呈现的数值最高，红色特性较明显。辅助色调的玫瑰色，加入少许G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。数值上看，由于背景色和前景色的明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。结论：背景色和前景色的明度较接近，颜色给人的视觉表象较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。,
