网页色彩的搭配:色彩技巧

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?
首先我们先来了解一些色彩的基本知识:

1.颜色是因为光的折射而产生的。

2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。
网页制作用彩色还是非彩色好呢?

根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。

我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。

●非彩色的搭配

黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

●彩色的搭配
色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。
(如下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 || || || |___| | | | | 暖色系 中性系 寒色系 中性系 二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感

红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩

白色---具有洁白,明快,纯真,清洁的感受。

黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

●网页色彩搭配的原理

1.色彩的鲜明性。 网页 的色彩要鲜艳,容易引人注目。

2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程
随着网页制作经验的积累,我们用色有这样的一个趋势:

单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

○ 网页 色彩搭配的技巧
文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师

1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。 在网页配色中,忌讳的是:
1.不要将所有颜色都用到,尽量控制在三种色彩以内。
2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

网页配色方案

网页配色方案
配色方案一(紫色):
版面表格边框颜色 #983498
版面标题表格颜色 #d890d8
版面内容表格颜色1 #f8dcf8
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #fff0ff
版面标题表格字体颜色 #602060
版面内容表格字体颜色 #602060
提醒语句颜色 #602060

配色方案二(粉色):
版面表格边框颜色 #f00078
版面标题表格颜色 #ff98do
版面内容表格颜色1 #ffe8f0
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #fff6fc
版面标题表格字体颜色 #602060
版面内容表格字体颜色 #602060
提醒语句颜色 #602060

配色方案三(果绿色):
版面表格边框颜色 #507010
版面标题表格颜色 #a0dc40
版面内容表格颜色1 #e8f8d0
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #f8fcf0
版面标题表格字体颜色 #003300
版面内容表格字体颜色 #003300
提醒语句颜色 #309478

配色方案四(深绿色):
版面表格边框颜色 #288058
版面标题表格颜色 #88d8b0
版面内容表格颜色1 #e0f4e8
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #f0f8f0
版面标题表格字体颜色 #205838
版面内容表格字体颜色 #205838
提醒语句颜色 #287048

配色方案五(金黄色):
版面表格边框颜色 #co7800
版面标题表格颜色 #ffc562
版面内容表格颜色1 #ffeed0
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #Fffaf0
版面标题表格字体颜色 #754900
版面内容表格字体颜色 #754900
提醒语句颜色 #8c5800

配色方案六(湖蓝色):
版面表格边框颜色 #007ca6
版面标题表格颜色 #15b9ff
版面内容表格颜色1 #cef3ff
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #ecfbff
版面标题表格字体颜色 #00637b
版面内容表格字体颜色 #00637b
提醒语句颜色 #007a99

配色方案七(宝石蓝色):
版面表格边框颜色 #002cae
版面标题表格颜色 #7d9aff
版面内容表格颜色1 #d0dcff
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #eef2ff
版面标题表格字体颜色 #001c7b
版面内容表格字体颜色 #001c7b
提醒语句颜色 #000000

配色方案八(西瓜红色:娇艳):
版面表格边框颜色 #ff51b0
版面标题表格颜色 #ff8cc6
版面内容表格颜色1 #ffe1f0
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #fff4fa
版面标题表格字体颜色 #bf0069
版面内容表格字体颜色 #bf0069
提醒语句颜色 #602060

配色方案九(水橘红色):
版面表格边框颜色 #ff8e68
版面标题表格颜色 #ffa98c
版面内容表格颜色1 #ffe9e1
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #fff9f7
版面标题表格字体颜色 #9b2700
版面内容表格字体颜色 #9b2700
提醒语句颜色 #000000

配色方案十(粉绿色):
版面表格边框颜色 #00b700
版面标题表格颜色 #b0ffb0
版面内容表格颜色1 #e8ffe8
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #f7fff7
版面标题表格字体颜色 #006a00
版面内容表格字体颜色 #006a00
提醒语句颜色 #000000

配色方案十一(蓝紫色):
版面表格边框颜色 #4040e3
版面标题表格颜色 #9b9bf0
版面内容表格颜色1 #dedefa
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #f5f5fe
版面标题表格字体颜色 #151595
版面内容表格字体颜色 #151595
提醒语句颜色 #000000

配色方案十二(淡蓝色):
版面表格边框颜色 #0053ec
版面标题表格颜色 #a2c2ff
版面内容表格颜色1 #e8f0ff
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #f4f9ff
版面标题表格字体颜色 #6c0091
版面内容表格字体颜色 #6c0091
提醒语句颜色 #6c0091

配色方案十三(雪青色):
版面表格边框颜色 #cd37ff
版面标题表格颜色 #ebacff
版面内容表格颜色1 #f9e6ff
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #Fdf4ff
版面标题表格字体颜色 #205838
版面内容表格字体颜色 #205838
提醒语句颜色 #287048

配色方案十四(青绿色:中等,缺色时再使用):
版面表格边框颜色 #00935b
版面标题表格颜色 #00ce81
版面内容表格颜色1 #dffff3
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #F7FFFc
版面标题表格字体颜色 #005b39
版面内容表格字体颜色 #005b39
提醒语句颜色 #005b39

配色方案十五(酱红色):
版面表格边框颜色 #db3700
版面标题表格颜色 #ff8c6a
版面内容表格颜色1 #ffd2c4
版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列 #ffede8
版面标题表格字体颜色 #8a1f00
版面内容表格字体颜色 #8a1f00
提醒语句颜色 #8a1f00

关于配色的 方案
我提供的是针对动网论坛的(包括相同配色方法的论坛)
如果你使用的不是动网
那配色后的颜色的位置就不清楚了
我把我配色的方法说一下
你可以自己去试试
一般来说
我都是用相同的色系来调整配色的
这样的颜色比较协调
选择自己喜欢的颜色作为主色调
选择颜色的时候使用Flash或者Fireworks这样的工具
在自定义颜色里选择
这样你可以看到所选择颜色的色调和饱和度
记录下来色调和饱和度的值
然后再确定
回到主窗体后
将鼠标移动到选择好的颜色上就会出来提示筐
告诉你颜色的编号
这样就可以选择到你要的颜色了
一般自己感觉最好的颜色放在标题表格(表头)
其他的颜色选择时
使用相同的色调和饱和度
这样就形成了同一个色系的颜色
其实真正合适的颜色不是很多
色调差距比较小的时候颜色不是很容易区别开
饱和度减小的时候实际对于一个色系而言
没有什么必要性
所以一般情况下就是在饱和度等于240的时候进行选择
边框的颜色稍微深一些
文字的颜色要重
而内容表格的颜色要淡(因为文字的内容更重要)
其实也没有什么很特殊的方面了
开始的时候可能感觉不到
自己调整一下
有一个朋友同时帮忙鉴定颜色的感觉
最好是找个挑剔一些的
不需要多少时间就可以找到自己喜欢的颜色了
所以对于 动网的系列
上面提供的这些配色方案
对于喜欢同色系方式配色的朋友已经足够了
但是对于采用不同色系进行配色的方式
那对于颜色的合理搭配要求太高
我自己也没有尝试过
如果有这样的方案
还希望大家能够提供出来

Published At
Categories with 网页设计
comments powered by Disqus