您的位置:首页> 日志> 视觉设计 正文

 

认识和使用色环

色环就是将常用色彩按照某种规律排列成圆环之后的结果。千万不要以为色环只有一种。例如,以计算机显示器使用的红、绿、蓝三原色为基础,经两两混合得到间色,再进一步得到下一级间色,最终得到的12色、24色或更多颜色的色环通常被称为RGB色环或光源色色环;而从美术颜料中的红、黄、蓝三原色出发得到的色环也被称为美术色环;还有一些设计师会根据自己的需要,仅仅用某个色调区域的色彩组合成专用的色环。

经常观察和分析色环中隐藏的色彩规律是网页设计师的必修课之一。在RGB色环中,我们可以很容易找到那些最适于在显示器中表现的色彩。但RGB色环隐藏了较多暖色系的细节,我们最好用美术色环来探索颜色与颜色之间的相互关系。

在美术色环中,相距180°的两种颜色是反差最强烈的补色,间距在60°以内的色彩是关系最为协调的近似色,两两相距60°的三种颜色则可以构成一个视觉效果非常强烈的色彩组合……如果我们自己创建出了一个由不同深浅的蓝色组成的色环,那么,只要简单地将色环中心区域填充为某种色彩,就能很快找到与该颜色最为相配的蓝色了。

色彩的心理效应

每种色彩都会引起人们特定的心理感觉。我们常说的冷色和暖色就是心理感觉的体现。一些设计师喜欢为自己熟悉的每种色彩配上两三个特定的形容词,比如为深紫色配上“忧郁-陶醉-哀婉”,然后根据这些形容词,将不同的色彩分门别类,以便在需要时选用。韩国I.R.I色彩研究所用类似的方法将标有形容词的常用色彩及色彩组合置于“生硬-柔和/动态-静态”的坐标系(印象空间)中,这样,设计师只要在坐标系中圈出与网站主题吻合的印象区域,就可以很容易地找到自己需要的色彩组合了(参见电子工业出版社2002年9月出版的《Web Color Design——设计师谈网页配色》一书)。

色彩的心理效应不是固定不变的。特定色彩在与其他不同色彩搭配时,往往会表现出不同的心理效应。比如,当我们把紫色放在蓝色和绿色中间时,紫色看起来是典型的暖色,而当我们把同样的紫色放在红色和橙色之间时,它看起来就是典型的冷色了。再比如,单独看起来明亮、纯净的黄色一旦被置于浅棕色的背景中,似乎一下子就变得模糊和晦涩了。

不同的色彩模型

在电脑中,网页设计师可以使用不同的色彩模型来表示特定的色彩。打开Photoshop软件的调色板,我们可以看到最常用的四种色彩模型——RGB、CMYK、HSB和Lab。

RGB是设计师在网页中指定色彩的基本模型。作为一名网页设计师,我们应当对RGB色彩模型有足够的了解,至少,我们应能快速说出大多数典型色彩的RGB近似值,或是在看到某一组RGB值后马上知道那大致是一种什么样的色彩。

CMYK是打印机等印刷设备使用的色彩模型。大多数网页设计师无须考虑CMYK模型。但在设计那些专用于打印的彩色网页时,我们就必须解决某种色彩转换到CMYK模型后可能存在的失真问题,因为许多明亮的RGB色彩都无法准确映射到CMYK空间。使用Photoshop提供的“Proof Colors”功能可以看到色彩在打印输出时的实际效果——如果某种色彩失真较大,那么最好提前换掉它。

HSB色彩模型可以反应出某种色彩的色调(Hue,也译作“色相”,但中文Windows和Mac OS X系统的调色板均使用“色调”的译法)、饱和度、亮度这三个基本属性。HSB模型最接近人们对色彩的感知方式,因此,在选择特定色彩或色彩组合的时候,我们可以先从HSB模型出发定位色彩,然后再将其转换为网页中使用的RGB值。

