网页美工设计色彩基础.pdfVIP

网页美工设计色彩基础

我们都知道网页美工设计是一项重要并复杂的工作，我们的网页美

工设计不仅要兼顾网页的整体风格的设计还要兼顾图片的设计。下面是

小编为大家整理的网页美工设计色彩基础，欢迎参考~

 网页美工设计色彩基础色彩做为的第一视觉语言在任何设计

中都占据重要地位，网页制作必须深入理解和运用色彩，掌握进行色彩

选择和匹配的原则和方法。

 一、网页美工设计色彩的一些基本概念

 首先了解一下色彩的一些基本概念。自然界中有好多好多种色

彩，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的但是最基本的有

三种(红，黄，蓝)，其它的色彩都可以由这三种色彩调和而成。我们称

这三种色彩为“三原色”。

 现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩

色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：色相，

明度和纯度。其中非彩色只有明度属性。色相，指的是色彩的名称。

 这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要

的因素。比如说紫色，绿色，黄颜色等等都代表了不同的色相。同一色

相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿，暗绿，

草绿，亮绿。明度，也叫亮度，指的是色彩的明暗程度，明度越大，

色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让

人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏

类网站，充满神秘感;一些个人站长为了体现自身的个性，也可以运用

一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩

更容易调和。如紫色(#993399)跟黄颜色(#ffff00)，暗红(#cc3300)跟草绿

(#99cc00)，暗蓝(#0066cc)跟橙色(#ff9933)等。图1中的(1)就是明度由高

到低变化的例子。图1(1)明度变化(2)纯度变化纯度，指色彩的鲜艳

程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。如图1中

的(2)是纯度从低到高的变化。相近色：色环中相邻的三种颜色。如图

2中的黄绿色，黄颜色和桔黄颜色。相近色的搭配给人的视觉效果很舒

适，很自然。所以相近色在网站设计中极为常用。图2相近色图3

互补色互补色，色环中相对的两种色彩。如图3中的亮绿色跟紫色，

另外如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，

有时候是一种很好的搭配。就拿蓝色跟橙色来打个比方吧，看图6，调

整了蓝色的亮度以后其搭配效果是不是更好呢?补色在网站设计中用得

也极为普遍。图4补色亮度调节暖色，如图5中的黄颜色，橙色，

红色，紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。

暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体

现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。冷色，如图

6中的绿色，蓝色，蓝紫色等等都属于冷色系列。冷色一般跟白色调和

可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，

主要表达严肃，稳重等效果。色彩均衡，网页让人看上去舒适，协调，

除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部

分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是

设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所

占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒

适，不刺眼。这就是一种均衡的色彩搭配。

 二、色彩的联想

 色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人

联想到玫瑰，联想到喜庆，联想到兴奋。白色联想到纯洁，干净，简

洁;紫色象征着女性化，高雅，浪漫;蓝色象征高科技，稳重，理智;橙色

代表了欢快，甜美，收获;绿色代表了充满青春的活力，舒适，希望等

等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种

色彩可以代表不同的含义。

 三、黑白灰的运用

 黑白灰是万能色，可以跟任意一种色彩搭配。当你为某种色彩的

搭配苦恼的时候，不防试试用黑白灰。当你觉得两种色彩的搭配不协

调，试试加入黑色，或者灰色，或许会有意想不到的效果哦。对一些

明度较高的网站，配以黑色，可以适当地降低其明度。