网页色彩基础知识学习教案

1、会计学1网页网页(wn y)色彩基础知识色彩基础知识第一页，共20页。 3. 3. 色彩三要素色彩三要素 色彩可分为无彩色和有彩色两大类。无彩色是指黑色、白色彩可分为无彩色和有彩色两大类。无彩色是指黑色、白色和灰色，而有彩色是指红、橙、黄、绿、蓝、青、紫等。色和灰色，而有彩色是指红、橙、黄、绿、蓝、青、紫等。有彩色的每种色彩都可以用三个值表示，即色相、明度和纯有彩色的每种色彩都可以用三个值表示，即色相、明度和纯度，它们度，它们(t men)(t men)决定着色彩的主要特征，被称为色彩的三决定着色彩的主要特征，被称为色彩的三要素。要素。(1)(1) 色相色相: :是指的是色彩的名称，是色彩最基

2、本的特征，是一种色彩区别是指的是色彩的名称，是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。于另一种色彩的最主要的因素。(2)(2) 明度明度: :也叫亮度，指的是色彩的明暗程度，或者色彩在不同光线下的明暗程度。也叫亮度，指的是色彩的明暗程度，或者色彩在不同光线下的明暗程度。(3)(3) 纯度纯度: :也叫色度，表示色彩的饱和度，即某种色彩中是否包黑色或者白色也叫色度，表示色彩的饱和度，即某种色彩中是否包黑色或者白色成分。成分。第2页/共20页第二页，共20页。 1. RGB模式模式 RGB模式是计算机中表示色彩最常用的模式，基本原理是用三原模式是计算机中表示色彩最常用的模式，基

3、本原理是用三原色的组合表示每种色彩。这种表示模式中，三个原色分别被划分色的组合表示每种色彩。这种表示模式中，三个原色分别被划分为为256个级别，每种色彩都可以表示为三个数字的组合。个级别，每种色彩都可以表示为三个数字的组合。 2. HSB模式模式 HSB色彩把颜色分为色相（色彩把颜色分为色相（Hue）、饱和度（）、饱和度（Saturation）、明度）、明度（Brightness）三个因素）三个因素(yn s)。所谓饱和度相当于家庭电视机。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽，饱和度低色彩就接近灰色。的色彩浓度，饱和度高色彩较艳丽，饱和度低色彩就接近灰色。明度也称为亮度，等

4、同于彩色电视机的亮度，亮度高色彩明亮，明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。 第3页/共20页第三页，共20页。 3. CMYK模式模式 CMY是是3种印刷油墨名称的首字母：青色种印刷油墨名称的首字母：青色Cyan、洋红色、洋红色Magenta、黄色、黄色Yellow。而。而K取的是取的是black最后一个字母，最后一个字母，之所以不取首字母，是为了避免与蓝色之所以不取首字母，是为了避免与蓝色(Blue)混淆。混淆。 4. Lab颜色模式颜色模式 Lab是是CIE（国际照明委员会）

5、指定的表示颜色的标准之（国际照明委员会）指定的表示颜色的标准之一。它是广泛应用于彩色印刷和复制层面。一。它是广泛应用于彩色印刷和复制层面。L：指的是亮：指的是亮度度(lingd)；a：由绿至红；：由绿至红；b：由蓝至黄。：由蓝至黄。CIE色彩模式色彩模式是以数学方式来表示颜色，所以不依赖于特定的设备，是以数学方式来表示颜色，所以不依赖于特定的设备，这样确保输出设备经校正后所代表的颜色能保持其一致这样确保输出设备经校正后所代表的颜色能保持其一致性。性。 第4页/共20页第四页，共20页。 5. 色彩模式的选择色彩模式的选择 RGB色彩模式是发光的，存在于屏幕等显示设备中，不存在于印刷品中；色彩模

6、式是发光的，存在于屏幕等显示设备中，不存在于印刷品中； CMYK色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯一的色彩模式；一的色彩模式； CMYK的所有色彩都包含于的所有色彩都包含于RGB色域中，但色域中，但CMYK的色彩数量少于的色彩数量少于RGB，RGB通道灰度图中偏白表示发光程度高；通道灰度图中偏白表示发光程度高； CMYK通道灰度图中偏白表示油墨含量低。反而通道灰度图中偏白表示油墨含量低。反而(fn r)反之。反之。 第5页/共20页第五页，共20页。 可以按照这样的原则选择色彩模式：可以按照这样的原则选择色彩模式

