专题2：网页设计色彩.ppt

第七讲、网页中的色彩 一、色彩的基本知识 　颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。 第六讲、网页中的色彩 1、色相（Hue）：　　也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。 基本色相环 第六讲、网页中的色彩 2、明度（Value）： 　　也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。 明度的递增 ? 第六讲、网页中的色彩 第六讲、网页中的色彩 3、纯度(Chroma）： 　　也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。 加入黑色的纯度变化和加入白色的纯度变化 第六讲、网页中的色彩 H：色相 S：饱和度 B：亮度 第六讲、网页中的色彩 二、网页设计配色应用 （一）、色彩的对比 网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。 对比与调和就是形式美的变化与统一规律　　在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。　　各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。 第六讲、网页中的色彩 1、色相对比　　是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。 第六讲、网页中的色彩 色相对比 网页例图：  第六讲、网页中的色彩 2、明度对比　　明度对比可分为:彩色差的明度对比及非彩色差的明度对比 　　是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。 第六讲、网页中的色彩 明度对比 网页例图： 第六讲、网页中的色彩 3、纯度对比　　是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。 第六讲、网页中的色彩 纯度对比 网页例图 第六讲、网页中的色彩 4、补色对比　　将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。 第六讲、网页中的色彩 补色对比 网页例图 第六讲、网页中的色彩 5、冷暖对比　　是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色体系，蓝、绿、紫则代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。 第六讲、网页中的色彩 冷暖对比 网页例图 第六讲、网页中的色彩 6、纯度调整　　降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配，或者加入补色的谐调，也都能很好的起到协调的效果。 第六讲、网页中的色彩 纯度调整 网页例图 第六讲、网页中的色彩 7、　面积调整　　主次的面积区分。根据设计主题的需要，在画面的面积上以一方为主色，于是就掌控画面的色调作用，其他的颜色在使用面积上拉开距离，使画面的主次关系更突出，在统一的同时富有变化。 第六讲、网页中的色彩 面积调整 网页例图 第六讲、网页中的色彩 8、面积对比　　同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。 　　面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。 第六讲、网页中的色彩 面积对比 网页例图