Lab模型是一种非常出色的技术模型,非常适于精确地表达、存储、压缩或转换色彩信息。尽管也可以用较直观的方式理解Lab模型,但目前使用Lab模型寻找或定位特定色彩的设计师还寥寥无几。

色调变化

在色调(Hue,也译作“色相”)的基础上寻求变化是最常用的色彩搭配方式之一。

从RGB色环或美术色环出发,我们可以很容易地找到相距180°左右的补色组合以及相距60°以内的近似色组合。使用补色可以在网页中制造出强烈的视觉对比效果,这适于表达那些鲜明、突出的主题;使用近似色则可以让网页的整体视觉效果更加和谐,这适于表现那些含蓄、内敛的主题。

还有一种值得注意的色调组合方式:选出一种特定色彩后,在色环上找到其补色所在的位置,然后从补色两边同时选出两种或多种补色的近似色,并将它们与原色彩搭配起来。这样的色彩组合一方面包含视觉上的对比因素,另一方面也包含统一、和谐的效果。如果变换每种色彩在网页上的分布位置和分布面积,还可以得到许多意想不到的结果。

饱和度变化

饱和度是反应色彩纯净或灰浊程度的指标。将饱和度相近的色彩搭配在一起,可以在统一的视觉效果中引入节奏上的变化;将饱和度差异较大的色彩搭配在一起,可以让饱和度高的色彩更加突出,也可以让网页中的视觉冲突更加明显。

饱和度为0时,色彩就变成了白色、灰色或黑色。因此,有些设计师也把特定色彩与白色、灰色、黑色的搭配归入到饱和度对比的范畴中。从这个意义上说,白色、灰色、黑色等中性色在突出其他色彩的“彩色属性”方面有着非常重要的价值。

亮度变化

保持色调和饱和度一定的情况下,单纯改变某种色彩的亮度,也可以得到许多漂亮的色彩组合。

在许多现代企业的网页中,亮度不同的蓝色既可以让整个网页保持统一的商务风格,也可以让不同的网页区域形成一定的对比和变化关系。有时候,前景信息和背景信息分别使用亮度不同的色彩(比如暗绿色背景上的浅绿色文字)也会收到奇效——这些网页看上去似乎沉浸在某种独特而强烈的感情色彩中;同时,前景颜色和背景颜色既保持了一定的相似性,又存在较明显的对比关系,不会妨碍我们阅读文字信息。

Web安全色和其他调色板

选择颜色时,可以直接利用一些现成的调色版。

网页设计师比较熟悉的216种网页安全颜色在前几年一度成了配色领域里的首选调色板。据说这216种安全颜色在所有操作系统和所有显示设备上的显示效果都完全一致——这种说法当然不够准确,这216种色彩只是相对而言不那么容易受到设备影响罢了。今天,在绝大多数显卡和显示器都已经使用24位真彩色的情况下,216种安全颜色的重要程度已经大不如前。但是,如果设计师希望网页能在PC以外的设备(如PDA和手机)上保持足够出色的显示品质,我们还是应该坚持从这216种颜色组成的调色板中寻找配色方案。

在Photoshop或Illustrator软件的“Swatches”窗格中,我们还可以载入许多经典的调色板。比如,PANTONE系列的调色板就非常受设计师们的欢迎。直接从这些经典的调色板中选取颜色可以省去寻找或尝试色彩组合时的许多麻烦。

使用配色工具

网页设计师应善于利用软件工具帮助自己选择色彩和色彩组合。比如,我自己就经常在Illustrator中用矩形拼凑出基本的网页布局,然后不断改变每个矩形的填充色,以寻找最佳的配色方案。

有一些非常专业的配色软件可以帮我们解决很多问题,比如ColorImpact软件可以让我们在RGB色环或美术色环中自由选取特定的色彩,可以根据我们选择的主色调和配色思路(比如以补色为主或以近似色为主)自动给出示例网页的显示效果,还可以让我们在屏幕范围内自由点选颜色并完成RGB、HSB等色彩模型间的转换。另一种名为ColorWheel Pro的小软件在网页配色模拟方面的功能比ColorImpact还要强大一些。