色彩基础知识
本章目标
本章素材下载
完成本章内容以后，你将：
了解色彩的由来和属性。
掌握色环的相关知识。
理解色彩的情感属性。
理解网络安全色的由来。
掌握网页设计中色彩的作用。
请访问课工场UI/UE学院：kgc.cn/uiue
（教材版块）下载本章需要的案例素材。
第 1 章
本章简介
色彩设计是网站设计的最重要的一环。色彩是页面中最活跃、最具持久力的视觉元素。
要想通过色彩搭配使作品更富有魅力，首先应该懂得色彩的基础知识。本章将带领大家学 习色彩的基础理论、探讨色彩的情感属性、将学习的色彩知识运用到网页创意中。
理 论 讲 解
1.1 色彩的由来
1.1.1 色彩的产生
公元前500 年，古希腊人认为，人之所以能看见各 种颜色，是因为人的眼睛能够射出不同颜色的光，如图1.1 所示。
1629 年，德国人歇尼尔发现了人的眼中有视网膜，
如图1.2 所示，当外部光线射入人的眼睛时，在视网膜 上可以形成物体的影像。
1666 年，牛顿在英国剑桥大学读书时，做了一个著 名的实验——光的色散实验，如图1.3 所示。经过进一 步研究，牛顿于1704 年出版了《光学》一书，这本书成 为近代色彩学的起点。
在黑暗中，我们看不到周围的形状和色彩，这是因 为没有光线。如果在光线很好的情况下，有人却看不清 色彩，这也许是因为视觉器官不正常（如色盲），或是 因为眼睛过度疲劳。在同一种光线条件下，我们会看到 同一种景物具有各种不同的颜色，这是因为物体的表面 具有不同的吸收光线与反射光线的能力，反射光线不同，
眼睛就会看到不同的色彩。因此，色彩的发生，是光对 人的视觉和大脑发生作用的结果，是一种视知觉。由此 看来，需要经过光—眼—神经的过程才能见到色彩，如 图1.4 所示。
图1.1 古希腊人认为的色彩的由来
图1.2 视网膜成像
参考视频 色彩基础知识
章
第 2 章
第 4 章
第 6 章 第 3 章
第 5 章
第 7 章
图1.3 牛顿的色散实验
图1.4 颜色形成的原理 光进入视觉通过以下三种形式。
光源光。光源发出的光直接进入视觉，像霓虹灯、饰灯、烛灯等的光线都可以直 接进入视觉。
透射光。光源光穿过透明或半透明物体后再进入视觉的光线，称为透射光。透射 光的亮度和颜色取决于入射光穿过被透射物体之后所达到的光透射率及波长特征。
反射光。反射光是进入眼睛的光线。在光线照射的情况下，眼睛能看到的任何物 体都是该物体的反射光进入视觉所致。
1.1.2 光源色、固有色和环境色
我们已经知道色彩是如何产生的。但是色彩不是单一的，是受各种因素影响而形成的。
那么五彩缤纷的世界具体又是怎么形成的 呢？这就需要我们对色彩的基本构成有一 个概念。
光源色、固有色和环境色三者共同构 成了物体的基本色彩，如图1.5 所示。它 们密切相关不可分割。任何情况下，都必 然存在这三种色彩因素，不同的是三者存 在此强彼弱的情况。接下来让我们对这三 个概念一一了解一下吧。
1．光源色
光源色指本身为发光体的物体投射到
物体表面的光的颜色，通常来说有自然光、灯光、火光等。不同的光源，光的色相不同。
例如，日光是白色的，普通灯光是带有黄色的，磷光是绿色的等。光源色笼罩我们所要描 述的一切对象。没有光源也就没有物体色，通常光源按性质划分为冷光源和暖光源。如 图1.6 所示，自然光照在街道上，周围的景物都受到了光源色的影响。
图1.6 光源色 2．固有色
固有色通常是指物体在正常的白色日光下所呈现的色彩特征，由于它最具有普遍性，
在我们的知觉中便形成了对某一物体的色彩形象的概念。这是一种相对的色彩概念。然而，
从实际方面来看，即使日光也是在不停变化的，何况任何物体的色彩不仅受到光源光的影 响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。但即使如此，
固有色的概念仍旧不能被排除，因为我们在生活中需要有一个相对稳定的、来自以往经 图1.5 基本色彩的组成
章
第 2 章
第 4 章
第 6 章 第 3 章
第 5 章
第 7 章
例如，绿色是青草、庄稼和树叶的色彩，因 此它常常被作为和平的象征用在许多具有象 征意义的设计中。在具体的实用设计中，如 图1.7 所示，在一个水蜜桃水果罐头的包装上，
我们更是需要在桃子的形象上加强它的固有 色特征，以引起顾客对桃子味道的联想，而 产生获得它的欲望。
猜猜看：根据刚刚学过的理论知识，你能猜出图1.8所示是什么产品的包装吗？
图1.8 包装设计效果图
课堂训练
3．环境色
环境色又称条件色，在绘画中，并非指描绘对象周围环境本身的颜色，而是指由环境 色彩所产生的物体固有色的变化。环境色的强弱和光的强弱成正比。对光滑的物体，物 体环境色明显，而对粗糙的物体环境色比较弱。环境色主要作用在物体的暗部，如 图1.9 ～图 1.11 所示。
图1.9 玫瑰红衬布背景
图1.7 罐头包装设计
图1.10 黄衬布背景
图1.11 白衬布背景
由于背景色彩的改变，几个水果的颜色也呈现不同的变化，在以上三幅图中，图1.9 中苹果与玫瑰红背景形成强烈的补色对比；图1.10 中的水果受黄色衬布的影响，颜色偏暖；
图1.11 则颜色较冷。
讨论案例——变色的立方体
请分析以下两个立方体的固有色和光源色，如图1.12 所示。
图1.12 受光立方体
章
第 2 章
第 4 章
第 6 章 第 3 章
第 5 章
第 7 章
图的立方体受到了黄光的照射，由于光线很强，受到黄色的影响严重，使它失去了本来的 固有色，它的亮部呈现出了黄色，暗部与亮部形成了强烈的对比，呈现出紫色。黄色是暖 色，紫色是冷色，更是黄色的对比色。右边的立方体受到强烈的蓝光的照射，原有的白色 没有了，亮部呈淡蓝色，暗部呈橘黄色，淡蓝色是冷色，橘黄色是暖色。由此得出这个结 论 ：在强光的照射下，物体会失去它的本来面目，受到光源色的摆布。光照越强烈，明暗 的对比越强烈，在明暗交界线的地方最强烈。亮部若暖，暗部就冷；亮部若冷，暗部就暖。
不管是冷还是暖，亮部的颜色纯度高，暗部的颜色纯度低。需要注意的是离明暗交界线越 远颜色和冷暖的对比就越弱。对比强就实，对比弱就虚。
随着光线强度的减弱，物体渐渐呈现出它的固有色，光线越弱，亮部和暗部的颜色对 比、冷暖对比就越弱。最后要说的是环境色对物体的影响也很重要，它会把它的颜色反射 到物体上。反射的强弱要灵活掌握。
1.2 色彩属性
我国古代把黑、白、玄（偏红的黑）称 为色，把青、黄、赤称为彩，合称色彩，图1.13 所示就是一幅典型的中国国画。现代色彩学，
也可以说是西方色彩学，也把色彩分为两大 类：无彩色系和有彩色系。无彩色系指黑色、
白色和黑白中间过渡的灰色，对于无彩色系，
我们在此不做过多的讨论。而对于视觉所感 知的一切色彩形象，都具有明度、色相和纯 度三种性质，这三种性质是色彩最基本的构 成元素，在这里分别进行讲解。
1.2.1 色相
1．色相的基本知识
色相是指色彩的相貌，指各种色彩之间 的区别，是色彩最明显的特点，是不同波长 的光被感觉的结果。通常人的眼睛可以分辨 出约180 种不同色相的色彩。图示 1.14 所 示是Photoshop 里面的调色窗口，显示出不 同的色相。
图1.13 国画欣赏
图1.14 Photoshop 拾色器
讨论案例——网页辨色
图1.15 所示是一些常见的门户网站主页。网页缩小之后，看到的是它的主要色彩。
请分别说出各个网站主页的设计主要运用了什么色相。
图1.15 常见门户网站 2．生活中的色相应用
案例分析——Google Chrome 图标 大变身
图1.16 所 示 是 Google Chrome 浏 览 器的最新图标。和左边的草稿比较起来，
它应用了比较多的色彩和比较纯的色相，
所以看起来色彩感很强，充满生命力。 图1.16 Google Chrome 图标大变身
章
第 2 章
第 4 章
第 6 章 第 3 章
第 5 章
第 7 章
明度是指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。其 中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。另外，在同 一色相的明度中还存在深浅的变化，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化，
如图1.17 所示。
图1.17 明度推移图
案例分析——华为技术有限公司Logo 的演化
图1.18 所示为华为技术有限公司 Logo 的变换，从图中可以明显看出，新 Logo 增加 了一个渐变效果，增加了其明度的对比。
原来 现在
图1.18 华为技术有限公司图标的演变
1.2.3 纯度
纯度是指色彩的鲜艳水平，也称色彩的饱和度。纯度取决于该色中含色成分和消色 成分( 灰色 ) 的比例。含色成分越大，纯度越大 ；消色成分越大，纯度越小，如图 1.19 所示。
图1.19 纯度变化图表
1.3 色环知识
1.3.1 色环的概念
颜色都不是孤立存在的，自然界的颜色都是相辅相成、相互搭配组成的。人们为了更 好地掌握色彩的知识，就提出了色环等 概念，把颜色组合在一起去考虑和研究。
白色光包含了所有的可见颜色，我 们看到的是由紫到红之间的无穷光谱组 成的可见光区域，就像彩虹的颜色。为 了在使用颜色时更加实用，人们对它进 行了简化，将其分为12 种基本的色相，
如图1.20 所示。
色环实质上就是彩色光谱中所见的 长条形的彩色序列，只是将其首尾连在 一起。它是在光谱基础上推移出来的，
通常讲的色环一般为12 色。通过色环 能更系统地了解色彩的相对关系。
图1.20 色环（色轮）
