写给网页设计师的基础配色理论

在这篇文章里，我们将聊聊为何色彩在网页设计中如此重要，以及在设计网页时如何选择令人满意的配色方案。这篇文章的主要目的在于为那些设计经验尚不丰富的设计师简要地介绍一下基础的色彩理论，并为如何将这些理论用于设计实践提供一些实用的建议。闲话不用太多，让我们这就开始吧！
这篇文章主要是写给谁的？这篇文章主要是写给那些对正统的设计原理感兴趣的读者。我不打算把这篇文章写成一篇「如何在设计中运用色彩」的完整论文（或许我会在将来详细谈谈这个话题），正相反，这篇文章面向的是那些需要实用经验，以便能在网站设计这一特定领域利用色彩理论的设计师。
从我自己的经验中，我觉得在做设计项目时，配色部分往往相当棘手---作为一个设计师，这或许是最难搞定的一部分。但是,通过学习一些基本的色彩理论知识，再加上一些性能卓越的色彩软件,我自己的设计能力得到了很大提高，并逐渐克服了「配色弱」的缺点。
这篇文章可能对这几类读者最有帮助：

?为了营造更迷人的视觉效果，迫切需要一些实用建议的网页设计师。
?刚入行，想对色彩理论有个大概了解的设计师。

?不明白「网站开发」与「网站设计」有何不同的读者。
简而言之,什么是色彩理论?色彩理论涉及到很多方面，但它最基本的定义是「在设计中，以一致效果，对比效果及色调等不同方式所表现出的色彩间的彼此关联和影响」。

在设计中，以互补效果，对比效果及色调等不同方式所表现出的色彩间的彼此关联和影响

这个定义可以说相当直白（而且浅显），但它却包含了三个色彩理论的核心词汇：
一致效果

色彩的一致效果侧重于描述一种色彩与其他色彩的关联性。当我们注视两种分别位于「色轮」两端的色彩时，会有一种和谐悦目的感觉。因为此时我们的目光不是被迫分散于不同的区域，而是达到了平衡。基于「色彩一致」的原理，有两种配色法最为常见：三角对立法与复色搭配法，我们将稍后再细谈这两种方法 。当你能真正理解和掌握「色彩一致性」这一原理之后，毫无疑问你的设计水准也会跃升一个层次。
对比效果

将网页划分为色彩明显不同的内容有助于减轻用户的视觉疲劳和引导用户的注意力，这应当归功于色彩的对比效果。这一原理最为普遍的体现就是网页中经过精心设置的背景颜色和文字颜色，例如，在下面这张图中：

当你为网页中的配色而犹豫不决时，最佳的策略通常是选择一种较淡的色彩做背景色，选择一种较深的色彩做文字的颜色。网页设计是一个色彩可以决定生死的领域。在许多设计项目中，当文字占据了很大区域时，留给设计师自由发挥才华的空间其实并不多，因此遇到这种情况，我们应当以清晰简洁的风格为主。
对比效果除了能呈现给用户阅读体验更好的文本之外，还能将用户的视线引向网页中的特定内容。想想你读书时是怎样在教科书上标注重点内容的：遇到一页书中你特别想留意的内容时，你会想办法让这段内容看起来与其它任何一段都不同。同样的策略也适用于网页设计：在网页中运用一系列不同的色彩，可以将用户的目光锁定于特定的网页内容之上。
如果你的网站是黑色背景，吸引用户的方式莫过于将主要内容设置为稍亮一些的颜色。

即使在近似配色法（稍后会谈到）中也可以运用这个原理。

色调
我并不是在玩弄辞藻，在设计中，善用色调确实可以让你的作品传达出更为细腻微妙的感情。例如，暖色调的作品会让客户觉得你的作品更有活力，如果是在广告设计中，这种「感情唤起」的效果会更为显著。暗色调会给观看者舒适放松的感觉，他们可以借此调整思绪，想想别的事情。 CNN和Ars Technica网站中的色彩对比就是很好的例子：

CNN网站的上部使用了一条鲜亮的红色条幅，配合以网站的整体设计（该网站采用了红，白，黑三色为主的配色模式），令网站用户的精神为之一振。

Ars Technica网站的背景则使用了较暗的色调，以舒缓用户的注意力，并将他们的注意力引向网站的内容。暗色背景也凸显出前景中的技术性文章。更重要的是，亮色通常会激发观看者的脑能量，而该网站有意使用暗色背景，避免了用户的将脑力浪费于背景之上，使他们能更加集中精神去阅读以较亮的色彩显示的文字内容。

如何取得最佳配色效果?以下是三种被广泛使用的配色方法:三角对立法，复色配色法和近似配色法。

三角对立法

是指由色轮上不同位置的三种色彩组成的三角形。三角配色法是一种非常快捷的配色方式:
1.首先，在一个色轮上选取一种你想要的颜色，作为基准色。
2.以基准色为起点，在色轮上画一个等边三角形。

3.这个等边三角形的三个顶点所属的三种颜色即形成一个三角对立配色方案。

