【案例引入】

色彩在生活中的应用非常广泛，对人们的影响较大，如乡村基、麦当劳、大米先生等快餐店的店面装修多采用红色、黄色、橙色等暖色。因为黄色、红色可以刺激人的食欲，以促进消费者消费。所以，在繁华的街市上很容易看到快餐店的门面装修大都是红黄两色。而咖啡馆和酒吧一般设计成褐色或蓝色的风格，这样有利于顾客放松、休息。红色在中国代表着喜庆、欢快、传统，烟花爆竹、对联、中国结、灯笼、结婚庆典等都是红色的，甚至过年的时候连刚出锅的馒头都要点上红色。在医院，我们很少看到鲜亮的色彩，大多都是白色。因为白色会使患者的内心平静，有利于病人的治疗和恢复健康。

【案例分析】

在网页制作中，色彩是一个非常重要的元素，合理地安排色彩，页面不仅可吸引浏览者的眼球，还能正确传达信息。它的应用影响着人们的情绪与心情。我们在制作网页时可适当利用色彩使人浏览网页之后能心情愉悦、积极向上。

【主要知识点】

微课1.2　网页色彩基本知识

1.2.1　网页色彩基本知识

1）色彩的形成

色彩就是光经过物体散射到达人眼睛中的视觉效应。物体的颜色就是它们反射光的颜色。我们常见的白光，实际是由红、绿、蓝三种波长的光组成的。物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经过人眼，传到大脑就形成了我们看到的颜色。红、绿、蓝三种波长的光是自然界所有颜色的基础，光谱中的所有颜色都是由不同强度的三种光构成，所以红、绿、蓝也称三原色。

2）色彩三要素

自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。色彩可用色调（色相）、饱和度（纯度）和明度来描述。人眼看到的任一彩色光都是这三个特性的综合效果，这三个特性即是色彩的三要素。

①色相是颜色的基本特征，是一种色彩区别于另一种色彩的最主要因素，它反映颜色的基本面貌。紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度很容易搭配，比如深绿、暗绿、草绿、亮绿。

②饱和度指色彩的鲜艳程度。纯度高的色彩鲜亮，纯度低的色彩暗淡。

③明度也叫亮度，指的是色彩的明暗程度，体现了颜色的深浅，明度越大，色彩越亮。比如一些购物类、儿童类网站，多用一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。色彩明度越低，颜色越暗，主要用于一些游戏类网站，充满神秘感。

一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的性格特点。明度差的色彩更容易调和，如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。

3）色相环

色相环是指一种圆形排列的色相光谱，色彩是按照光谱在自然界中出现的顺序来排列的。暖色位于包含红色和黄色的半圆之内，冷色则包含在绿色和紫色的那个半圆内。互补色出现在彼此相对的位置上，以三原色（红、绿、蓝）为基础。网站常用的颜色都体现在色相环上，如图1.2.1所示。

图1.2.1　色相环

4）色彩的冷暖感

色彩本身没有冷暖的色温差别，是视觉色彩引起人们对冷暖感的联想。

暖色：红色、橙色、黄色等颜色，使人联想到生活中的一些温暖的物体，如火焰、太阳、枫叶等。

冷色：蓝色、紫色等颜色，使人联想到幽静、凉快的事物，如海洋、天空等。

也有许多颜色介于冷色和暖色之间，比如绿色可使人们联想到绿色植物。绿色中黄色占比多一些的色彩都趋向于暖色；蓝色占比多一些的色彩都趋向于冷色。

5）色彩的味觉感

现实中，人们可以将自己的味觉与许多食物的色彩对应联系起来。

①酸。让人感觉酸的颜色有蓝、绿、黄、橙黄等，如图1.2.2所示的橘子。

图1.2.2　酸酸的橘子

②甜。让人感觉甜的颜色有黄、橙、粉红、乳白等，如图1.2.3所示的苹果。

图1.2.3　甜甜的苹果

③苦。让人感觉苦的颜色有棕色、黑褐色、灰黑色等，如图1.2.4所示的咖啡。

图1.2.4　咖啡

④辣。让人感觉辣的颜色有红、黄、黄绿、绿等，如图1.2.5所示的辣椒。

图1.2.5　辣椒

6）色彩的联想性

①红色。红色是最具有视觉冲击力的色彩，它的纯度高，注目性高，刺激作用大，人们称之为“火与血”的颜色，能增高血压，加速血液循环。

②橙色。橙色的视觉刺激冲击力虽然没有红色大，但它的视认性和注目性也很高，既有红色的热情又有黄色的光明，以及活泼的特质，是人们喜爱的色彩。

③黄色。黄色让人产生明朗、愉快、光明、华丽、活力、快乐、醒目的感觉。

④黄绿色。黄绿色是介于黄色和绿色的中间色。

⑤绿色。绿色让人产生和平、宁静、环保、青春、理想等感觉。

⑥蓝绿色。蓝绿色明视度及注目度基本与绿色相同，只是比绿色显得更冷静。

⑦蓝色。蓝色是幸福色，表示希望。它让人产生专业、睿智、科技、永恒、朴实、寒冷等感觉。

⑧蓝紫色。蓝紫色是明度很低的色彩，所以纯度效果显不出力量，注目性较差，明视度必须靠背景来衬托，给人以收缩、后退的感觉。

⑨紫色。紫色因与夜空、阴影相联系，所以富有神秘感。紫色容易引起心理上的犹豫和不安，但又给人以高贵、庄严之感。

⑩紫红色。紫红色是指带紫味的红色，其视认性和注目性以及冷暖程度介于红色与紫色之间，象征着浪漫和热情，比较常用。

