网站配色文档格式.docx

网站配色文档格式.docx

《网站配色文档格式.docx》由会员分享，可在线阅读，更多相关《网站配色文档格式.docx（23页珍藏版）》请在冰豆网上搜索。

白等色，均不会对蓝色的性格构成较明显的影响力。

1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。

在绿色中，将黄色的扩张感和蓝色的

收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。

这样使得绿色的性格最为平

和、安稳。

是一种柔顺、恬静、潢足、优美的色。

1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。

紫色的低明度给人一种沉闷、神秘

的感觉。

1、在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

2、在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

3、在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的

魅力。

六、白色的色感光明，性格朴实、纯洁、快乐。

白色具有圣洁的不容侵犯性。

如

果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

3、在白色中混入少量的蓝，给人感觉清冷、洁净。

4、在白色中混入少量的橙，有一种干燥的气氛。

5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉

6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香

颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。

但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。

除了学习各种色彩理论和方法之外，笔者认为多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。

所以，笔者总结了一些著名网站的颜色搭配方法，这些方法可以让我们的学习少走弯路，快速提高我们的网页制作水平。

一、网页颜色原理和象征意义

我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。

不同的颜色有着不同的含义，给人各种丰富的感觉和联想。

红色：

热情、奔放、喜悦、庄严

黄色：

高贵、富有、灿烂、活泼

黑色：

严肃、夜晚、沉着

白色：

纯洁、简单、洁净

蓝色：

天空、清爽、科技

绿色：

植物、生命、生机

灰色：

庄重、沉稳

紫色：

浪漫、富贵

棕色：

大地、厚朴

二、网页颜色的使用风格

不同的网站有着自己不同的风格，也有着自己不同的颜色。

网站使用颜色大概分为几种类型：

1、公司色

在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。

比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。

再比如国富投资公司的主色调是C：

100%，M：

60%，Y：

0%，K：

0%。

这样的颜色使用到网站上显得色调自然、底蕴深厚。

2、风格色

许多网站使用颜色秉承的是公司的风格。

比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。

女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。

3、习惯色

这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。

每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。

三、设计用色十例

以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。

1）这是个大型的NBA网站。

通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。

这样的配色可以显示独特的个性，又不失大型网站的风采。

2）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。

这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。

3）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。

他的每一个网页都是制作的样板。

从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。

背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），

4）现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。

虽然简单，但颜色搭配非常的科学合理。

5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。

主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。

6）橘红色如果运用得当的话是一种非常使用于网页上的颜色。

下面的这个网站就是一个非常著名的例子。

他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。

字体使用黑色RGB为（0，0，0）。

此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。

7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。

下面的这个网站就是使用红色比较好的网站。

我们来看看他的颜色搭配。

他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。

8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。

他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。

这样的搭配显得风格独特，颜色和谐而庄重。

9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。

他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。

如此简单，但是却栩栩如生，跃然网上。

10）下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。

目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。

下面的这个网站远远的超过了三种颜色，但是她并不失美丽。

因此重要的还是色彩的驾驭能力。

下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。

一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。

红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

　　1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

　　2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

　　3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

　　4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。

黄色是各种色彩中，最为娇气的一种色。

只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

　　1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。

其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

　　2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

　　3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。

　　4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

三、蓝色的色感较冷，性格朴实而内向，是一种有助于人头脑冷静的颜色。

蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。

蓝色还是一种在淡化后仍然似能保持较强个性的色。

如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

　　1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

　　2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。

在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。

这样使得绿色的性格最为平和、安稳。

　　1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

　　2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

　　3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。

紫色的低明度给人一种沉闷、神秘的感觉。

　　1、在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

　　2、在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

　　3、在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

六、白色的色感光明，性格朴实、纯洁、快乐。

如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

　　1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

　　2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

　　3、在白色中混入少量的蓝，给人感觉清冷、洁净。

　　4、在白色中混入少量的橙，有一种干燥的气氛。

　　5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。

　　6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香。

对比色、互补色配色方法

1、面积控制法

当对比色或互补色配色时，可以选择其中之一的颜色为大面积，构成主调色，而另一颜色为小面积作为对比色，凭经验来讲作为大面积的主调色要在空间上占到70%以上，而另一小面积的对比色占到30%以下，这时配色就形成明确的色相基调，比如绿调子、红调子、紫调子的，形成明确基调的配色具有强烈的色彩表情和美感。

