网站设计中配色技巧

颜色基础知识



我们知道，人们视为“可见”的光可以分解为从蓝色到红色的一个渐进的彩虹光谱带。




图 1. 可见光谱

我们还见过（也许还用过）色环，色环显示如何通过混合两种或更多颜色来生成特定的颜色。色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。




图 2. 色环

色环通常包括 12 种不同的颜色（如图所示）。虽然画家对色环和颜色理论的重要方面已十分了解，但我们当中的一些程序员却可能不十分清楚，这种理解上的不足会把事情弄得一团糟。

基色



图 3. 基色

按照定义，基色是最基本的颜色，通过按一定的比例混合基色可以产生任何其它颜色。为了识别基色，首先需要确切知道使用的是何种媒介。您可能在小学里学到基色有红、黄、蓝，但现在我们大多是用红、绿、蓝作为基色进行颜色显示。我想这不足为奇。

但如果您使用彩色喷墨打印机，请打开机盖看看墨盒。是否看到了红、绿、蓝？没有。您可能看见有四种墨水：青色、品红色、黄色及黑色。颜色不同是因为计算机显示器使用加色，而打印机使用减色。显示器发射彩色光线，而纸张上的墨水则从它反射的光中吸收了某种颜色。有关此话题的更多论述将超出本文范围，但如想了解更多一点的信息，请访问下面两个链接：

加色合成（英文）， 由 Jim Scruggs 供稿




减色合成（英文）， 由 Jim Scruggs 供稿
除发射和吸收光线的不同外，本文讨论的概念适用于加色和减色两种模式—但根据我们的目的，我们将重点讨论加色模式，在这种模式中，基色为红、绿、蓝。

次生色



图 4. 次生色

为了建立色环，下面我们希望了解通过混合任何两种邻近的基色获得的三种颜色。这些颜色即次生色：青、品红和黄。咦，我们不是谈到过这三种颜色吗？是的，加色法中的次生色就是减色法中的基色。由此您可以推断出，减色法中的次生色也就是加色法中的基色。这就是加色模式和减色模式之间的相互关系。

三次色



图 5. 三次色

建立色环的最后一步是，再次找到现已填入色环的颜色之间的中间色。幸运的是，这些三次色对于加色法和减色法都是相同的。既然我们已经定义了在 12 点色环中使用的颜色，那么就可以讨论这些颜色之间的相互关系。

相似色



图 6. 相似色

相似色是指在给定颜色旁边的颜色。如果您以橙色开始并想得到它的两个相似色，就选定红色和黄色。使用相似色的配色方案可以提供颜色的协调和交融，类似于在自然界中所见到的那样。

互补色



图 7. 互补色

也称为对比色。互补色在色环上相互正对。如果希望更鲜明地突出某些颜色，则选择对比色是有用的。如果您在制作一幅柠檬的图片，使用蓝色的背景将使柠檬更突出。

分列的互补色



图 8. 分列的互补色

分列的互补色可由两种或三种颜色构成。选择一种颜色，在色环的另一边找到它的互补色，然后使用该互补色两边的一种或两种颜色。

三色组



图 9. 三色组

三色组是色环上等距离的任何三种颜色。在配色方案中使用三色组时，将给予观察者某种紧张感，这是因为这三种颜色均对比强烈。基色和次生色均是三色组。

暖色



图 10. 暖色

暖色由红色调构成，如红色、橙色和黄色。这种颜色选择给人以温暖、舒适、有活力的感觉。这些颜色产生的视觉效果使其更贴近观众，并在页面上更显突出。

冷色



图 11. 冷色

冷色来自于蓝色调，如蓝色、青色和绿色。这些颜色使配色方案显得稳定和清爽。它们看起来还有远离观众的效果，所以适于做页面背景。

请注意，您可能发现这些颜色组在不同的书籍中所指的内容并不相同，但只要理解了基本原理，它们就都可以理解。

这使我最终进入到我想讨论的主要概念，这就是对比。

利用对比



对比是两种相邻颜色之间感觉到的区别。由于白色和黑色不是真正的颜色，它们被说成是表现了非彩色的对比度。黑色和白色也表现了最强烈的对比。色环中的互补色表现出大的彩色对比度。人眼对非彩色的对比度比对彩色的对比度更敏感，这就是在您增加压缩系数时 .jpg 压缩算法先去除彩色信息而后再去除黑白信息的原因。




图 12. 黑色与白色：非彩色的对比条




图 13. 使用蓝色的单色对比条

当您使用一种颜色，然后增加或减少其亮度时，即建立起单色对比。

对比在 Web 设计中非常重要。使用对比有多种不同的方法，所有这些方法都基于上述的另一种颜色概念。每个人都明白，白色背景下的黑色文本最容易观看，这是您看到的大多数印刷材料都是白背景下的黑色文本的部分原因。同样地，黑底白字的对比度也很强，但阅读起来比较困难，因为黑色给人感觉比白色沉重，有鉴于此，请尽量少用。




图 14. 高对比度颜色组合

暖色和冷色产生同样的效果。暖色给人略微突出屏幕的感觉，而冷色则显得凹进屏幕。这意味着暖色/黑色最适合作为文本，而冷色/白色最适合作为背景。然而，这种方法也不是一成不变的。下面我们来看一个简单的例子，其中选择了两个对比色，使用一个作为背景而另一个作为文本。




图 15. 互补色组合

您会注意到效果非常差。这两种颜色对比不鲜明，它们几乎渗透在一起。这显然不是个好的组合。还是保持颜色基本相同，而调整其亮度/暗度，使它们区分得更明显。




图 16. 修改后的颜色组合

可以看到这是一个好得多的组合，它表明在考虑对比度时有一点很重要：不仅仅要在分析的意义上考虑，还要从视觉的角度考虑。

这些颜色和对比的应用对于在背景图像上叠加文本也许是最重要的。使用这些对比概念时，必须切记，页面上的文本部分必须与背景图像中的所有颜色足以形成强烈的对比。例如，如果简单地使用上述的一套三色组，您就能使这三种互相对比的颜色在页面上争奇斗艳。




图 17. 三色组组合；背景图像上的文本

一种更好的方法是使用一套分列的互补色，使用相似色作为背景，而文本使用互补色。这样，背景颜色将适当地融合到一起而不致引起对它们本身明显的注意，而文本将显得突出。




图 18. 分列的互补色组合；在背景图像上的文本

懂得颜色理论在您为网站选择颜色基调时也会发生作用。根据您对背景颜色、导航组件和不同文本风格的需要，您可以从色环中选择出高对比度的图案。然后，使用类似于我的安全调色板计算表（英文）的某种工具，就可以轻松地选择较暗的/较亮的颜色，将元素之间的对比增加到适当的水平。有许多组合适合于您的页面，它们使色彩得到激动人心的使用，而不致让用户头疼。所以，把那些止痛片放到一边去吧，还是多花一点时间考虑一下在 Web 站点上如何使用颜色。

原文转自：http://www.ltesting.net