揭开网页色彩搭配的奥秘

曾经想尽方法给网页设计出令人为之惊艳的色彩搭配吗？或者你一直不解为何银行、公司行号或金融机构的网页总是使用蓝色系？今天创新互联为大家分享一些颜色搭配的技巧。虽然大部分的网页 开发人员都很清楚网络所使用的色盘和计算 色彩搭配的 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. 选择色盘的时候要考虑到功能性颜色。千万不能忘记给关键信息部分建立功能性颜色，比如标题还有超级链接等等。

本文为创新互联提供，谢谢大家对创新互联的支持！