2、利用黑、白、灰、金、银作为调节色

在鲜艳的对比色或互补色之间穿插黑、白、灰这些无彩的颜色或金、银等特殊光泽色，使原本对立的色相形成“缓冲带”，使之可以和平共处在一个颜色环境里。

这些调节色的加入既起到色彩调和的作用，同时还可以增强对比色和互补色的鲜艳度，使配色更加鲜明、生动。

3、统调法

明度统调法：

使用对比色或互补色时，我们可以选择明暗相似的对比或互补的颜色构成配色，比如：

明亮的红色（粉色）与明亮的绿色（粉绿）相配，深暗的红色与深暗的绿色相配，这样的颜色效果丰富而柔和。

纯度统调法：

还可以选择纯度相似的对比或互补的颜色构成配色，比如：

纯度低的红色（土红或砖红）与纯度低的绿色（橄榄绿或灰绿）相配，这样的颜色效果富于变化，又充满韵味。

4、削弱法

削弱法与统调法正好相反，统调法是通过寻求对立色相的明度与纯度的相似，取得色彩的和谐。

而削弱法恰好相反，它是通过加大对立色相明度或纯度的距离，起到减弱矛盾、冲突的作用，增强画面的成熟感和调和感。

比如灰蓝的背景与鲜艳的橙色相配，如粉红和墨绿的搭配，这种配色稳重而不失活泼，朴素而不失秀美。

对比色：

红---绿

黄---紫

蓝---橙

以上三组颜色既是对比色又是互补色，在色彩画中的应用十分广泛，在这三组色的应用中需要注意的是不能用过纯的,颜色去作画（不加以调和的对比色），否则画面会出现“火”的现象，即平时人们所说的“大红大绿”----特别俗气。

漂亮的颜色是在灰色调之中的微妙变化和对比，对比色应该统一在一个画面的整体色调中，所有的对比运用都不能超过整体。

即在整体之中求变化（画面的统一性）。

黄+蓝=绿

红+蓝=紫

红+黄=橙

红+蓝+黄=黑（灰）

白色和黑色都是灰色，白色是灰色之中较纯较亮的颜色，而黑色则是较暗的较脏的灰色

图案的色彩总结起来有以下两个特点：

第一，用色有一定的限量。

这不仅因为装饰本身需要高度的归纳与提炼，要用有限的色彩表现丰富的物象，更因为在现实生活中，图案设计要与不同的生产工艺相结台，受成本与工艺因素的限制，用色也不宜太多。

第二，设色有较高的自由度。

这是指图案的色彩可以根据装饰需要任意设定，完全不必考虑真实的自然色彩，红花绿叶可以画成紫花蓝叶，碧水蓝天可以绘成玄水橙天。

夸张的色彩对比变化和迷人的色调处理，是图案色彩的魅力所在。

基于图案色彩的这两个特点，我们首先应了解一些色彩的基本知识，再结合实践训练掌握图案色彩的配色规律。

一）色彩的基本特性

自然界中的色彩是千变万化的，色彩的变化主要由色彩的三个要素——色相、明度、纯度及心理要素——色性来决定。

1、色相

色相即色彩的相貌，是一个颜色区别于其他颜色的特征。

色相分为有彩色系和无彩色系，无彩色即黑、灰、白系列，是没有纯度的颜色。

一般来说，有彩色12色相环中的各色都有较明确的色相，它们由红、黄、蓝三原色产生间色橙、绿、紫，再由原色、间色产生复色。

12色相环继而可产生24、48等色相环，它们均有很鲜明的色彩倾向，可称它们为纯色。

纯色产生的明度和纯度的变化，构成了丰富的色彩变化

2、明度

明度是指色彩的明暗或深浅。

纯色本身就有明度变化，从12色相环图中我们可以看到，黄色明度最高，紫色明度最低，其他颜色则依次形成明度的过渡转化。

此外，在无彩色系中，白色明度最高，黑色明度最低，黑与白之间有明度渐变的灰色系列。

要提高一个颜色的明度，可适量加入白色；

要降低一个颜色的明度，可适量加入黑色，但在加白或加黑的同时，颜色的纯度也会降低。

明度色标是我们认识和区别色彩明度的重要工具。

一般情况下，人们把明度低于3度的颜色叫暗色，明度高于7度的颜色叫明色，3度和7度之间的色叫中明色。

