网页制作中色彩的调和与对比

《网页制作中色彩的调和与对比》由会员分享，可在线阅读，更多相关《网页制作中色彩的调和与对比（15页珍藏版）》请在金锄头文库上搜索。

1、网页制作中色彩的调和http:/ 同种色的调和相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感。 同种色的调和网页例图：http:/www. solar1.org 同种色的调和分析：同种色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同来稍微加以区别的，产生了及其微妙的韵律美。为了不至于让整个 页面呈现过于单调平淡，有些页面则是加入极其小的其他颜色做点缀。该页面使用了同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的 节奏美感。结论：同种色被称为最稳妥的色彩搭配方法 类似色的调和在色环中, 色相

2、越靠近越调和。主要靠类似色之间的共同色来产生作用。 类似色的调和网页例图：http:/www. solar1.org 类似色的调和分析：类似色相较于同类色色彩之间的可搭配度要大些，颜色丰富、富于变化。以上页面主要取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。虽然主色调的米黄色在页面中使用面积最大，但是我们看到由 于它的明度非常高，饱和度就降低了，因此在页面中处在不明显的角色。而绿色的纯度最高，且使用面积次之，页面显示较显眼，因此用于次级导航位置上。整个页 面主次的视觉引导分明。结论：不是每种主色调都是极其显眼的位置，通常多扮演着用于突出主体的辅助性配角。而重要角色

3、往往在页面中用的份量极少，却又起到突出主体的作用 对比色的调和调和方法有：1、提高或降低对比色的纯度；2、在对比色之间插入分割色（金、银、黑、白、灰等）；3、采用双方面积大小不同的处理方法；4、对比色之间加入相近的类似色。 对比色的调和网页例图：http:/ 对比色的调和分析：基本上可以说是黄色和紫色的对比色做页面的主要色调。黄色紫色组合在网页中使用率较低，原因是这组颜色适用范围相对其他两组对比色要小很多，配色难度也较两组大。这里黄色加入了红色呈中黄色，紫色加入了红色，偏玫瑰色，所以这组颜色不是严格意义上的对比色，也因此使这组颜色看起来协调、舒适。这个页面都调低了亮度使整体降低了纯度，缓和视

4、觉刺激。白色是这组对比色里加入的协调色。结论：从上面的分析我们可以知道，通过上面的这些色值调配-当需要使用这组对比色配色时候该如何达到协调的目的。不是对比色为主色调的页面就一定会有不舒适的感觉的，主要可以通过调低亮度、降低饱和度、加入少许白色来调和 渐变色的调和渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。 渐变色的调和网页例图渐变色的调和分析：该页面背景使用了渐变的效果，增加了视觉空间感。在导航栏、广告区域、产品技术的大标题块，都使用了渐变的技术手法来表达，产生三维的视

5、觉效果，统一了整个页面的设计语言，也是区别于其他网站页面的个性体现，达到让人印象深刻的目的。结论：渐变色能够柔和视觉，增强空间感，体现节奏和韵律美感，统一整个页面的目的。除了统一当然也可以起到变化页面视觉形式的作用。该设计语言可做需要的时候适当的使用。 本部分小结：本节主要对色彩的对比与调和做了实例分析。例如当页面平淡单调，需要用对比手法做些变化来丰富页面的色彩设计；当页面变化过多，显得刺眼、凌乱，可以通过以上介绍的调和方法进行调整，使得页面看起来更统一协调。 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入

6、同类色或者类似色、白色、黑色、灰色做到统一调配的目的。 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越轻易调和。请参照刚才对比色调和页面分析例子方法。 不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色，主要是根据色彩相互之间的搭配关系来体现的。 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配，轻易产生个性效果，那叫玩色彩了，限于色彩运用得非常熟练的朋友，但不推荐初学者使用。网页制作中色彩的对比http:/ 为了使网页的整体画面呈现稳定协调的感觉，以便充分的把

