曾经想尽方法给网页设计出令人为之惊艳的色彩搭配吗?或者你一直不解为何银行、公司行号或金融机构的网页总是使用蓝色系?今天广帆互动为大家分享一些颜色搭配的技巧。虽然大部分的网页 开发人员都很清楚网络所使用的色盘和计算 色彩搭配的 16 进位系统,但对 色彩搭配学和有效 色彩搭配组合背后所隐含的原理依然懵懵懂懂。
几世纪以来,颜色本身就是一个难解的谜题。举例子来说,苏格拉底就曾经假设说「火」之源起,乃是因眼睛结合了对象本身的「白」(whiteness)所产生的颜色。之后,牛顿更探索光与 色彩搭配之间的关系;其后历经许多科学研究,终于在20世纪确认了光波与 色彩搭配感应之间的绝对关系。
色彩搭配学
我们能看到颜色是靠三个元素相互作用而成:光源、物体的反射特性、以及人体视网膜和脑部视觉皮质区对光波的处理方式。不管我们使用哪种媒材来作业 -- 绘画、印刷或网络 -- 我们都得依赖上述过程才能有效使用颜色。
色彩搭配的排列 -- 彩虹
十七世纪末期,牛顿证明了 色彩搭配并非存在于物体本身,而是光作用的结果,且只要将可视光谱上的长短光波结合起来即可形成白光。这些可视光的波长可对应到七个不同的颜色:红、橙、黄、绿、蓝、靛、紫。可视光谱的区域是介于红外线与紫外线之间,波长约为 400nm (紫色) 到 700nm (红色) 之间。虽然牛顿证明这些光波结合在一起即形成白光,但其实只需要红、绿、蓝三光波就可以产生白光。
光的吸收与反射
当光波投射在物体身上后,该物质会传送、吸收或反射不同部分的光波。根据不同物体的特性以及它本身的原子构造,它可能反射了绿光但吸收了其它的波长。这时候人们的视网膜和脑部视觉皮质区会处理此一反射光,然后形成我们所看到的颜色。
一切靠眼睛
当 然,不论是反射自物体或是发射自光源本身,我们处理光波的能力都是靠视网膜和脑部的视觉皮质区。视网膜内有三个接收器(或者说是锥细胞)可响应某些光波的 频率。红色锥细胞能感应低频率的波长,绿色锥细胞反应的是中频率的波长,蓝色锥细胞反应的是高频率的波长。这些锥细胞的运作并非二元性的,而是类似频道一 样,可将刺激分别传达至脑部的视觉皮质区,经过处理后才产生出我们所看到的颜色。
设计师 处理颜色的方法通常有两种:一、加色法,混合不同颜色的光波以形成白光;二、减色法,使用颜料来减少光波。传统的艺术家所使用的色盘和 CMYK 系统都是减色法模式。在网页上,我们所面对的是光的投射,而不是从物体上反射回来的光,所以使用的是加色法模式,我们称它为RGB。
加色法
在大自然中,我们所看到的光波是经过物体反射进入我们的视网膜,但产生 色彩搭配的方式不仅只这一种。例如,舞台灯光是利用白光穿过有色滤镜来产生不同的色光。计算机屏幕也是使用投射光波的方式,但不同的是它藉由让电子光枪发光投射到含磷的屏幕来产生色光。这些电子光枪可以发出三种颜色:红、绿、蓝。藉由这三种色光,计算机屏幕可制作出完整的光谱。这就是大家所熟知的 RGB 色系。
在 RGB 系统中, 设计师 也可以透过混合三原色的方式做出一个光谱。混合任两个原色,就会产生三个次原色:青、洋红、黄。如前面所说的,将光的三原色加在一起就可以做出白光。所 以,如果一个 RGB 的值为 255,255,255 则表示为白色。如果完全拿掉这三原色的光 (RGB: 0,0,0) 则产生黑色。
减色法
RGB 模式的相反模式就是 CMYK 模式,也就是使用减少光波的方式来产生颜色。由于物体颜色来自于反射的光波,此一系统乃使用三原色来吸收物体的红、绿或蓝光。例如,如果你减少了红光,那 么多余的绿色波和蓝色波就会产生青色。用来除去红光、反射绿、蓝光的颜料就会显示青色。相同的,平面印刷 设计师会使用洋红来吸收掉一部份的绿光,以及使用黄光来吸收掉一部份的蓝光。
这 样一来,我们很明显的可以知道 CYMK 模式中所使用的三原色就是 RGB 模式中的次颜色,反之亦同。再者,如果将红、绿、蓝光混合在一起形成白光,那么就表示将青、洋红、黄三色的颜料混合在一起就会产生黑色,因为三原色的光波 都将被颜料所吸收了。然而受限于颜料和印刷系统的因素,混合青、洋红、黄并无法完全吸收掉所有的光波。因此实际上还必须加上一个黑色才能完成,所以就产生 了 CMYK 里面的 K 元素了。
色彩搭配管理
由于有这两套不同的复制颜色方式, 设计师若必须同时创作数字与印刷影像可就伤脑筋了。除了对应加色法和减色法之间的困难外,RGB 和 CMYK可使用的 色彩搭配范围差异也相当大。因此对跨媒体 设计师而言,拥有一套可根据输出设备做色系转换的 色彩搭配管理系统可减轻不少头痛问题。 色彩搭配管理系统可包含在操作系统,某些应用软件之中。
色彩搭配调和
视觉 设计最大的挑战之一便是找出有效的调和 色彩搭配,让色系既不过于单调,也不过于夸大。想了解 色彩搭配平衡之间的关系,可从了解色环开始着手。色环呈现出某一 色彩搭配模式中所有可能的色相
每个 色彩搭配模式都包含了一组三原色,然后经由这一组三原色的相互混合而产生不同的颜色。在传统 色彩搭配学中,三原色指的是蓝、红、黄;而在 RGB 色彩搭配模式中,色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。三次色则是混合了原色与次色,或者是混合两种次原色所产生。我们用色环来呈现颜色的逻辑性。你可以从下面的图中看出, RGB 的色环和传统艺术家们所使用的色环是很不一样的。
同色调和:单一颜色,只是深浅、色调和明暗度不同。
近似色调和:使用邻近的颜色或在色环上很接近的颜色做调和。
互补色调和:使用色环上两个相对的颜色做调和。这样的颜色组合通常可以提供最大程度的对比感觉,但若过份使用使会流于夸大。
对比色调和:使用一种颜色,再加上其互补色旁边的两个颜色做调和。对比色调和能提供比互补色调和较柔和的对比。
三角调和:使用色环上三个等距离颜色。
双互补调和:使用两组 (共四色) 互补颜色。
在探索 色彩搭配调和的时候,通常最好从纯色下手,然后再尝试不同程度的渲染、色调和明暗度。接着你可使用网页仿真图先行测试某颜色组合的视觉 特效。记得,对比的重要性不只是在于为了吸引人而 设计;它也可能帮助或妨碍网页的阅读性。
色彩搭配所传达的意义
当我们在检视 色彩搭配的科学本质和 色彩搭配调和的美学考量时,我们发现感官在 色彩搭配运用上扮演了很重要的角色。除了感官反应与辨识调和 色彩搭配外,人类内在对 色彩搭配的反应还有更深层的一面。 色彩搭配能引发强烈的生理/心理共鸣,不管是正面或负面。当你在选定颜色组合时,请确定你所选择的颜色能引起适当的回响。
色彩搭配的生理反应
虽然并没有直接证据显示 色彩搭配能 引发特定反应,但是研究显示,某些颜色确实能够引起一些生理上的反应。例如,红色就是一种非常刺激的颜色,往往会令人心跳加快、呼吸急促。所以,红色非常 适合用在需要引起注意和强调的时候,但若用在背景颜色的时候可能显得过于强烈。相同地,黄色也能引起注意,但因为其反射性太强,容易造成眼睛的疲劳和不舒 服。另外一方面,蓝色对神经系统具有放松的效果,且根据一些研究显示,以蓝色当背景还能增加生产力。但是,如果你的产品与食物有关,千万不要用蓝色作为背 景颜色,因为蓝色可是会抑制人们的胃口喔。
色彩搭配的象征
色彩搭配所象征的意义有时候跟大自然中的事物有关。例如,天空与太阳的颜色所产生的联想举世接然。然而,大部分的 色彩搭配意义都跟民族文化有关,例如,政治、宗教、神话或社会结构等 -- 这些因素可能会随着时间与地域的不同而产生差异。
一般在西方的文化中, 色彩搭配所传达的涵义为:
红色:热情、浪漫、火焰、暴力、侵略。红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作。
紫色:创造、谜、忠诚、神秘、稀有。紫色在某些文化中与死亡有关。
蓝色:忠诚、安全、保守、宁静、冷漠、悲伤。
绿色:自然、稳定、成长、忌妒。在北美文化中,绿色代表的是「行」,与环保意识有关,也经常被连结到有关财政方面的事物。
黄色:明亮、光辉、疾病、懦弱。
黑色:能力、精致、现代感、死亡、病态、邪恶。
白色:纯洁、天真、洁净、真理、和平、冷淡、贫乏。白色在中华文化中也代表着死亡的颜色。
选择最恰当的 色彩搭配组合
替网页选对颜色可不是一件容易的事;很多公司还特别聘请专业咨询人员,使其 色彩搭配组合能搭配、强化整体的品牌形象。但是,如果你自己就已经具有 色彩搭配调和感,并且了解某些颜色可能会引起什么样的反应,你只需照着你的方法进行, 开发出有效的 色彩搭配组 合。在你开始找寻对应的颜色之前,你必须先很清楚你网页所要传达的讯息和目标。一但你了解要传达的讯息后,就可开始进行调色工作了。
颜色搭配的技巧和方针
1. 了解你的网页所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如,如果在 设计一个强调稳健的金融机构,那么就要选择冷色系、柔和的颜色,像是蓝、灰或绿。在这样的状况下,如果使用暖色系或活泼的颜色,可能会破坏了该网页品牌。
2. 了解你的读者群。文化差异可能会使 色彩搭配产生非预期的反应。同时,不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色,但这样的颜色却引不起高年龄层的兴趣。
3. 不要使用过多的颜色。除了黑色和白色以外,约选择四到五个颜色就够了。太多的颜色会导致混淆,也会拉走读者的注意力。
4. 在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果,也会妨碍观众阅读。白底黑字的阅读效果最好。
5. 用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候,有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比,你可以建立一个仿真网页,并将它转换成灰阶即可。
6. 选择颜色要注意时效性。同一个 色彩搭配很容易就充斥着整个市场,且消费者很快的就对流行 色彩搭配感到麻木。但就另外一个角度来看,你可以使用几十年前的流行 色彩搭配,引起人们的怀旧之情。
7. 选择色盘的时候要考虑到功能性颜色。千万不能忘记给关键信息部分建立功能性颜色,比如标题还有超级链接等等。
本文为广帆互动提供,谢谢大家对广帆互动的支持!