
1.1 色彩的基础知识
单纯的色彩本身并没有任何实际意义,只有当两种或两种以上的颜色搭配在一起,才会形成不同的视觉感受。网页的色彩五花八门,若想引起访客的注意,就要把握好整体的色彩风格。本节主要学习色彩的基础知识。


1.1.1 认识色彩
我们生活在一个绚丽缤纷的色彩世界中,天空、草地、海洋、花朵都有它们各自的色彩。色彩是通过眼睛传入大脑的,然后结合生活经验,产生一种对光的视觉感受效果。如果这个世界上没有光,就无法在黑暗中分辨物体的颜色。
人们之所以能看到并能辨认物体的色彩和形状,是因为凭仗光的映照,反射到我们视网膜上的结果,若没有光,那么物体的色彩就无从辨认。所以人要想看见色彩,必须满足如下三个条件。
第一是光,如果没有光,就没有色彩。
第二是物体,若只有光而没有物体,人依旧不能感知到色彩。
第三是眼睛,人的眼睛中有视觉感知和神经传导系统,然后通过大脑来辨别出不同的颜色。
可见光是电磁波谱中人眼可以感知的部分,一般在380纳米到780纳米波长范围内,包括从红色到紫色的所有色彩的光。
阳光是复色光,有红、橙、黄、绿、蓝、靛、紫这些不同频率的光。一束阳光射入三棱镜后,会发生偏转角度不同的折射,所以原本一个方向前进的光束就会被分解成按不同偏转角度顺序排列的光带,这个光带就是光谱。光谱实际上就是一种可见的电磁波,有波长和振幅两种特性,其中波长的差异造成色相的区别,如短波长为紫色,中波长为绿色,长波长为红色;振幅的大小则决定了光的强弱,也就是色彩的明暗。



1.1.2 网页色彩的特性
网页上的色彩是通过计算机显示器进行表现的,它具有特殊性。只有正确地了解网页色彩的属性,才能更加合理地运用色彩,制作出精美的网页。
计算机显示器呈现的画面是由一个个被称为像素的小点构成的,像素把由光的三原色红(R)绿(G)蓝(B)组合成的色彩按照科学的原理表现出来。像素的每种原色在内存中包含8位宽度,可代表0~255共计256种取值。0是完全无光的状态,255是最亮的状态。
网页中的色彩都是依靠数字表达的,为了保证数据在交换过程中的完整性,每一台终端机获得的数据都是相同的。但是,由于计算机设备、操作系统、色彩模式的不同,即使是同一个网页,显示的色彩还是会有偏差的。
尽管一些因素会影响网页的色彩,但是,设计网页时,可以通过网页安全色去最大限度地消除色彩在传播过程中的差别。网页安全色是256色模式中一些规定数值的通用标准色彩组合,它一共有6×6×6=216种色彩。

1.1.3 色彩的属性
色彩的属性是指色相、明度、纯度三种性质。它们分别代表着色彩的外貌、色彩的明暗程度和色彩的鲜艳程度。我们之所以能在繁杂的颜色中加以区分,就是因为每一种颜色都有自己的鲜明特征。颜色的三个属性在某种意义上是各自独立的,但在另外意义上又是互相制约的。一种颜色的某一个属性发生了改变,那么,这种颜色的特征必然要发生改变。
1.色相
任何一种彩色都有属于自己的色相,色相是指颜色的基本相貌,它是颜色彼此区分的最主要、最基本的特征。为了应用方便,通常以光谱色序为色相的基本排序,即以红、橙、黄、绿、青、蓝、紫为基础色,加上几种间色,构建出12色环。

2.明度
明度是指颜色的明暗程度,色彩的明度分为两种情况:一种是相同色相的不同明度,另一种是不同色相的不同明度。一个画面只有颜色而没有明度的变化,就显得死板、缺乏立体感,因此明度是表达立体空间关系和细微层次变化的重要特征。

3.纯度
纯度又叫饱和度、彩度,是指颜色的浓度,也可理解成色彩的鲜艳程度。越是鲜艳的颜色,其所包含的色量越高。相反,一个低纯度的颜色,其中所含色量很低。例如,在一种纯色中添加白色、灰色和黑色,它的颜色纯度都会发生变化。

1.1.4 色彩的分类
按照视觉效果,可以将色彩分为有彩色和无彩色两种。
有彩色是带有色彩倾向的颜色,例如常见的红、橙、黄、绿、青、蓝、紫等,这些都是有彩色。无彩色是指黑、白以及各种明度的灰色。无彩色只具有明度,不含有色彩倾向。


1.1.5 色彩的心理感受
色彩的心理感受是指不同色彩的色相、明度、纯度给人带来不同的心理暗示。视觉受色彩明度及纯度的影响,会产生冷暖、轻重、远近等不同感受和联想。色彩本身并无情感,而是人们通过对生活经验的积累,对色彩形成了心理感受。
1.色彩的重量感
色彩的轻重感,主要取决于明度。明度高的颜色感觉轻,明度低的颜色感觉重。当色彩的明度相同时,纯度高的比纯度低的感觉轻。

2.色彩的远近感
色彩的远近感是色彩的明度、纯度、面积等多种对比造成的错觉现象。高明度、暖色调的颜色会感觉靠前,这类颜色被称为前进色;低明度、冷色调的颜色会感觉靠后,这类颜色被称为后退色。


3.颜色的冷暖感
对颜色冷暖的感受是人类对颜色最为敏感的感觉,在色环中绿色一边的色相为冷色,红色一边的色相为暖色。冷色给人一种冷静、沉着、严寒的感觉,暖色给人一种温暖、热情、活泼的感觉。

1.1.6 主色、辅助色、点缀色的关系
在设计一个作品时,颜色通常由主色、辅助色和点缀色组成。主色广义上的含义是占据画面最多的颜色,它决定了整个作品的色彩基调。辅助色是用来烘托、渲染主色调的,当辅助色与主色调为同色系时,作品效果和谐、稳重;当辅助色为主色的对比色或互补色时,作品效果活泼、激情。点缀色是占据面积最小的颜色,可以理解为点睛之笔,是整个作品的亮点所在。