7、握其规律来更好的分析学习，上次我们介绍了视觉角色主次位置的几个概念，本节我们介绍色彩的对比。对比与调和就是形式美的变化与统一规律在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。各种纯色的对比会产生鲜明的色彩效果，很轻易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、外形、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。色彩的对比规律大

8、致有以下几点： 色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。 色相对比网页例图：http:/色相对比分析：主要是以绿色与蓝色之间的色相对比。从 HSB 数值上可看出嫩绿色的 S 纯度高 B 亮度也很高，因此艳丽的颜色作为背景与前景纯度稍低的墨绿和轱蓝色形成色相之间的对比。前景的墨绿虽然纯度达到最高值100，比主色调高不少，但是因为亮度低，因此色彩显示没有主色调明艳。结论：该页面色相的对比，主要作用于前景与背景的对比

9、、局部与整体的对比。 明度对比明度对比可分为:彩色差的明度对比及非彩色差的明度对比 是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。 明度对比网页例图：http:/ 明度对比分析：（非彩色差）严格来说，该页面应该是黑白灰色非色彩构成，摄影图片中的人物衣服为灰色，相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一，形成另一道独特的风景。 纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经

10、调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。 纯度对比网页例图：http:/ 纯度对比分析：整个页面看起来异常艳丽刺激然而又非常的协调。以上数值主要选取了几种较有代表性的颜色。大家注重看，以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空间及明快页面的作用，在这里可以说是功不可没。结论：页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色

11、。从多种高纯度的搭配协调能力上看，足可见作者对色彩设计搭配不一般的功底。这类网页配色非常能够体现出一个网站页面产品个性，配色难度大。让人过目难忘。 补色对比将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。 补色对比网页例图补色对比分析：由冷色系的绿色、蓝色组成大背景环境，纯度较低。前景主要是突出产品、文字信息内容的大红色形成补色对比效果，RGB 的 R255 数值与 HSB 是 H 为零， 数值显示非常明确，标准的大红色。纯度亮度非常高，达到最高值，加之白色的勾边，使得红色更为凸显，更易于视觉对信息的迅速捕捉。结论：对比色的合理搭配，能拉开前景

12、与背景的空间感，突出页面主体物。尤其是红色在主体物的运用，能迅速传递视觉的效果 冷暖对比是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色体系，蓝、绿、紫则代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。 冷暖对比网页例图冷暖对比分析：以上这几组颜色乍一看感觉鲜艳程度都差不多，但是通过观察它们的数值发现饱和度都有相差，然而明度相近，因此它们给人造成的视觉感受几乎是相同的。该页 面冷暖颜色较为丰富，橙和蓝是对比最强烈的补色，其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡

13、作用。主色调的浅蓝色亮度较 高，让页面不易给人沉闷的感觉。结论：冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。通常初学者较轻易使两色相互排斥，导致画面色调不谐调。一般我们采用两种调和的方法。纯度调整降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配，或者加入补色的谐调，也都能很好的起到协调的效果。 纯度调整网页例图纯度调整分析：主色调的橙色，添入了少许黑色做渐变背景色，降低了纯度。辅助色的蓝色是橙色的补色，主要起的是使得整个页面过多的暖色降低协调于整体的效果，及背景色 的棕色都分别提暗降低

14、纯度。而左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑，纯度亮度很高的点 睛色红色就起到了这个作用。结论：纯度的调整主要是通过明度黑、白、灰变化来调整画面的层次，适当的加入补色也是其中的一个办法。面积调整主次的面积区分。根据设计主题的需要，在画面的面积上以一方为主色，于是就掌控画面的色调作用，其他的颜色在使用面积上拉开距离，使画面的主次关系更突出，在统一的同时富有变化。 面积调整网页例图面积调整分析：作为大面积使用的主色调-饱和度和亮度为最高值的橙色，通过适当面积的白色加入协调和平衡了视觉的作用外，主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用，缩小面积而却又能突出于视觉中心点，疏密构图的对比效果。结论：大面积的颜色和小面积使用的颜色可以拉开主次关系，位置的正确安排也是一个方面 面积对比同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差