3、纯度

纯度是指色彩的鲜艳度或饱和度，也叫彩度。

从理论上讲，三原色纯度最高，间色次之，复色、再复色则纯度逐渐降低。

但无论怎样，色相环上的颜色仍有较高的纯度。

当一个纯色加入黑、白、灰或补色（色相环上相对180。

的两个颜色）时，其纯度就会降低，纯度降低到一定程度，颜色就会失去其明确的色相。

就好比在现实生活中，许多物象我们很难说清它的色相，只好说它们偏红或偏绿等。

所以说，纯度越高．颜色的色相倾向越明确，纯度越低颜色的色相倾向越弱，当颜色纯度降至为零时，就成为无彩色灰色

在这个纯度色谱中，接近纯色的色叫高纯度色，接近灰色的色叫低纯度色，处于中间状态的叫中纯度色。

4、色性

色性是指色彩的冷暖倾向、冷暖感觉。

色性是由人对现实生活中不同事物颜色的感受而产生的一种感官经验联想，如：

由红黄色联想到火焰、血液而产生温暖感，由蓝紫色联想到冰雪、大海而产生寒冷感等。

所以说色性是人的一种主观心理要素。

色彩的冷暖也是相对而言的，在两极之间冷暖色的过渡渐变显示了不同色相的冷暖关系。

任何一个颜色的冷暧感觉是由周围色彩的对比决定的，如绿色与黄色相比偏冷，与红色相比更冷，而与蓝色相比它又偏暧。

在同类色相中，如黄色，柠檬黄要比中黄冷，橙黄则比中黄暖。

一个度较低的颜色，与暖色相比它可能偏玲，与冷色相比它可能偏暖。

所以说色彩的冷暖是相对的，一个颜色会随周围色彩环境的变化而转变自身的冷暧性质。

此外．一个颜色加白后会变冷，加黑后会偏暖。

总之，色彩需要比较．要获得一个颜色理想的明度、纯度和色性，只有把颜色摆在一起进行比较和调整，才能达到我们所设想的效果。

二）图案色彩的配置

图案的色彩强调归纳性、统一性和夸张性，尤其注重对整体色调的设定。

如何搭配好整幅图案的颜色?

我们可以从以下几方面探寻规律并进行练习。

1、图案基本色调的设定

图案的色调是指一幅画面总的色彩倾向。

色调可以是亮色调或暗色调，鲜艳色调或含灰色调，也可以是冷色调或暖色调，或是有某一色相倾向的色调，如：

红色调、绿色高、黄色调等。

每一种色调中的颜色均可以有色相、明度、纯度及色性的变化，使色彩更加丰富。

在调配一幅图案的颜色之前，首先要对图案的色调有一个总体的构想，确定大的色彩基调，具体的颜色搭配都应与基调的构想相符与呼应。

颜色的面积比例关系对色调起着至关重要的影响。

2、调和色的配置

调和色包括同类色和邻近色，这类色彩的色相差别小，对比弱．比较容易达到和谐的习果。

我们把色相接近的那些色（色相环中相距30度左右的色）称为同类色；

色相差别适中的那些色（色相环中相距50度左右的色）称为邻近色。

（1）同类色

一般指单一色相系列的颜色，如：

黄色系，蓝绿色系等。

同类色因色相纯，效果一般极为协调、柔和，但也容易使画面显得平淡、单调。

同类色在运用时应注意追求对比和变化，可加大颜色明度和纯度的对比．使画面丰富起来。

以24色相环来划分。

色相环中相距45度角，或者彼此相隔二三个数位的两色，为同类色关系，属于弱对比效果的色组。

同类色色相主调十分明确，是极为协调、单纯的色调。

它能起到色调调和、统一，又有微妙变化的作用。

蓝绿色系

（2）邻近色

指色相环上90~以内的颜色，如：

黄色与绿色，蓝色与紫色等。

邻近色因相相距较近．也容易达到调和．而且色彩的变化要比同类色丰富。

邻近色在运用时，同样应注意加强色彩明度和纯度的对比，使临近色的变化范围更宽更广。

色相环中相距90度角，为邻近色关系，属于对比效果的色组，色相间色彩的倾向近似，色调统一和谐、感情特性一致。

类似色较同类色显得安定、稳重的同时又不失活力，是一种恰到好处的配色类型。

对比：

