网站及页面的色彩搭配课件.ppt

1、1网站及页面的色彩搭配主讲：马冰主讲：马冰page2主要内容：色彩的搭配色彩的搭配 常用的网页色彩搭配方式常用的网页色彩搭配方式 网页色彩的规划网页色彩的规划 色彩搭配技巧色彩搭配技巧 网页配色赏析网页配色赏析31 色彩基础知识page41.1 色彩的基本概念在计算机中表示颜色的模式有好几种，在在计算机中表示颜色的模式有好几种，在HTML网页设计中使用网页设计中使用的是的是RGB模式。红光、绿光、蓝光是色光加光混合的三基色，模式。红光、绿光、蓝光是色光加光混合的三基色，通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。计算机的显示器

2、显示画面是靠显示器屏幕的微小的发光点发出计算机的显示器显示画面是靠显示器屏幕的微小的发光点发出不同比例的红光、绿光、蓝光三种颜色的光而显出千变万化的不同比例的红光、绿光、蓝光三种颜色的光而显出千变万化的画面。画面。RGB色彩模式就是用色彩模式就是用R表示红光的分量，用表示红光的分量，用G表示绿光表示绿光的分量，用的分量，用B表示蓝光的分量，表示蓝光的分量，RGB数据就可以表示出任何一种数据就可以表示出任何一种颜色，颜色，任何一种颜色也可以用一个任何一种颜色也可以用一个RGB数据表示出来。在文字数据表示出来。在文字格式一文中曾说过格式一文中曾说过color属性的取值有用英文关键字、属性的取值有用

3、英文关键字、16进制颜进制颜色代码、色代码、rgb函数三种类型。函数三种类型。page5#FF0000：#FF0000可分为四个部分可分为四个部分#、FF、00、00。#开头表示这个颜色是开头表示这个颜色是16进进制颜色代码，后三部分分别表示红光分量、绿光分量、蓝光分量，我制颜色代码，后三部分分别表示红光分量、绿光分量、蓝光分量，我们可以这样理解们可以这样理解#FF0000这个颜色代码：红光分量是这个颜色代码：红光分量是16进制的进制的FF(16进制的进制的FF等于十进制的等于十进制的255);绿光分量是绿光分量是16进制的进制的0;蓝光分量是蓝光分量是16进制进制的的0的一个颜色。的一个颜色

4、。16进制的个位数正数由小到大分别是进制的个位数正数由小到大分别是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。现在再来分析现在再来分析#FF0000这个这个颜色代码，颜色代码，16进制颜色代码每一基色只用两位数来表示，所以每一基进制颜色代码每一基色只用两位数来表示，所以每一基色分量的最大值色分量的最大值FF，最小值是，最小值是0，#FF0000 里红光分量已达最大，绿里红光分量已达最大，绿光光 和绿光都是和绿光都是0，所以它是单纯的红色，所以它是单纯的红色。page6色光混合示意图表色光混合示意图表 红光、绿光、蓝光是色光加光混合的三基色，红光、绿光、蓝光是色光加光混合的三

5、基色，通过红光、通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。绿光、蓝光不同比例的组合，能产生任何颜色的光。page7 表中第一行是红光和绿光的混合效果，左边的格子里的颜表中第一行是红光和绿光的混合效果，左边的格子里的颜色的红光成为多，右边的格子里绿光的成分少，第八第九色的红光成为多，右边的格子里绿光的成分少，第八第九个格子里红光和绿光的成分一样多个格子里红光和绿光的成分一样多。从第八和第九个格子从第八和第九个格子可以看出红光可以看出红光+绿光绿光=黄光。黄光。当红光和绿光的万分一样多时当红光和绿光的万分一样多时混合出的黄光是既不偏绿也不偏红的。混合出的黄光是既不偏绿也不偏红的。当红

