§ ITPOW >> 文档 >> CSS

作者： 来源： 日期：2005-1-5

　　随着因特网的发展与普及，越来越多的企业和个人都把与其相关的信息组织成五彩缤纷的网页，用于在网络上进行展示以达到信息交流的目的。 

　　关于网页的制作技术，无论是Frontpage，Dreamwaver，Fireworks，还是Asp，Javascript，相信你都已经游刃有余。但在网页的设计过程中，你是否有过为了几种色彩的巧妙搭配而一筹莫展呢！ 

　　网页色彩的完美搭配，对于一个图形艺术设计师来说，那简直就是小菜一碟。但对于一个既想拥有自己的完美页面而又没有专业美术功底的普 
通大众来讲，那可就不是一件简单的事情了。 

　　本文从“色环”的研究角度出发，就网页设计中如何利用色彩搭配的原则问题进行探讨，相信你看了此文之后，对你的网页设计能起到一定的帮助作用。 

● 基本色 

　　我们知道可以把一条连续彩虹中的“可视光”分解成从蓝到红的色谱。 
 

　　我们也看到，或许应用过，通过把两种或两种以上的颜色混合在一起，就可以得到一种特殊的颜色。从本质上讲，色环就是色谱可以看到的颜色所形成的线性连续环。

　　一个色环通常包括12种明显不同的颜色。而对于艺术设计师充分理解的色环和色论的重要方面，也许不会被我们中的网页设计者们能够充分欣赏。缺少多这方面的了解，你将会把事情搞乱。


● 三原色

　　从定义上讲，三原色是能够按照一些数量规定合成其他任何一种颜色的基色。为了确定三原色，你必须首先确切明确哪一种颜色是你正在使用的中间色。在上小学时，你可能就知道了三原色：红、黄、蓝，并且你现在用于展示的，仍然是红、黄、蓝三原色。但是如果你有喷墨打印机的话，花点时间把它的盖子打开，看看它的墨盒。你能看到红、黄，蓝吗？不能！你可能看到的是四种墨色：蓝绿（青）色、红紫（洋红）色、黄色和黑色。颜色的不同是由于你的电脑用的是正色，而你的打印机用的是负色。显示器发出的是彩色光，而纸上的墨则吸收灯光发出的颜色。更进一步的解释就超出了本文要探讨的范围。 
　　除了发射与吸收光的不同之外，本文涉及的概念同样适用于正色和负色模式，出于本文的写作目的，我们仅探讨着正色模式的三原色：红、绿、蓝。

● 次色 

　　为了构造色环，我们将认识任两种相临基色通过合成得到的三种颜色，它们称作为“次色”：蓝绿（青）色、红紫（洋红）色和黄色。正色域中的“次色“同样可以作为负色域中的“原色”。由此你可以得出结论，正色中的次色就是负色中的原色。这是正色和负色模式之间的所有内部关系。

● 三色

　　最后我们可以找出色环中当前填充色之间的中间色。幸运地是，三色对于正色域和负色域来讲是没有什么区别的。现在我们已经定义出所使用的12点色环之后，就能够讨论颜色间的相互关系了。

● 近似色

　　近似色可以是我们给出的颜色之外的任何一种颜色。如果从橙色开始，并且你想要它的两种近似色，你应该选择红和黄。用近似色的颜色主题可以实现色彩的融洽与融合，与自然界中能看到的色彩接近起来。
 

● 补充色

　　正如我们所知道的相对色一样，补充色是色环中的直接位置相对的颜色。当你想使色彩强烈突出的话，选择对比色比较好。假如你正在组合一幅柠檬图片，用蓝色背景将使柠檬更加突出。 

● 分离补色

　　分离补色由两到三种颜色组成。你选择一种颜色，就会发现它的补色在色环的另一面。你可以使用补色那一边的一种或多种颜色。

● 组色

　　组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。上面所讲的基色和次色组可以被称作两组组色。

● 暖色

　　暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。

● 冷色

　　冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果，于是它们用作页面的背景比较好。
　　需要注明的是，你将发现在不同的书中，这些颜色组合有不同的名称。但是如果你能够理解这些基本原则，它们将对你的网页设计是十分有益的。

● 抽取对比 
　　对比是在两种临近色间被认识到的不同色彩。因为白色和黑色并不是真正的颜色，它们被说成是非色彩的对比。白和黑也表现出对比的最高水平。色环中的补色表现的是高色彩的对比。这就是当你增加压缩比后把图象中的白色和黑色信息减少所造成的.JPG压缩算法使彩色信息减少的原因。

　　当你使用一种单色，然后增加或降低亮度时，单色的对比就被提取出来了。

　　网页设计中的对比非常重要。并且有不同的应用方式，所有这些都基于上面所列的其他颜色。每个人都清楚的是，白底黑字看起来非常容易，这就是你所阅读的大部分印刷材料中为什么都是白底黑字的原因的一部分。同样地，黑底白字产生强烈对比，但是它阅读起来比较困难。因为黑色相对白色和其它的颜色来讲，看起来有一种沉重感和些许的压抑感。从图14所示的两种对比效果来看，相信你已经对对比色就有了进一步的体会。


　　类似的对比效果也同样发生在暖色和冷色之间。暖色有些微冲出荧屏的感觉，而冷色被认为有从荧屏后退的感觉。这就意味着暖色/暗色适合于文本，而冷色/亮色更适合于用作背景。但是，这样的方式不是十分固定的。让我们看看选择这两种对比色的一个简单例子。用一种（颜色）作为背景，用另一种（颜色）作为文本。 


　　你将注意到得到的结果是十分糟糕的。这两种颜色之间不能形成恰当的对比，它们看起来就象伸向你的拳头，明确地讲，它们不是一个好的结合。但是保持这基本相同的颜色不变，调整一下它们的亮度/暗度，使它们之间更一致一些。


　　在背景图象上添加文本，对比色的使用也许是最重要的。使用这些对比的概念，你需要记住的是，页面上的文本成分必须和背景图象上的所有颜色形成足够强烈的对比。例如，你仅使用了上面所描述的一套“组色”，就会有三种显然的对比色给页面造成的糟杂喧嚣感。 　


　　一种较好的方法是去使用一套分离补色，近似色作为背景，补色作为文本（色）。在这种方式下，背景色之间完全地融合在一起，不会招来人们特别明显的注意，并且能够使文字突出出来。


　　了解色彩理论，可以在你为你的站点选取一种主题颜色时起到作用。依赖于你需要的背景色，导航元素和不同的文本风格，你可以从色环中选用对比模式。那么使用一些比较安全的颜料图标，你可以容易地选取较暗较亮的颜色去增强你元素间的对比而达到一个适当的水平。有许多搭配适合于你的页面―提供一个好的色彩应用而不至于使你的用户头疼。

　　通过上面的讲述，你对网页设计中色彩的运用，应该有了一个较全面的了解。那你就马上开始行动吧，用你的双手与慧眼，把你的网站设计的更加靓丽多彩！