课程主题网页色彩搭配网页设计客户端技术课程.pptx

;任务二;色彩由无彩色和有彩色组成，白色和黑色，还有在它们之间所产生的全部的灰色段都称为无彩色。无彩色是用明度的差异来区分的，白色是最鲜亮的，黑色是最灰暗的。无彩色是没有色相的种类，只有明度的变化。;我们所说的色彩搭配一般为绘画中的色彩，三原色为红黄蓝。

进入21世纪，随着科技的发展，色彩不再仅仅局限于绘画上，所以这里说的色彩搭配是指以光的三原色为基础制作的色相环。

色彩搭配中要使用到以下几个重要概念：原色、第二色（间色）、第三色（混合色）。

;当不同的色彩搭配在一起时，色相彩度明度作用会使色彩的效果产生变化。

两种或者多种浅颜色配在一起不会产生对比效果，同样多种深颜色合在一起效果也不吸引人。但是，当一种浅颜色和一种深颜色混合在一起时，就会使浅色显得更浅，深色显得更深。明度也同样如此。;原色，色盘上延伸最长的几段表示出了三种原色—红黄蓝。

第二色（间色），将任何两种原色混合起来，你就可以得到间色。如：橙（红加黄）、紫（红加蓝）、绿（蓝加黄）。

第三色（混合色），色盘上另外6种颜色称为混合色。它们是原色和一种临近的间接色混合而成的。如：橘黄（黄加橙）、青（黄加绿）、深绿（绿加蓝）、绛（红加橙）。;色彩搭配还有一个重要的概念——色调，是指色彩浓淡、强弱程度，是通过色彩的明度和纯度综合表现出来的色彩状态。

色调不是指颜色的性质，而是对画面的整体颜色的概括评价。色调可以按照色相的分类来命名，如蓝色调、粉色调、红色调等。色调也可以对无彩进行分类命名，如灰色调、浅灰色调、深灰色调等。

不同的色调可以营造不同的氛围和感觉。上图形象、直观地列出了色相和色调的基本概念。;（1）色相配色使用

以色相为基础的配色是以色相环为基础进行思考的。用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。用距离远的颜色进行配色，可以达到一定的对比效果。

这里介绍由色相差而形成的配色方式—主导色彩配色，是一种由色相构成的统一???色，即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。;当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比。

根据主色与辅色之间的色相差不同，又可以分为以下类型：同色系主导、邻近色主导、类似色主导、中差色主导、对比色主导、中性色主导、多色搭配下的主导等。

;右图给出了类似色主导配色的一个案例。

红、黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮和图标，同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。

案例特色：基于品牌色的类似色运用，有主次地用到页面各类控件和主体内容中。;色调是指色彩浓淡、强弱程度，是通过色彩的明度和纯度综合表现的色彩状态概念。色调不是指颜色的性质，而是对画面的整体颜色的概括评价。

我们来了解有主导色调配色的色调配色方式，它是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。

即使出现多种色相，只要保持色调一致，画面也能呈现整体统一性。根据色彩的情感，不同的色调会给人不同的感受。主导色调配色方式又可以分为：清澈色调、阴暗色调、明亮色调、深暗色调、雅白色调等配色方式。

;右图为清澈色调配色的案例。

清澈色调使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较高的协调度。蓝色令页面产生安静冰冷的气氛，茶色让我们想起大地泥土的厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。

案例特色：互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果。;（3）对比配色

对比配色又可以分为色相对比配色、纯度对比配色和明度对比配色。

由对比色相构成的配色，可以分为互补色或相反色搭配构成的色相对比效果，由白色、黑色等明度差异构成的明度对比效果。

色相对比还可以分为双色对比、三色对比和多色对比。

;右图为明度对比的案例。

明度对比构成画面的空间纵深层次，呈现远近的对比关系，高明度突出近景主体内容，低明度表现远景的距离。

而明度差使人注意力集中在高亮区域，呈现出药瓶的真实写照。

案例特色：明度对比使页面显得更单纯、统一，而高低明度差可产生距离关系。;小结

色彩与色彩搭配的定义；