同类色-类似色-对比色-互补色

3、对比色的配置

对比色是指色相环上的120'

’以外的颜色．其中处于180'

相对应的两色叫补色，对比最为强烈。

对比色的效果活泼、刺激，变化丰富，在应用时要注意色彩的调和与统一。

配置对色可以采用以下的手法使画面协调。

色相环中相距135度角，或者彼此相隔‘八九个数位的两色，为对比色关系，属于强对比效果的色组，色相感鲜明，各色相互排斥，既活泼又旺盛。

配色时，可以通过处理主色与次色的关系达到调和。

在24色色相环中彼此相隔十二个位数或者相距180度角的两个色相，为互补色关系。

互补色组合的色组是对比最强的色组，使人的视觉产生刺激性、不安定性的感觉。

配色时通过主色相与次色相的面积大小，或者分散形态的方法来缓和过于激烈的对比。

（1）降低纯度

对比色在颜色纯度较高时对比比较强烈，如果将对比色一方或几方纯度降低，比如加人灰色或将对比色彼此少量互调，可使色彩变得含蓄、温和，达到既变化丰富又和谐统一的效果。

（2）面积的调整

对比色在面积较大而均等时往往对比最为强烈，如果将一种对比色作主色，大面积使用，其他对比色为辅色，少面积点缀，可以使对比减弱，达到统一。

也可以将对比色分割成较细小的面积并置使用，类似空混的手法，使色彩远看能混合成一体，从而达到统一

（3）无彩色的调和

在对比色配置中运用黑、白、灰、金、银等光彩色,将对比色间隔开，是使对比色达到协调统一的极有效的手法。

（4）色彩系列化过渡

按照色相环的顺序，选择两个对比色之间的系列色相与对比色同时使用，如在使用橙色与蓝色的同时，使用黄橙、黄、黄绿、绿、蓝绿等色，并将它们秩序化排列，使对比色产生一种渐变的效果，达到和谐统一。

4、其他艺术作品色彩的提取配置

图案的色彩也可以借鉴绘画、摄影、民间美术、工艺美术品等其他类型的艺术作品的颜色搭配。

因为这些艺术作品本身已有比较完整的构思和比较理想的色彩效果，特别是现代风格的绘画作品及民间工艺品的色彩更具有较高的概括性和装饰性。

可以直接仿照，但应往意造型上要有较大区别，以避免画面效果过于相似。

借鉴摄影及写实绘画作品的色彩要注意归纳、提炼，因为这类作品往往颜色变化较多，过于细腻、微妙，不符台图案的色彩要求。

在借鉴及运用其他类艺术作品的色彩时，同样要注意局部颜色与整体色调的比例关系，颜色的穿插及位置的安排均要仔细推敲，方能恰到好处。

5、自然色彩的提取配置

大自然中|年多事物本身就有很好的色彩搭配，如：

花卉昆虫、飞禽走兽、石头草木及海洋生物等，它们美妙的颜色配置是我们主观无法设想出来的，为图案的颜色设计提供了很直观的参照。

我们在平时要注意观察生活．经常到大自然中去收集各种类型的色彩组合素材，将它们记录下来。

许多自然物的颜色配置是可以直接提取使用的，在运用中，除了要保持颜色的色相、明度及纯度关系相对准确之外，尤其要注意各颜色的面积比例关系和位置关系，这是保持自然色彩原有整体感觉无大偏差的重要因素，如果忽视这一因素，将颜色的比例关系搞错，如将某种颜色面积使用过大或过小，或将某种特有的颜色位置关系打乱，就会改变色彩原有的色调，无法达到我们所期望的色彩效果。

三）图案颜料的调配方法

绘制图案的颜料工具很多．在这里我们仅介绍一下最常用的并适合于课堂练习使用的工具颜料。

1、常用的图案颜料及其特性

常用的图案颜料主要有水粉颜料和水彩颜料，其中以水粉颜料使用最多。

（1）水粉颜料

也叫水粉色、广告色，有铅袋装和瓶装两种．瓶装广告色又有普通型和浓缩型（也叫图案色）。

一般浓缩型的广告色更加细腻、纯净，比较好用。

水粉颜料调配方便，覆盖力强，可薄可厚，可干可湿，既能大面积平涂，又可以进行细致描绘，修改容易，所以是图案绘制最基本、最普遍使用的颜料。

（2）水彩颜料