第一章1.4和1.5 色彩的调和和色调的变化-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

The Color Foundation 第一章 色彩基础 2 色彩的构成原理 The Principle of Color Composition 1 色彩的印象 The Impression of Color 2 色彩对比 Color Contrast 3 色彩的调和 Color Harmony 4 目 录 CONTENTS 色调的变化 Colors Vary 5 网页色彩心理 Web Color Psychology 6 3 色彩的调和 同类色的调和 近似色的调和 4 PART 对比色的调和 渐变色的调和 4 色彩的调和 Color Harmony 1.4 色彩的调和 色彩的对比可以给人一种强烈的视觉冲击力，有时候更需要表现一种协调、统一柔和的效果，此时就会运用色彩的调和。所谓色彩的调和是指几种色彩之间构成的较为和谐的色彩关系，即画面中色彩的秩序关系和量比关系。两种或多种以上的色彩合理搭配，就会产生统一和谐的效果，在视觉上符合审美的心理需求。 人的色彩视觉正是在无限丰富的色彩对比和连续对比中，感觉到对不同色彩本质的刺激，并在多种刺激中使视觉变得活跃、生动、鲜明和充实。由此可见，色彩和谐的核心就是对立色彩的统一。 调和就是统一，下面主要介绍四种常用的达到页面色彩调和的方法。 2023/3/29 4 5 1.4.1.同类色的调和 相同色相、不同明度和纯度的色彩调和。使页面产生有秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感。如图1-49所示的《舌尖上的中国》第三季独家官网，红色和橙色本身会刺激食欲，也能给人以充满活力的感觉，而食物是中国人感知、把握世界的重要方式。节目在历史演化中探究中国美食的迁徙与融合，而它的独家官网首页的用色使用了同种色的红色系—朱红、暗红、胭脂红、珊瑚红、橙红、粉红、淡粉，通过明度、纯度的微妙变化，产生了缓和的节奏美感，完美呈现了一幅视觉及精神大餐。 图1-49同类色调和运用 色彩的调和 Color Harmony 6 1.4.2.近似色的调和 在色环中，色相越靠近越调和。主要靠近似色之间的共同色来产生作用。 类似色相较于同类色色彩之间的可搭配度要大些，颜色丰富、富于变化，如图1-50所示，页面主要采用的是色环中的绿色、蓝色，通过改变明度、纯度、面积上的不同，实现变化和统一的。 图1-50近似色调和运用 色彩的调和 Color Harmony 7 1.4.3.对比色的调和 对比色是指在24色相环上相距120度到180 度之间的两种颜色，称为对比色。 如图1-51所示，央视为《魅力葡萄牙》设计的网站使用了大面积的红色和小面积的绿色作为搭配，面积的对比起到了调和色彩的作用。此外，在用色上分别降低了两个颜色的明度，又加入了白色作为分割色，这都起到了调和视觉的作用。因此处理对比色时一般采用以下方法： ●提高或降低对比色的纯度和提高一方明度； ●在对比色之间插入分割色（金、银、黑、白、灰等）； ●采用双方面积大小不同的处理方法，即大面积冷与小面积暖； ●对比色之间加入相近的类似色。 色彩的调和 Color Harmony 8 1.4.4.渐变色的调和 渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。 如图1-52和图1-53所示的页面背景都使用了渐变的效果，增加了视觉空间感。在标题、背景等位置，都使用了渐变的技术手法来表达，产生三维的视觉效果并加强视觉纵深感，统一了整个页面的设计语言，也是区别于其他网站页面的个性体现，达到让人印象深刻的目的。 色彩的调和 Color Harmony 9 色调的变化 5 PART 10 色调的变化 Colors Vary 1.5 色调的变化 色调是色彩的视觉基本倾向，是色彩的明度、色相、纯度三要素通过综合运用形成的，在明度、纯度、色相三要素中，某种因素起主导作用，通常就称作某种色调。 色调的使用没有明显的限制，任何一个色相都可以成为主色调，主色调与其他色相组成各种各样的相互关系，如互补色、近似色、对比色等关系。按照色彩三要素和色彩的冷暖分类，大致可如此分类 1.根据色相分类可分为：红色调、绿色调、紫色调等。 2.根据明度分类可分为：鲜色调、灰色调、深色调。 11 1.5 色调的变化 ①鲜色调 在确定色相对比的角度、距离后，尤其是中差（90度）以上的对比时，必须与无彩色的黑、白、灰及金、银等光泽色相配，在高纯度、强对比的各色相之间起到间隔、缓冲、调节的作用，以达到既鲜艳又真实、既变