1.3色彩对比 课件(共10张PPT)-《网页美工——网页色彩与布局设计（第2版）》同步教学（电子工业版）

(课件网) The Color Foundation 第一章 色彩基础 色彩的构成原理ThePrinciple ofColorComposition1色彩的印象TheImpression ofColor2色彩对比ColorContrast3色彩的调和ColorHarmony4目 录CONTENTS色调的变化Colors Vary5网页色彩心理WebColorPsychology6色彩对比色相对比明度对比3PART冷暖对比面积对比纯度对比补色对比色彩对比ColorContrast1.3 色彩对比谈到色彩的对比，往往会给人一种误解就是色相的对比，例如，红黑的对比、红绿的对比，其实则不然。色彩的对比不仅仅局限于色相之间的对比。通常指两种以上的色彩，以空间或时间关系相比较，表现出明显的差别，并产生比较作用，被称为色彩对比。红、黄、蓝是三原色，每一种颜色都有着极强的个性，三种色彩放在一起时，大家会感觉到画面色彩鲜艳，在同等面积与相同纯度时，三者之间很难相互影响，始终保持各自的特征；而补色之间的对比则是一种极端的对比，红与绿搭配时，红的更红，绿的更绿。按照色彩的对比规律而言，其大致可分为：色相对比、明度对比、纯度对比、冷暖对比、补色对比、面积对比。1.3.1.色相对比色相的对比是指两个或两个以上不同色相的色彩放在一起时所产生的色相差别对比，色相对比使色彩倾向趋于明显。对比的效果越明显；当对比的两色越接近补色，对比效果越强烈，如图1-40、图1-41所示。图1-40色相对比柔和图1-41色相对比强烈色彩对比ColorContrast1.3.2.明度对比因明度之间的差别形成的对比，如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。色彩间明度差别的大小，决定了明度对比的强弱。明度对比较强时可以产生光感，色彩的清晰度高；明度对比较弱时，给人一种不明朗、模糊的感觉，反之则会产生生硬感。如图1-38所示，白底上的橙色文字就不如图1-39所示黑底上的橙色线条。图1-38 白底上的橙色文字 图1-39 黑底上的橙色线条色彩对比ColorContrast1.3.3.纯度对比一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比。如图1-44所示，中间的色块比左边色块纯度高，同时又比右边色块纯度低。如图1-45所示的网页，显示了运用纯度对比的网页效果。图1-44色块的纯度对比 图1-45运用纯度对比的网页效果色彩对比ColorContrast1.3.4.补色对比色环直径两端的色彩互为补色，一种色彩只有一种补色。互补色混合后将会产生中性灰。将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。如图1-46所示的耶鲁大学艺术学院网站的“展览”界面采用的动图拼接背景，就运用了高纯度补色对比的网页效果。图1-46运用补色对比的网页效果色彩对比ColorContrast1.3.5.冷暖对比由于色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比。其实。色彩的冷暖主要来自认人的心理感受，而且和色彩的纯度、明度有关。在无彩色的黑、白、灰中，白色为冷色，黑色为暖色。如图1-47所示，就是运用冷暖对比的网页效果。图1-47运用冷暖对比的网页效果色彩对比ColorContrast1.3.6.面积对比面积对比是指两个或更多色块的相对色域，是一种多与少、大与小之间的对比。一般情况下，色彩的面积越大，其纯度、明度越高；反之面积越小，其纯度、明度越低。当色彩的面积越大时，亮的色彩显得更轻，暗的色彩更重，这就是人们常说的色彩的面积效应，如图1-48所示。图1-48色彩面积对比色彩对比ColorContrast ... ...