6、光比红绿光多当红光比红绿光多时混合出的黄光就会偏红，当绿光比红光多时混合出的黄时混合出的黄光就会偏红，当绿光比红光多时混合出的黄光就会偏绿。光就会偏绿。上表中第二行是绿光和蓝光混合效果，第三上表中第二行是绿光和蓝光混合效果，第三行是蓝光和红光混合效果请自行分析体会。行是蓝光和红光混合效果请自行分析体会。page8三色光混合示意图:这个图表可以是这样认为红光从左边向右边这个图表可以是这样认为红光从左边向右边照射照射,绿光从右边向左边照射绿光从右边向左边照射,蓝光从下方向上方蓝光从下方向上方照射。三光混合中如果两种色光和光量较多，则照射。三光混合中如果两种色光和光量较多，则混合出的颜色接近光量较多

7、的两种色光混合出的混合出的颜色接近光量较多的两种色光混合出的颜色，在上图中第一二行蓝光较少，红光和绿光颜色，在上图中第一二行蓝光较少，红光和绿光较多，则第一二行是红光和绿光的混合效果。第较多，则第一二行是红光和绿光的混合效果。第三行以下蓝光逐渐增加，在左边绿光较少，左边三行以下蓝光逐渐增加，在左边绿光较少，左边的一二列是红光和绿光的混合效果，在右边红光的一二列是红光和绿光的混合效果，在右边红光较少，右边的一二列中是绿光和蓝光的混合效果。较少，右边的一二列中是绿光和蓝光的混合效果。在最后一行的第八第九个格子里红光绿光蓝光三在最后一行的第八第九个格子里红光绿光蓝光三种色光的份量一样，则三原色光混合

8、成了白色。种色光的份量一样，则三原色光混合成了白色。page9非彩色和彩色：颜色分两类。非彩色是指黑，白，灰系统色。彩色是指除颜色分两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。了非彩色以外的所有色彩。网页制作用彩色还是非彩色好呢？根据专业的研究机构研网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。般情况下，彩色页面较完全黑白页面更加吸引人。任何色彩都有饱和度和透明度的属性，属性的变化产生不任何色彩都有饱和度和透明度的属性，属

9、性的变化产生不同的色相，所以至少可以制作几百万种色彩。同的色相，所以至少可以制作几百万种色彩。page10色调：通常的做法是：要考虑主页底色（背景色）的深、浅，这里借通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是用摄影中的一个术语，就是“高调高调”和和“低调低调”。底色浅的称。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或文字的

10、颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为图片）。这种深浅的变化在色彩学中称为“明度变化明度变化”。有些。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。亮度反差太强，同样也会使读者的眼睛受不了。page11色彩的象征意义在色彩的运用上

11、，可以根据主页内容的需要和自己的喜好，分在色彩的运用上，可以根据主页内容的需要和自己的喜好，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文退的效果等。另外，色

12、彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。内涵，从而提升主页的文化品位。page12色彩的象征意义 暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的刺激如深黄到刺黄色。暗色中间含高亮度的对比，会给人刺激如深黄到刺黄色。暗色中间含高亮度的对比，会给人沉着、稳重、深沉的感觉觉，如深红中间是刺红，中性色沉着、稳

13、重、深沉的感觉觉，如深红中间是刺红，中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰、纯色与高亮度的对比，给人跳跃舞动的感觉。中间是浅灰、纯色与高亮度的对比，给人跳跃舞动的感觉。如黄色与白色的纯色与低亮度的对比，给人轻柔、欢快的如黄色与白色的纯色与低亮度的对比，给人轻柔、欢快的感快。如浅蓝色与白色纯色与暗色的对比，给人强硬，不感快。如浅蓝色与白色纯色与暗色的对比，给人强硬，不可改变的感觉。可改变的感觉。page13色彩的冷暖感觉 暖色调：暖色调：即红色、橙色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情的氛围。冷色调：

14、冷色调：即青色、绿色、紫色等色彩的搭配，可使主页呈现宁静、清凉、高雅的氛围。page14对比色调：即把色性完全相反的色彩搭配在同一个空间里。例如：红即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握就要把握“大调和，小对比大调和，小对比”这一个重要原则，即总体的这一个重要原则，即总体的色调应

