Web制作03

第7章节
Web设计的配色应用
渐变色的调和 渐变色实际是一种调和方法的运用。是颜色按层 渐变色实际是一种调和方法的运用。 次逐渐变化的现象。色彩渐变就像两种颜色间的 次逐渐变化的现象。 混色，可以有规律地在多种颜色中进行。 混色，可以有规律地在多种颜色中进行。暗色和 亮色之间的渐变会产生远近感和三维的视觉效果。 亮色之间的渐变会产生远近感和三维的视觉效果。 渐变色能够柔和视觉，增强空间感，体现节奏和 渐变色能够柔和视觉，增强空间感， 韵律美感，统一整个页面的目的。 韵律美感，统一整个页面的目的。 除了统一当然也可以起到变化页面视觉形式的作 该设计语言可做需要的时候适当的使用。 用。该设计语言可做需要的时候适当的使用。
明度对比
是指色彩之间明暗程度的差别而形成的对比。是页 是指色彩之间明暗程度的差别而形成的对比。
面形成恰当的黑、 效果的主要手段。 面形成恰当的黑、白、灰 效果的主要手段。明度对 比在视觉上对色彩层次和空间关系影响较大。 比在视觉上对色彩层次和空间关系影响较大。
第7章节
Webቤተ መጻሕፍቲ ባይዱ计的配色应用
纯度对比 是指不同色彩之间纯度的差别而形成的对比。色 是指不同色彩之间纯度的差别而形成的对比。 彩纯度可大致分为高纯度、中纯度、低纯度三种。 彩纯度可大致分为高纯度、中纯度、低纯度三种。 未经调和过的原色纯度是最高的， 未经调和过的原色纯度是最高的，而间色多属中 纯度的色彩， 纯度的色彩，复色其本身纯度偏低而属低纯度的 色彩范围。 色彩范围。纯度的对比会使色彩的效果更明确肯 定。 这类网页配色非常能够体现出一个网站页面产品 个性，配色难度大。让人过目难忘。 个性，配色难度大。让人过目难忘。
第7章节
Web设计的配色应用
面积对比 同一种色彩，面积越大，明度、纯度越强，面积 同一种色彩，面积越大，明度、纯度越强， 越小，明度、纯度越低。面积大的时候， 越小，明度、纯度越低。面积大的时候，亮的色 显得更轻，暗的色显得更重。 显得更轻，暗的色显得更重。这种现象称为色彩 的面积效果。 的面积效果。面积对比是指页面中各种色彩在面 积上多与少、大与小的差别， 积上多与少、大与小的差别，影响到页面主次关 系。 面积的对比,可以是中高低明度差的面积变化及中 面积的对比, 高低纯度差的面积变化。 高低纯度差的面积变化。 大面积的颜色和小面积使用的颜色可以拉开主次 关系
第7章节
Web设计的配色应用
色彩的对比
对比与调和就是形式美的变化与统一规律 在一定条件下，不同色彩之间的对比会有不同的 在一定条件下， 效果。在不同的环境下， 效果。在不同的环境下，多色彩与色彩单给人的 印象各不相同。 印象各不相同。 色彩的对比包括以下几类：色相对比、明度对比、 色彩的对比包括以下几类：色相对比、明度对比、 纯度对比、补色对比、冷暖对比、面积对比等 纯度对比、补色对比、冷暖对比、面积对比等
第7章节
Web设计的配色应用
色调
网页中总是由具有某种内在联系的色彩，组成一 网页中总是由具有某种内在联系的色彩， 个完整统一的基调，形成的画面色彩总趋向， 个完整统一的基调，形成的画面色彩总趋向，称 为色调。也可以理解为色彩状态。 为色调。也可以理解为色彩状态。色彩给人的感 觉与氛围，是影响配色视觉效果的决定因素。 觉与氛围，是影响配色视觉效果的决定因素。 为了便于使用，我们把网页中颜色的主次分为如 为了便于使用， 下几类：主色调、辅助色、点睛色、 下几类：主色调、辅助色、点睛色、背景色 一个页面中色彩主次关系主要是根据其面积多少 的来区别、划分的。 的来区别、划分的。
第7章节
Web设计的配色应用
冷暖对比 是指不同色彩之间的冷暖差别形成的对比。 是指不同色彩之间的冷暖差别形成的对比。色彩分 为冷、暖两大色系，以红、 黄为暖色体系， 为冷、暖两大色系，以红、橙、黄为暖色体系，蓝、 紫则代表着冷色系，两者基本上互为补色关系。 绿、紫则代表着冷色系，两者基本上互为补色关系。 另外，色彩的冷暖对比还受明度与纯度的影响， 另外，色彩的冷暖对比还受明度与纯度的影响，白 光反射高而感觉冷，黑色吸收率高而感觉暖。 光反射高而感觉冷，黑色吸收率高而感觉暖。 冷暖对比的应用，通常在休闲娱乐网站、 冷暖对比的应用，通常在休闲娱乐网站、食品网站 出现比较多。 出现比较多。
第7章节
Web设计的配色应用
补色对比 将红与绿、黄与紫、蓝与橙等具有补色关系的色 将红与绿、黄与紫、 彩彼此并置，使色彩感觉更为鲜明，纯度增加， 彩彼此并置，使色彩感觉更为鲜明，纯度增加， 称为补色对比。 称为补色对比。 对比色的合理搭配，能拉开前景与背景的空间感， 对比色的合理搭配，能拉开前景与背景的空间感， 突出页面主体物。尤其是红色在主体物的运用， 突出页面主体物。尤其是红色在主体物的运用， 能迅速传递视觉的效果。 能迅速传递视觉的效果。
第7章节
Web设计的配色应用
两种调和的方法： 两种调和的方法： 纯度调整 降低冷暖两色纯度。用明度黑、白、灰的变化来 降低冷暖两色纯度。用明度黑、 调整画面的层次、直接使用黑、 调整画面的层次、直接使用黑、白、灰色系进入 画面搭配，或者加入补色的谐调，也都能很好的 画面搭配，或者加入补色的谐调， 起到协调的效果。 起到协调的效果。 面积调整 主次的面积区分。根据设计主题的需要，在画面 主次的面积区分。根据设计主题的需要， 的面积上以一方为主色， 的面积上以一方为主色，于是就掌控画面的色调 作用，其他的颜色在使用面积上拉开距离， 作用，其他的颜色在使用面积上拉开距离，使画 面的主次关系更突出，在统一的同时富有变化。 面的主次关系更突出，在统一的同时富有变化。 。
第7章节
Web设计的配色应用
类似色的调和 在色环中,色相越靠近越调和。主要靠类似色之间 在色环中,色相越靠近越调和。 的共同色来产生作用。 的共同色来产生作用。 类似色相较于同类色色彩之间的可搭配度要大些， 类似色相较于同类色色彩之间的可搭配度要大些， 颜色丰富、富于变化。 颜色丰富、富于变化。
第7章节
色相对比
Web设计的配色应用
指因色相之间的差别形成的对比。不同色相对比取 指因色相之间的差别形成的对比。
得的效果有所不同，两色越接近，对比效果越柔和。 得的效果有所不同，两色越接近，对比效果越柔和。 越接近补色，对比效果越强烈。 越接近补色，对比效果越强烈。 明度对比
明度对比可分为:彩色差的明度对比及非彩色差的 明度对比可分为:
第7章节
Web设计的配色应用
同种色的调和 相同色相、不同明度和纯度的色彩调和。 相同色相、不同明度和纯度的色彩调和。使之产 生秩序的渐进，在明度、纯度的变化上， 生秩序的渐进，在明度、纯度的变化上，弥补同 种色相的单调感，产生及其微妙的韵律美。 种色相的单调感，产生及其微妙的韵律美。为了 不至于让整个页面呈现过于单调平淡， 不至于让整个页面呈现过于单调平淡，有些页面 则是加入极其小的其他颜色做点缀。 则是加入极其小的其他颜色做点缀。 同种色被称为最稳妥的色彩搭配方法。 同种色被称为最稳妥的色彩搭配方法。
第7章节
Web设计的配色应用
色彩的调和
两种或两种以上的色彩合理搭配，产生统一谐调 两种或两种以上的色彩合理搭配， 的效果，称为色彩调和。 的效果，称为色彩调和。色彩调和是求得视觉统 一，达到人们心理平衡的重要手段。 达到人们心理平衡的重要手段。 调和就是统一，下面介绍的四种方法能够达到调 调和就是统一， 和页面色彩的目的。 和页面色彩的目的。
第7章节
Web设计的配色应用
对比色的调和 调和方法有： 调和方法有： 1.提高或降低对比色的纯度 提高或降低对比色的纯度； 1.提高或降低对比色的纯度； 2.在对比色之间插入分割色 在对比色之间插入分割色（ 2.在对比色之间插入分割色（金、银、黑、白、灰 等） 3.采用双方面积大小不同的处理方法 采用双方面积大小不同的处理方法； 3.采用双方面积大小不同的处理方法； 4.对比色之间加入相近的类似色 对比色之间加入相近的类似色。 4.对比色之间加入相近的类似色。