《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——2.3 网页色彩搭配知识

本节书摘来自异步社区《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》一书中的第2章，第2.3节，作者：何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 网页色彩搭配知识

色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。

2.3.1 网页色彩搭配的技巧
到底用什么色彩搭配好看呢？下面是网页色彩搭配的一些常见技巧。

• 运用相同色系色彩。所谓相同色系，是指几种色彩在360°色相环上位置十分相近，大约在45°或同一色彩不同明度的几种色彩。这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的借鉴作用，这种用色方式容易塑造网页和谐统一的氛围；缺点是容易造成页面的单调，因此往往利用在局部加入对比色来增加变化，如加入局部对比色彩的图片等。图2.15所示为运用相同色系色彩的网页。
• 使用邻近色。所谓邻近色，就是在色带上相邻近的颜色，如绿色和蓝色、红色和黄色等就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。邻近色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用邻近色能够使色彩搭配技术更上一层楼。
• 使用对比色。对比色可以突出重点，产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用，图2.16所示为运用对比色的网页。
  

  
  

  
  
  
  • 黑色的使用。黑色是一种特殊的颜色，如果使用恰当、设计合理，往往会产生很强烈的艺术效果，黑色一般用做背景色，与其他纯度色彩搭配使用。
  • 背景色的使用。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景要与文字的色彩对比强烈一些。图2.17所示为使用背景色的网页。
  • 色彩的数量。一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。
    

    
    

    2.3.2 网页要素色彩的搭配
    1．确定网站的主题色
    一个网站不可能单一的运用一种颜色，让人感觉单调、乏味，但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮、花哨。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。

    一个页面尽量不要超过3种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。另外要考虑哪种因素占主要地位，是明度、纯度还是色相。

    2．定义网页导航色彩
    网页导航是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构、网站的内容，都必须通过导航或页面中的一些小标题。所以可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站的清晰、明了、层次分明，想往哪里走都不会迷失方向。图2.18所示为色彩鲜明的网页导航色彩。
    

    
    
    

    3．定义网页链接色彩
    一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分。需要强调的是，如果是文字链接，链接的颜色不能跟其他文字的颜色一样。现代人的生活节奏相当快，不可能在寻找网站的链接上浪费太多的时间。设置了独特的链接颜色，让人感觉它的独特性，自然而然，好奇心会驱使用户移动鼠标单击链接。

    4．定义网页文字色彩
    如果一个网站使用了背景颜色，必须要考虑到背景颜色的用色与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或明度较低的色彩，文字用较为突出的亮色，让人一目了然。当然，有些网站为了让浏览者对网站留有深刻的印象，在背景上作了特别设计。例如，一个空白页的某一个部分用了很亮的一个大色块，给人以豁然开朗的感觉。此时设计者为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。

    5．定义网页标志和Banner的颜色
    网页标志是宣传网站最重要的部分之一，可以将LOGO和Banner做得鲜亮一些，也就是色彩方面要跟网页的主体色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。

    2.3.3 色彩的对比搭配
    网页中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩的总体趋向，称为色调，也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。

    在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。

    各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝3种颜色是最极端的色彩，它们之间对比，哪一种颜色也无法影响对方。色彩对比范畴不局限于红、黄、蓝这3种颜色，而是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。

    1．色相对比
    色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和，越接近补色，对比效果越强烈。

    2．明度对比
    明度对比是指因色彩之间明暗程度的差别而形成的对比，是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大，如柠檬黄的明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。

    3．纯度对比
    纯度对比是指因不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度这3种。未经调和的原色纯度是最高的，而中间色多属中纯度的色彩，复色其本身纯度偏低而属于低纯度的色彩范围。纯度的对比会使色彩的效果更明确和肯定。

    4．补色对比
    将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。

    5．冷暖对比
    冷暖对比是指因不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色系，蓝、绿、紫则代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白色反射高而感觉冷，黑色吸收率高而感觉暖。

    6．面积对比
    同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重，这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。