15、该是统一和谐的，局部的地方可以有一些小的强烈色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。对比。15色彩的象征意义 page16色彩的象征意义红色 强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，愤怒，热情，活力的感觉。是一种雄壮的精神体现，愤怒，热情，活力的感觉。红色容易引起人的注意，易使人兴奋、激动、紧张、冲动，红色容易引起人的注意，易使人兴奋、激动、紧张、冲动，它还是一种造成人视觉疲劳的颜色。它还是一种造成人视觉疲劳的颜色。page17色彩的象征意义橙色 也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨

16、，时也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。尚的效果。page18色彩的象征意义黄色 亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给人感觉灿烂辉煌人感觉灿烂辉煌。黄色是各种色彩中最为娇气的颜色，只要在纯黄色中混入少量的黄色是各种色彩中最为娇气的颜色，只要在纯黄色中混入少量的其他色，其色相感和色性均会发生较大程度的变化。其他色，其色相感和色性均会发生较大程度的变化。page19色彩的象征意义绿色 介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。和金黄、淡白搭配

17、，产生优雅，舒适的气氛。和金黄、淡白搭配，产生优雅，舒适的气氛。page20色彩的象征意义蓝色 永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，能体现柔顺，淡雅，浪漫的气氛，给人感觉平静、理智。能体现柔顺，淡雅，浪漫的气氛，给人感觉平静、理智。page21色彩的象征意义紫色 紫色的明度在所有色彩的色料中是最低的。它给人一种优紫色的明度在所有色彩的色料中是最低的。它给人一种优雅、高贵、魅力、自傲、神秘的感觉。雅、高贵、魅力、自傲、神秘的感觉。page22色彩的象征意义粉色 女孩子最喜欢这种色，温馨、浪漫的感觉。女孩子最喜欢这种色，温馨、浪漫

18、的感觉。page23色彩的象征意义黑色 具有深沉，神秘，寂静，悲哀，压抑的感受具有深沉，神秘，寂静，悲哀，压抑的感受。黑色是最具。黑色是最具有收敛性、沉郁的、难以琢磨的色彩，给人一种神秘感。有收敛性、沉郁的、难以琢磨的色彩，给人一种神秘感。同时，黑色还表示凄凉、悲伤、忧愁、恐怖，黑色甚至是同时，黑色还表示凄凉、悲伤、忧愁、恐怖，黑色甚至是死亡的象征，但若是运用得当，却能产生黑铁金属质感，死亡的象征，但若是运用得当，却能产生黑铁金属质感，时尚前卫，科技等都可以用黑色来形容。时尚前卫，科技等都可以用黑色来形容。page24色彩的象征意义白色 具有洁白，明快，纯真，清洁的感受。具有洁白，明快，纯真，

19、清洁的感受。page25色彩的象征意义灰色 具有平静、稳重、朴素、中庸，平凡，温和，谦让，中立具有平静、稳重、朴素、中庸，平凡，温和，谦让，中立和高雅的感觉和高雅的感觉。page26色彩的象征意义黑、白色 不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有时感觉庄严肃穆。白色有时感觉无尽希望，有时却感觉恐时感觉庄严肃穆。白色有时感觉无尽希望，有时却感觉恐惧和悲哀。惧和悲哀。27色彩的搭配page28非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。常清晰明了。灰色是万能

20、色，可以和任何彩色搭配，也可灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。以帮助两种对立的色彩和谐过渡。page29彩色的搭配彩色的搭配 1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2、色彩的独特性。要有与众不同的色彩，使得大家对你的印、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。象强烈。3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。如用粉色体现女性站点的柔性。4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天、色

21、彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。页的内涵相关联。page30网页色彩掌握的过程网页色彩掌握的过程 随着网页制作经验的积累，我们用色有这样的一个趋势随着网页制作经验的积累，我们用色有这样的一个趋势:单色单色-五彩缤纷五彩缤纷-标准色标准色-单色。单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己