○1白色。白色是不含纯色的色，除因明度高而感觉冷外，基本为中性色，明视度与注目性都相当高。它让人产生纯洁、天真、空灵、弱小、朴素、神圣等感觉。由于白色为全色相，因此与其他色相混合均能取得很好的效果。

○12灰色。灰色为全色相，也是没有纯度的中性色。它让人产生质朴、睿智、大气、谦逊、平凡等感觉，是万能协调色，与其他色彩配合使用可取得很好的效果。

○13黑色。黑色为全色相，也是没有纯度的色，与白色相比给人以暖的感觉。黑色在心理上是一个很特殊的色彩，它本身无刺激性，但是与其他色彩配合能增加刺激。黑色是消极色，它给人神秘、力量、诡异、黑暗、绝望的感觉，所以单独使用的情况不多。

1.2.2　网站配色的原则

第一原则：先定主色，再配辅色。为网页配色时，先根据网站的主题确定主色，再根据主色的需要搭配好辅色。如图1.2.6所示的儿童网站主页，根据体现儿童个性为主题的需要，确定主色为绿色，红色、黄色、桔色、紫色为辅色，使整个网页生动有趣、童稚盎然。

图1.2.6　儿童网站主页

第二原则：有效利用黑白灰色进行网页的色彩搭配。在网页美工设计中，任何漂亮、绚丽、丰富的色彩都需要黑白灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统一的效果。如图1.2.7所示的新罗网站首页与图1.2.8所示的汽车网站首页都采用了灰色与主色搭配，使整个网页高雅、和谐、大气。(www.daowen.com)

图1.2.7　新罗网站首页

图1.2.8　汽车网站首页

第三原则：注意色彩的对比。有对比才会有和谐，要注意色彩中的对比关系并有效控制这些对比关系，如色彩的明度对比、纯度对比、色相对比、冷暖对比、轻重对比、面积对比等。这样，网页才会达到色彩明快、视觉和谐的效果。如图1.2.9所示的网页采用了红色、黑色、白色三种颜色之间的明度对比、色相对比、冷暖对比的效果，使页面色彩分明，视觉冲击强，给人留下深刻印象。

图1.2.9　宗申集团主页

1.2.3　网页色彩搭配的原理

1）色彩的鲜明性

网页的色彩要鲜艳，容易引人注目，如图1.2.10所示。

图1.2.10　某饮料网站主页

2）色彩的独特性

与众不同的色彩，可使浏览者对网页产生强烈印象，如图1.2.11所示。

图1.2.11　某娱乐网站主页

3）色彩的合适性

网页色彩应和其表达的内容气氛相适合，如用粉色体现女性站点的柔性，如图1.2.12所示。

图1.2.12　某女性网站主页

4）色彩的联想性

不同的色彩会让人产生不同的联想，如蓝色让人想到天空，黑色让人想到黑夜，红色让人想到喜事等。网页色彩要和其内涵相适应。

微课1.3　网页色彩搭配技巧

1.2.4　网页色彩搭配的技巧

1）用一种色彩

选定一种色彩，然后调整透明度或者饱和度（即将色彩变淡或加深），产生新的色彩。这样的页面看起来色彩统一，有层次感。如图1.2.13所示的某俱乐部网站主页采用了红色色调，用深红、中红、浅红来配色，使整张网页颜色和谐、统一、舒适。

图1.2.13　某俱乐部网站主页

2）用两种色彩

先选定一种色彩，然后选择它的对比色。如图1.2.14所示的某俱乐部网站主页以黄色为主调，图案、文字背景使用黑色，颜色对比分明，具有震撼性，给人留下深刻印象。

图1.2.14　某俱乐部网站主页

3）用一个色系

简单的说，就是用风格相同或相近的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝等。如图1.2.15所示的某婴幼儿网站主页用粉红、粉绿、粉蓝、粉黄搭配在一起，显得温馨、和谐。

图1.2.15　某婴幼儿网站主页

4）主色直接决定网站的色彩风格

在网页色彩搭配中，主色起主导作用，决定网页的整体色调。辅色搭配在主色基础上进行。辅色在网页中的比例一般为主7辅3，或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色彩混乱、风格模糊的场景。如图1.2.16所示的某公司网站网页用以绿色为主，再以蓝色、灰色为辅，主次分明、搭配得当。

图1.2.16　某公司网站网页

1.2.5　色彩使用要注意的问题

①不要将所有颜色都用到，尽量控制在三种色彩以内。其中，有一种要设定为主色调，通常选择白底，对一些特殊类型的网站，比如饮食类网站，则可以适当使用一些暖色调，如黄色、红色等为主色调，然后再配上适宜的相关颜色。

②背景和前文的对比尽量要大，尽量不要用花纹繁复的图案作背景。

③根据文化背景适当地选择颜色。

【课程育人】

通过案例引入和关于颜色基础知识、网页配色原则、色彩搭配技巧事项等的介绍，让我们掌握了网页的色彩使用方法与技巧，为网页的界面设计打下坚实基础的同时，认识到色彩的积极应用对网页起着重要作用。

绿色、红色、蓝色、黄色等色彩在网页中的合理应用给人带来美感，让人热爱生活，期待未来。

【课堂互动】

1.下面属于暖色的颜色有（　）。（多选）

A.红色　B.橙色　C.绿色　D.黄色

2.下面属于冷色的颜色有（　）。（多选）

A.蓝色　B.橙色　C.绿色　D.黄色

3.下面属于中性色的颜色有（　）。（多选）

A.灰色　B.黑色　C.白色　D.黄色

4.下面属于苦色的颜色有（　）。（多选）

A.灰色　B.黑色　C.棕色　D.黄色