色环

 

Robert Hess
2000年8月14日发布

上个月，本人提供了一些关于在 Web 站点上使用颜色和图像的介绍性信息。这个专栏讨论了一些基本技术方面的问题，如页面编码、.jpg 格式与 .gif 格式之间的不同以及其它一些对“程序员”来说可能已经很熟练的主题。但这些主题对于一位图形艺术家来说，则可能感到某些不习惯，因为图形艺术家总是习惯于全面地控制作品的色彩和构图。在这次的文章中，我打算稍微变换一下方向，讨论一下图形艺术家耳熟能详的颜色，而程序员在这方面可能要重温一下。事实上，我发现许多站点未能正确应用这些原理，由此可见有许多程序员需要对这些概念进行进一步的了解。

虽然本文的主要目标是讨论一种颜色与另一种颜色相互作用时的一些特性，但首先还需要讲一些初级知识，以使我们的起点相同。

颜色基础知识

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

图 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 站点上如何使用颜色。要查找一些可能的选择，请查看此动态示例（英文）。

---

该 MSDN Show（英文）由 Robert Hess主持。

Archived More or Hess 专栏

		2000 年
7月10日		让您的世界五彩缤纷（英文）
6月12日		真实太奇妙了：浏览器中有高速缓存（英文）
5月9日		事情的实质与外表（英文）
4月10日		避免"滥信商务"（英文）
3月13日		服务简史（英文）
2月14日		回到 Windows2000 的未来（英文）
1月10日		演变中的接口（英文）
		1999 年
12月13日		达到和超过极限（英文）
11月8日		安全有利也有弊（英文）
10月11日		普遍适用（英文）
9月13日		您可以使用的脚本（英文）
8月9日		进行更深层的 Web 连接（英文）
7月12日		上网去（英文）
6月14日		XML：逼近商业话题（英文）
4月12日		新的浏览器，新的特性，新的选择（英文）
3月30日		科技的未来发展（英文）
2月8日		是上网还是不上（英文）
1月11日		有关脚本的独家新闻（英文）
		1998 年
12月14日		Web应用程序轻率的一面（英文）
11月16日		使您的 Web 应用的实际效果与期望一样好（英文）
10月12日		应用程序的合手工具（英文）
8月17日		应用 Web（英文）
7月17日		正视它：我和你是一类吗？（英文）
6月17日		频道：焕然一新（英文）
5月20日		鼓足勇气，从简单作起（英文）
4月20日		常识与敏感（英文）
3月23日		您的 Web 观念是什么?（英文）
2月23日		安全之舞（英文）
1月26日		您的 HTML 兼容吗?（英文）
		1997 年
12月23日		带框格（英文）
11月25日		让我动起来（英文）
10月12日		崇拜我吧，我是个网站设计者（英文）
9月22日		样式：不那么容易（英文）
6月2日		为彼此而制作？让您的网站浏览器彼此兼容（英文）
5月1日		废除用户税（英文）
3月27日		Vulcan 文档（英文）
2月27日		丑陋的 Web（英文）

照片的商誉权属于：Sean Masterton/Microsoft Corporation

 

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=3215