22、收集的最好的图片，最满意色彩堆砌在页面上；但是时间一己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。彩甚至非彩色就可以设计出简洁精美的站点。page31网页色彩搭配的技巧网页色彩搭配的技巧 1、用一种色彩。这里是指先选定一种色彩，

23、然后调整透明度、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，或者饱和度，(说得通俗些就是将说得通俗些就是将 色彩变淡或则加深色彩变淡或则加深)，产，产生新的色彩，用于网页。这样的页面看起来色彩统一，有生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。层次感。2、用两种色彩。先选定一种色彩，然后选择它的对比色、用两种色彩。先选定一种色彩，然后选择它的对比色(在在photoshop里按里按ctrl+shift+I)。我的主页用蓝色和黄色就是。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。这样确定的。整个页面色彩丰富但不花稍。page32网页色彩搭配的技巧网

24、页色彩搭配的技巧 3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在不同，我是在photoshop里按前景色方框，在跳出的拾色器里按前景色方框，在跳出的拾色器窗中选择窗中选择“自定义自定义”，然后在，然后在“色库色库”中选就可以了。中选就可以了。4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳跳。在网页配色中，忌讳的是：在网页配色中，忌讳的是：1.不要将所有颜色

25、都用到，不要将所有颜色都用到，尽量控制在三种色彩以内。尽量控制在三种色彩以内。2.背景和前文的对比尽量要大，背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。，以便突出主要文字内容。page33网页色彩搭配的技巧网页色彩搭配的技巧 在网页配色中，忌讳的是：在网页配色中，忌讳的是：1.不要将所有颜色都用到，尽量控制在三种色彩以内。不要将所有颜色都用到，尽量控制在三种色彩以内。2.背景和前文的对比尽量要大，背景和前文的对比尽量要大，(绝对不要用花纹繁复的图绝对不要用花纹繁复的图案作背景案作背景)，以便突出主要文字内容。，以便突出主要文

26、字内容。34网页模板赏析page35个人主页：海蓝色个人博客网站模板海蓝色个人博客网站模板page36个人主页：绿色风格个人网站模板绿色风格个人网站模板 page37个人主页：page38个人主页：工具类个人网站模板工具类个人网站模板page39个人主页：某著名画家的个人网站模板某著名画家的个人网站模板 page40个人主页：卡通个人主页卡通个人主页网页模板网页模板 page41个人主页：韩国风格个人网站模板韩国风格个人网站模板page42个人主页：清爽个人清爽个人网页模板网页模板 page43个人主页：个人博客个人博客网页模板网页模板 page44个人主页：团队展示团队展示网页模板网页模板

27、page45个人主页：个人主页个人主页网页模板网页模板 page46个人主页：个人主页个人主页网页模板网页模板 page47个人主页：个人主页个人主页网页模板网页模板 page48企业网站：济南田园乐橄榄油公司网页模板济南田园乐橄榄油公司网页模板page49企业网站：苗木网网站模板苗木网网站模板page50企业网站：餐饮美食网站模板餐饮美食网站模板page51企业网站：装饰公司网页模板装饰公司网页模板page52企业网站：购物商城网页模板购物商城网页模板page53企业网站：page54设计网页：滑雪网站模板滑雪网站模板page55设计网页：page56设计网页：page57设计网页：page

28、58设计网页：page59设计网页：page60设计网页：page61设计网页：page62设计网页：page63学校网站：中国现代史纲要精品教程教育网站模板中国现代史纲要精品教程教育网站模板page64学校网站：中国现代史纲要精品教程教育网站模板中国现代史纲要精品教程教育网站模板page65学校网站：小学网站模板小学网站模板page66学校网站：周末大讲堂网站模板周末大讲堂网站模板page67学校网站：郑州大学综合设计研究院网站模板郑州大学综合设计研究院网站模板page68学校网站：大学班级网站模板大学班级网站模板page69政府网站：南昌市市政公用事业局网站模板南昌市市政公用事业局网站模板page70门户网站：博鳌亚洲论坛门户网站模板博鳌亚洲论坛门户网站模板71The end!