本节书摘来自异步社区《网站设计 开发 维护 推广 从入门到精通》一书中的第2章，第2.1节，作者： 何新起 , 娄彦杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章　网站页面配色和创意

人类的视觉对于色彩最为敏感。网页色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，即网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些色彩强烈的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。

学习目标

• 色彩基础知识
• 网页色彩搭配

2.1 色彩基础知识

色彩的魅力是无限的，它可以让本来很平淡无味的东西变得漂亮、美丽。随着信息时代的快速到来，网页也开始变得多姿多彩。人们不再局限于简单的文字与图片，而是要求网页看上去漂亮、舒适。所以网页设计师不仅要掌握基本的网站制作技术，还需要掌握网站的风格、配色等设计艺术。

2.1.1 色彩的基本概念
为了能更好地应用色彩来设计网页，先来了解一下色彩的基本概念。自然界中色彩五颜六色、千变万化，但是最基本的只有三种（红、黄、蓝），其他的色彩都可以由这三种色彩调和而成，这三种色彩称为“三原色”。平时所看到的白色光，经过分析在色带上可以看到它包括红、橙、黄、绿、青、蓝、紫七色，各颜色间自然过渡，其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。

无论是平面设计，还是网页设计，色彩永远是非常重要的一环。当距离显示器较远的时候，人们首先看到的不是优美的版式或者美丽的图片，而是网页的色彩。如图 2-1 所示，远距离看网页看到的是网页的色彩。

在网页设计时应注意以下几个原则。

• 用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

• 用两种色彩：先选定一种色彩，然后选择它的对比色。
  

  
  

  • 用一个色系：简单地说就是用一个感觉的色彩。
  • 不要将所有颜色都用到，尽量控制在3～5种色彩。
  • 背景和前文的对比尽量要大，以便突出主要文字内容，绝对不要用花纹繁复的图案作背景。

  2.1.2 常见色彩表达的意义
  现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列，其他的色彩都属于彩色。任何一种彩色都具备三个属性：色相、明度和纯度。其中非彩色只有明度属性。

  • 色相：指的是色彩的名称，这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。如紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度，就变得很容易搭配，如深绿、暗绿、草绿。
  • 明度：也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。如一些购物、儿童类网站，多用一些鲜亮的颜色，让人感觉绚丽多姿、生气勃勃。图 2-2 所示是色彩鲜明的购物网站。
  
  
  
  • 纯度：指色彩的鲜艳程度，纯度高的色彩鲜亮，纯度低的色彩暗淡，含灰色。
  • 相近色：色环中相邻的三种颜色。相近色的搭配给人的视觉效果很舒适自然，所以相近色在网站设计中极为常用。
  • 互补色：色环中相对的两种色彩。
  • 暖色：暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站、电子商务网站、儿童类网站等，用以体现商品的琳琅满目，儿童类网站的活泼、温馨等效果。图2-3所示的页面有一种温馨的感觉。
  
  
  
  • 冷色：冷色一般情况下跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站，主要表现严肃、稳重等效果。绿色、蓝色、蓝紫色等都属于冷色系列，如图2-4所示。
  
  
  
  • 色彩均衡：网站让人看上去舒适、协调，除了文字、图片等内容的合理排版，色彩的均衡也是相当重要的部分。一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置、每种色彩所占的比例、面积，等等。比如鲜艳明亮的色彩面积应小一点，这样会让人感觉舒适、不刺眼，这就是一种均衡的色彩搭配。图2-5所示的是色彩均衡的网站。
  
  
  
  
  对于网页来说，创建完美的色彩是至关重要的。颜色是一个强有力的、高刺激性的设计元素，用好了往往能收到事半功倍的效果。颜色能激发人的感情，完美的色彩可以使网页充满活力，能向访问者表达准确的信息。当色彩运用得不适当的时候，表达的意思就不完整，甚至可能表达出一种错觉。