这个「等边三角形」的配色十分均衡，三种色彩和谐一致，相得益彰。

复色配色法 (又称分离互补配色法)

这种配色方案的基本原则是选择最具有互补性的颜色，即色轮上彼此相对的一组色彩。这种配色方案既能充分利用互补色所营造的独特视觉效果，也能给予设计师非常大的自由度。

近似色配色法

这种配色方案的基础是色轮上相互邻近但又彼此独立的一组色彩。一般来说区分这组色彩的主要依据是它们的不同色调及对比度。

这仅仅是开始......

我们这个时代的美好之处在于，我们可以坐享几个世纪以来色彩实践与理论的所有成果。即便是关于色彩的微小细节，前人也已经有详实丰富的论述。对于想深入了解色彩理论的读者，我真心地鼓励你们从不计其数的理论书籍中选择一本开始阅读。将来我也会发表更多关于色彩理论的文章来阐明一些相对而言比较艰深的概念。

至于现在，我们还是先来看一些能让你的设计更轻松的色彩工具吧:

有了它们，设计更有趣
我们应该感谢科技的进步，让我们能拥有这些把色彩选取变得如同游戏般轻松的工具，当然，前提是你得懂得如何使用它们。最重要的是,它们将进一步加深我们对色彩理论知识的理解。
有了这些软件的指引，我们可以更高效地学习如何将学到的色彩理论运用到我们的设计中，即使结果并不完美，我们也不会深感沮丧了，因为可以随时重来。你不妨把这些工具看作是设计中的「配色防护网」，你可以充分利用它们发挥你的创意而又不必担心因太过标新立异而失去客户。

Kuler

Kuler是一款由Adobe公司开发的软件，旨在为用户提供直观而快速的配色方案。用户可以编辑调色板上的任何一种色彩，也可以随意选择某种色彩作为基准色，只需轻点几下鼠标。用户可以保存和导出调色板，在该款软件的官网上也有不少用户贡献的配色方案可供选择。每种颜色都能察看导出代码（包括十六进制色彩代码）。但是这款软件的操作界面还有不尽如人意之处，例如，调整某种色彩的亮度时，有可能会影响到整个调色板（我希望软件能增加一项「锁定」功能，这样修改一种色彩时就不会改变其他颜色了）。总的来说,我向那些已经有一定的色彩理论基础又有耐心的人推荐这款软件。
Color Scheme Designer 3 (Paletton)

对于毫无色彩理论知识，缺少耐心或临近交稿期的设计师们，我极力推荐这款工具。Color Scheme Designer提供了一套非常简便易用的取色器，因此它的使用门槛可以说非常低，它有自己系统默认的配色原则，可以提供丰富的配色方案。它不会告诉用户为何某几种色彩最适宜搭配（在这方面Kuler的动态色轮功能显得更有优势），它只负责提供非常具有参考价值的结果。
它还有一些非常有用的高级功能，像调整整个调色板的饱和度和对比度，网站配色预览等等，我希望Kuler也能早日增加这些功能。但我不打算把它作为首选工具推荐给想学习色彩理论的设计师，它为用户代劳的东西太多了，以至于用户几乎无法根据基本的色彩原理去自行尝试配色。
除此之外，你当然还可以在其他网站寻找更多更优秀的配色工具，事实上，我自己就在不停地搜寻和测试新的软件。

案例研究:Gamers With Jobs

在这篇文章的最后，让我们用前面探讨过的一些原理来分析一个网站。Gamers with Jobs致力于通过自己的网站，播客和论坛为用户提供高质量的电脑游戏分析报告。

?灰色的网站背景与白色的内容界面形成对比，将用户的视线集中于网站的中心位置。
?横贯整个网站上部的黑色条幅（通常用来放置广告）为用户的视线设定了「边界」，目的在于把他们的注意力限定在网站内容上。
?橙红色的题头文字将网站的分类，文章标题，导航做了高亮显示。

?网站整体配色较为中性，在给予用户足够刺激（激发注意力）的同时，也给予用户足够的自由度，好让他们能自在地浏览和阅读网站的文字内容。

展望与总结

配色中最令人纠结的一个问题就是，很多时候在你将色彩放入自己的设计中之前，你都无法判断它们的使用效果。但是,一旦应用在设计中,它们的视觉效果如何通常就变得很明显了。有很多次，当我好不容易在Kuler中建好一套配色，准备在自己的设计作品中使用的时候，才忽然发现各种颜色搭配在一起，完全不是自己想要的样子。这曾给我很大的挫败感。
所以一定要相信理论!先按色彩理论原则来选取配色，然后再根据自己的需要调整。这样做会节省你很多的时间，在获得更为精致，优雅和规范的配色的同时，你的设计能力也会在不知不觉间提高!

小结
?色轮上彼此相对的两种色彩可为眼睛带来均衡的和谐感。
?高对比度的网页元素令文字更清晰易读，还能够引导用户的注意力。
?越明亮的色彩消耗的脑力就越多。。

?积极使用Kuler或Color Scheme Designer 3之类的工具软件有助你少走弯路，获得更快捷轻松的设计体验 。