网站设计中如何做好颜色搭配?

  不管你现在是一个什么样的设计师,颜色的选择是任何一个设计师行业都需要的。尤其是作为网站设计师,没有做好颜色的搭配的网站,看上去就是一个死气沉沉的网站,这样的网站设计是不会被用户们欣赏。要想做好网站设计,那么就需要学习好颜色搭配功底,下面重庆网站设计师分享关于颜色搭配技巧。

  颜色、亮色、暗色

  颜色,或色调,一般被划分为原色、间色、复色。原色包括红色、黄色和蓝色,它们被称为三原色,这是因为其它颜色不能调配出这三种颜色。在将三原色转换为 Web 颜色时,你可以将它们表示为十六进制的颜色代码,分别为 #ff0000,#ffff00 和 #0033cc。

  间色指红、黄、蓝三原色中的某二种原色相互混合的颜色,包括:

  红 + 黄 = 橙色(#ff9900)

  黄 + 蓝 = 绿色(#00cc00)

  蓝 + 红 = 紫色(#660099)

  复色由间色混合调配而成,它们位于上图色环中所示的原色和间色之间。尽管 Web 颜色与“画家”通常使用的颜色并不相同,但手头有一个色轮(色轮如图2所示),还是有助于你学习各种配色方案。此外,色轮还显示所有的亮色(tint)、灰色调(tone)和暗色(shade),这样你就可以认识到各种可能的颜色组合和搭配。以下列出了需要学习的几个重要术语:

  亮色(Tint):加入白色时显示出的颜色

  灰色调(Tone):加入灰色时显示出的颜色

  暗色(Shade):加入黑色时显示出的颜色

  

网站设计中如何做好颜色搭配?

  图1:色轮实样

  下面为图2中箭头所指的色带的说明:

  最外层色带:黄色和橙色调配而成的复色

  第二色带:该复色的亮色(加入白色)

  第三色带:颜色的灰色调(加入灰色)

  最内层色带:字轮上的暗色(加入黑色)

  正如你们从以上的色轮中看到的那样,向一种颜色加入的白色、灰色和黑色的数量是很小的,够改变初始颜色和创建出所谓“单色方案”即已足够。

  单色方案

  配色方案已通行很久了,因此没有必要再重新设计一个色轮。尽管 Web 颜色与印刷颜色并不相同,但概念是一样的。你只是把颜色名称转换为 16进制的颜色代码,并使它们尽可能地完全匹配。我建议你们使用一个在线工具,即 ColorScheme Generator II(配色方案生成器II,如图3所示),它不仅可以帮助你迅速和容易地确定配色方案,甚至还可以帮助你确定你选定的颜色是否为视力差或是色盲的用户提供了足够的对比度。

  

网站设计中如何做好颜色搭配?

  图2:配色方案生成器

  如果你在确定你选定的颜色是否提供了足够的对比度时需要更多的帮助,可以使用我们 Paciello 小组提供的 Contrast Analyser(对比度分析器)。这个工具可检查前景颜色和背景颜色之间的对比度。

  为了实现在颜色生成器中生成黄橙色的亮色、灰色调和暗色,您要首先选择上图中箭头所指的颜色,然后选择色轮下方面板上的 Mono(单色)和图右盒子下方面板上的 Default(默认),并在右底部的下拉式菜单中选择 Normal Vision(正常视觉)选项。除非你是一个纯粹主义者,不要在颜色盒上方的“reduce to ‘safe’ colours”(降至‘安全’颜色)方框中打勾。

  备注:“Web 安全颜色”这个术语,产生于显示器刚可以显示 256色的那个时期,在 256色中,只有 216个颜色在 Windows/Mac/Unix 平台上都是一样的,因此就出现了“Web 安全颜色”这个名称。尽管一些纯粹主义者依然坚持使用“Web 安全调色板”,但现代的浏览器已经能够处理所谓“24位色”。每个通道有 10至 11位的 24位色,实际上已能生成 16,777,216 种不同的颜色。换言之,我们已经可以有把握地说已不再需要“Web 安全调色板”了。

  让我们再回头来看单色方案。遵照以上所描述的步骤,生成的颜色结果如下:黄橙色(#FFCC00)、亮色(#FFF2BF)、灰色调(#FFE680)、暗色(#B38F00)。与试图通过将一个有形的色轮与一个 Web 浏览器的背光屏幕相匹配而做出的任何猜测相比,这些 16进制的数字的可靠度要高得多。同时,就像“Mono”(单色)所建议的,将这个方案转化为一个单色方案,如图4所示。

  

网站设计中如何做好颜色搭配?

  图3:一个单色方案

  一个单色方案等同于一种颜色,及其所有的亮色、灰色调和暗色。尽管这个配色方案是最容易使用的,但很多网页设计师在进行网页设计时,都不是很喜欢这种配色方案。因此,你可能希望学习其它的配色方案,为网页中的链接、图像和横幅广告添姿增彩。

  互补色方案

  下面我们学习互补色方案,即通过直接搭配色轮中相对的颜色,如图5所示。

  

网站设计中如何做好颜色搭配?

  图4:互补色方案的示例

  当你选定一种颜色及其互补色时,你同时也选定了与这两种颜色相关的亮色、灰色调和暗色。这提供了更广的颜色选择范围,通过在线颜色工具可以很好地转化为互补色方案,如图6所示。

  

网站设计中如何做好颜色搭配?

  图5:在线颜色工具生成的一个互补色方案

  在上图中,我选择了橙色及其互补色蓝色。为生成这个配色方案,我选择的设置包括:色轮左下的Contrast(对比色)设置,生成器下方菜单中的 default(默认)设置,以及 normal vision(正常视觉)设置。请注意,所选定的主色在色轮的内盘上以一个黑色圆点标示(在上图中和生成器站点上都是这样标示的),生成器自动为你选出该主色的互补色,以内轮缘上的一个空心圆标示。有了这些标示符号,你就可以更容易地分析你的配色方案。

  这个颜色生成器让你可以容易地为链接、访问过的链接,甚至是图像选择颜色,因为它在右上角为你提供了颜色的十六进制代码。你可以混合和搭配任何纯色(顶部列出的颜色)及其亮色、灰色调或暗色,大大有助于你选择一个很好的配色方案。

  颜色搭配不仅仅只要这些,现在的网站设计中颜色搭配技巧相当重要,因此要学好网站设计颜色搭配。搭配还需要很多技巧,下次精彩呈现给大家!