网页色彩基础知识

网页色彩基础知识第1页，共21页，2023年，2月20日，星期六主要内容125.2网页配色技巧5.1网页色彩基础知识

第2页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩基础知识

1.什么是色彩色彩是光作用于人眼引起的视觉特性。人的视觉特性是受大脑支配的，所以色彩也是一种心理反映。色彩感觉不仅与物体本来的颜色特性有关，而且还受时间、空间、外表状态以及该物体的周围环境的影响，同时还受人的经历、记忆力、世界观和视觉灵敏度等各种因素的影响。

2.色彩的形成

我们能看到物体，并不是因为物体发光，而是物体反光的结果。太阳光是白色的，是由红色，绿色和蓝色三种颜色组成，当它照射到物体上之后，部分光被物体吸收，剩余的光被物体表面反射回来，我们看到的就是反射回来的光。我们说某个物体是“蓝色”的，其实是这个物体反射了蓝色光，而吸收了红色和绿色光。第3页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩基础知识

3.色彩三要素色彩可分为无彩色和有彩色两大类。无彩色是指黑色、白色和灰色，而有彩色是指红、橙、黄、绿、蓝、青、紫等。有彩色的每种色彩都可以用三个值表示，即色相、明度和纯度，它们决定着色彩的主要特征，被称为色彩的三要素。色相:是指的是色彩的名称，是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。明度:也叫亮度，指的是色彩的明暗程度，或者色彩在不同光线下的明暗程度。纯度:也叫色度，表示色彩的饱和度，即某种色彩中是否包黑色或者白色成分。第4页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩表示1.RGB模式

RGB模式是计算机中表示色彩最常用的模式，基本原理是用三原色的组合表示每种色彩。这种表示模式中，三个原色分别被划分为256个级别，每种色彩都可以表示为三个数字的组合。2.HSB模式

HSB色彩把颜色分为色相（Hue）、饱和度（Saturation）、明度（Brightness）三个因素。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽，饱和度低色彩就接近灰色。明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。第5页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩表示3.CMYK模式

CMY是3种印刷油墨名称的首字母：青色Cyan、洋红色Magenta、黄色Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。4.Lab颜色模式

Lab是CIE（国际照明委员会）指定的表示颜色的标准之一。它是广泛应用于彩色印刷和复制层面。L：指的是亮度；a：由绿至红；b：由蓝至黄。CIE色彩模式是以数学方式来表示颜色，所以不依赖于特定的设备，这样确保输出设备经校正后所代表的颜色能保持其一致性。第6页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩表示5.色彩模式的选择

RGB色彩模式是发光的，存在于屏幕等显示设备中，不存在于印刷品中；CMYK色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯一的色彩模式；CMYK的所有色彩都包含于RGB色域中，但CMYK的色彩数量少于RGB，RGB通道灰度图中偏白表示发光程度高；CMYK通道灰度图中偏白表示油墨含量低。反而反之。第7页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识色彩表示可以按照这样的原则选择色彩模式：如果图像只在电脑上显示，就用RGB模式，这样可以得到较广的色域；如果图像需要打印或者印刷，就必须使用CMYK模式，才可确保印刷品颜色与设计时一致。第8页，共21页，2023年，2月20日，星期六5.1网页色彩基础知识216种安全色216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以，使用216网页安全色进行网页配色可以避免原有的颜色失真问题。返回第9页，共21页，2023年，2月20日，星期六5.2网页配色技巧色彩选择的基本原则

1.色彩的鲜明性原则

2.色彩的独特性原则

3.色彩的适当性原则

4.色彩的联想性原则

第10页，共21页，2023年，2月20日，星期六5.2网页配色技巧网站主色调的选择

网站的主色调对整个网站色彩搭配是至关重要的。网站的主色调实际上是由网站的内容确定的，跟据网站的内容可以确定网站的主色调，也可以更具网站访问群体的类别、社会背景、心理需求和场合来确定，也可以根据不同色彩带给人们的不同心理反应进行选择。我们可以从下面的几个例子来看看。

第11页，共21页，2023年，2月20日，星期六5.2网页配色技巧网站主色调的选择

第12页，共21页，2023年，2月20日，星期六5.2网页配色技巧网站主色调的选择

第13页，共21页，2023年，2月20日，星期六5.2网页配色技巧网站主色调的选择

第14页，共21页，2023年，2月20日，星期六5.2网页配色技巧网页中色彩搭配的原则

基于色调进行配色

(1)类似色调配色；(2)互补色调配色；2.基于色彩情感进行配色

(1)红色调配色技巧；(2)黄色调配色技巧；(3)蓝色调配色技巧

(4)绿色调配色技巧(5)绿色调配色技巧(6)白色调配色技巧

第15页，共21页，2023年，2月20日，星期六5.2网页配色技巧网页中色彩搭配的原则

3.基于渐变和重复的色彩搭配

第16页，共21页，2023年，2月20日，星期六5.2网页配色技巧色彩搭配案例

1.基于灰黑色的NBA网站

第17页，共21页，2023年，2月20日，星期六5.2网页配色技巧色彩搭配案例

2.娱乐性网站UGO第18页，共21页，2023年，2月20日，星期六5.2网页配色技巧色彩搭配案例

3.采用黄色调为主

返回第19页，共21页，2023年，2月20日，星期六本章小结

本章主要向读者介绍了网页设计色彩搭配的基础知识。好多网页设计