色彩搭配在网站中的应用.ppt

网 页 设 计 与 制 作 第三章 色彩搭配在网站中的应用 第一节　网页配色 1、色彩的基本知识 1 ．色谱 从一条彩虹的连续的可视光中，可分解出从紫到红的色谱，如图所示。 在色谱中，线性罗列了所有的基本颜色，是所有颜色的根本。 2 ．色环 　　 各个色彩依次排列成环状，就组成了孟赛尔“色相环”，简称色环。 3 ．三原色　　 三原色：是指能够按照一定的比例，合成其他任何一种颜色的基色。所有的颜色其实都是由三原色按照不同的比例混合而来。 色彩的三原色：红、黄、蓝 色光的三基色：红、绿、蓝 饱和度：又叫作纯度，是指在同等明度的条件下，颜色从灰色到纯色的变化。 在计算机中纯度在0——100%之间。 如图所示，为同一张图片，饱和度分别为 0 、 50% 、 100 %时的状态。 明度：从黑到白中间增加 9 个均匀过渡的灰度阶段，被称为明度九段，也叫明度尺。下图是同一张图片不同明度的情况。 明度在计算机色彩中用0——100%来表示。 2、常见的配色方案 　1 ．近似色 　 近似色是与给定颜色相邻的颜色（色相环上相邻45度以内）。以橙色为例，它的两种近似色应该是红和黄。如左图所示，为近似色在色环上的位置。 　 用近似色可以实现色彩风格的统一、协调。右图列出了几种近似色的配色方案。 实例： 下图是使用了近似色配色方案的网页。蓝色系的搭配，给人以凉爽、素雅的感觉。 2 ．对比色　 对比色也叫补充色，是指在色环中的直接位置相对的颜色，如左图所示。　　 如果想要使网站中的色彩强烈突出、富有冲击力的话，可选择对比色。　　 实例1：假如正在组合一幅桔子的图片，用蓝色背景将使桔子形象更加突出。如右图所示。 实例2：下图是使用了补充色的网站。大块的橙色和蓝色组合在一起， 对比强烈。 3.分离补色 在色环上选择一种颜色，它的对比色就在色环相对的另一面，分离补色就是对比色旁边的一种或多种颜色。分离补色可由2~3种颜色组成。如下图所示。 用分离补色配色，可达到类似对比色的强烈对比效果，但因为有近似色的缓冲，可以使页面效果显得柔和一些。 4 ．组色 　 组色是色环上距离相等(相距120度)的任意 3 种颜色。如图 所示为色环上的一组组色。因为 3 种颜色形成了对比关系，所以用组色配色，会对浏览者造成紧张的情绪。一般在网页设计中，不推荐采用组色的搭配。 3、配色的选择 　 根据网站的整体风格来选定网页的配色十分重要。当网页的内容、标题和配色一致时，就能发挥最大的效用。欢快的内容与明快的配色相组合，可以传递出发自内心的喜悦。相反，和网站内容不相配的颜色，会引起混乱、产生破坏性的效果。 下面举例说明。 实例：下面的两张网页为 Dior 香水的产品宣传页。左图使用了金色作为网页的主色调，显得高贵、典雅，烘托出了产品的高格调和高品味。右图使用了蓝色的色调，虽然也显示出了页面的和谐，但无法表现出产品的内涵，因此让人感觉有些离题，冲淡了网页的主题。 1、色调的分析 (1)纯色调 即不与黑、白、灰进行混合的色调。这种色调的选用会给人以强有力的、生机勃勃的、青春的感觉。如下图。大片的黄色进行搭配，给人热情洋溢的感觉。打开网页，青春气息扑面而来。 (3)亮色调 将鲜艳的颜色加一点白色，便成了亮色调。与纯色调相比，亮色调显得柔和一些，是大多数人的喜爱。如下图是一个使用了亮色调的网页。 (5)浑浊色调 将淡色调稍加一点灰，便成了浑浊色调。下图为使用了浑浊色调的网页，明亮但不会过于鲜艳，塑造了稳定的都市形象。 使用了中间色调的网页 （ 7 ）暗色调 　 将亮色调稍微加一点灰，就成了暗色调。暗色调给人的感觉单纯而明快，适合用于沉稳的、安静的、素雅的氛围营造。下图为使用了暗色调的网页。 3 ．色相的选择 　　通常在制作网站时，选用色彩都希望传达一种稳重、安定的印象。在这种情况下，多数采用的就是同类色或同系色。　　在色环上相邻的颜色为同类色。如左图所示 当对一种单色增加或减少亮度时，产生的不同颜色就是同系色。如右图所示为同系色。 实例1：下图为采用了同类色的网页，虽然整个网页使用的都是冷色调，但由于控制了颜色的混合及明度对比，所以并没有给人过于冷清的感觉。 实例2：下图为采用了同系色的网页，绿色象征着快乐与希望。由于整个网页采用了同系色，因此