7、： 如果图像只在电脑上显示，就用如果图像只在电脑上显示，就用RGB模式，这样可以得到较广模式，这样可以得到较广的色域；的色域； 如果图像需要打印如果图像需要打印(d yn)或者印刷，就必须使用或者印刷，就必须使用CMYK模式，模式，才可确保印刷品颜色与设计时一致。才可确保印刷品颜色与设计时一致。第6页/共20页第六页，共20页。 216网页安全色是指在不同硬件环境、不同操作系统、网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现也就是说这些颜色在任何终端浏览

8、用户显示设备上的现实效果都是相同的。所以，使用实效果都是相同的。所以，使用216网页安全色进行网页网页安全色进行网页配色可以配色可以(ky)避免原有的颜色失真问题。避免原有的颜色失真问题。返回返回第7页/共20页第七页，共20页。1. 色彩色彩(sci)的鲜明性原则的鲜明性原则 2. 色彩的独特性原则色彩的独特性原则 3. 色彩的适当性原则色彩的适当性原则 4. 色彩的联想性原则色彩的联想性原则 第8页/共20页第八页，共20页。 网站的主色调对整个网站色彩网站的主色调对整个网站色彩(sci)(sci)搭配是至关重要的。网搭配是至关重要的。网站的主色调实际上是由网站的内容确定的，跟据网站的内容

9、可以确站的主色调实际上是由网站的内容确定的，跟据网站的内容可以确定网站的主色调，也可以更具网站访问群体的类别、社会背景、心定网站的主色调，也可以更具网站访问群体的类别、社会背景、心理需求和场合来确定，也可以根据不同色彩理需求和场合来确定，也可以根据不同色彩(sci)(sci)带给人们的不带给人们的不同心理反应进行选择。我们可以从下面的几个例子来看看。同心理反应进行选择。我们可以从下面的几个例子来看看。 第9页/共20页第九页，共20页。5.25.2网页配色网页配色(pis)(pis)技巧技巧 网站网站(wn zhn)(wn zhn)主色调的选择主色调的选择 第10页/共20页第十页，共20页。

10、5.25.2网页网页(wn y)(wn y)配色技巧配色技巧 网站网站(wn zhn)(wn zhn)主色调的选择主色调的选择 第11页/共20页第十一页，共20页。5.25.2网页配色网页配色(pis)(pis)技巧技巧 网站网站(wn zhn)(wn zhn)主色调的选择主色调的选择 第12页/共20页第十二页，共20页。1.基于色调基于色调(s dio)进行配色进行配色2. (1) 类似色调类似色调(s dio)配色；配色；3. (2) 互补色调互补色调(s dio)配色；配色；4.2.基于色彩情感进行配色基于色彩情感进行配色5. (1)红色调红色调(s dio)配色技巧；配色技巧；6.

11、 (2)黄色调黄色调(s dio)配色技巧；配色技巧；7. (3) 蓝色调蓝色调(s dio)配色技巧配色技巧 8. (4) 绿色调绿色调(s dio)配色技巧配色技巧 9. (5) 绿色调绿色调(s dio)配色技巧配色技巧 10. (6) 白色调白色调(s dio)配色技巧配色技巧 第13页/共20页第十三页，共20页。3. 3. 基于渐变基于渐变(jinbin)(jinbin)和重复的色彩搭配和重复的色彩搭配 第14页/共20页第十四页，共20页。1. 1. 基于基于(jy)(jy)灰黑色的灰黑色的NBANBA网站网站 第15页/共20页第十五页，共20页。2. 2. 娱乐性网站娱乐性网站(wn zhn)UGO (wn zhn)UGO 第16页/共20页第十六页，共20页。3. 3. 采用采用(ciyng)(ciyng)黄色调为主黄色调为主 返回返回第17页/共20页第十七页，共20页。 本章主要向读者介绍了网页设计色彩搭配的基本章主要向读者介绍了网页设计色彩搭配的基础知识。好多网页设计着在学习网页设计的时候，础知识。好多网页设计着在学习网页设计的时候，并不注意并不注意(zh y)(zh y)色彩搭配的运用，而是把主要精色彩搭配的运用，而是把