网页色彩的搭配
首先我们先来了解一些色彩的基本知识:
1.颜色是因为光的折射而产生的。
2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。
3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。
网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。
我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。
●非彩色的搭配
黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。
●彩色的搭配
色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。(如下图)
红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红
|___________| |____| |_________| |_________|
| | | |
暖色系 中性系 寒色系 中性系
二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。
红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。
○网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。
○网页色彩掌握的过程
随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
○网页色彩搭配的技巧
文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
在网页配色中,忌讳的是:
1.不要将所有颜色都用到,尽量控制在三种色彩以内。
2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
Web 色 彩 搭 配3
在WEB设计中,色彩搭配是需要WEB设计师慎重考虑的,好的色彩搭配是网页设计成功的一半。在一个色彩搭配具备专业水平的网站,即使只使用很少的图形,仍会带给浏览者深刻的印象和舒适的视觉感受。使网页内容重点突出,网站风格统一,更易于浏览。而许多网友总是配不好颜色,教你一个窍门:就是用同一色系的色彩,色彩层次分明但不会导致反差强烈。
下列色彩组合较易使版面醒目:
推荐配色方案
文本色
有关主页上的用色
不同色彩之间的对比会有不同的效果,当 2 种色同时在一起时,这 2 种色各自走向自已的极端,例如红色与绿色对比,红的更红,绿的更绿, 黑色与白色对比,黑的更黑,白的更白.由于人的视觉的不同,对比的效 果通常会有不同,当大家长时间的看一种纯色,例如红色,然后再看看周 围的人,尼会发现周围的人脸色会成绿色,正是因为红色与周围的对比, 形成了对我们视觉的刺激 ! 色彩的对比会受很多因素影响,例如色彩 的面积,时间,亮度等等.
色彩的对比有很多方面,色相的对比就是其中的一种,当我们用湖蓝与深 蓝对比时,尼会发觉深蓝带点紫味,而湖蓝则有点绿味.各种纯色的对比会 产生鲜明的色彩效果,很容易给人带来视觉与心理的满足 !! ^-^
下面就给俺试验出来的不一定正确的例子:
红色与黄色对比:红色会使人想起玫瑰的味道,而黄色则会使人想想柠檬 的味道
绿色与紫色对比:很有鲜明特色,令人感觉到活泼,自然.
( 太多了,俺试不完 !! ^-^ 只能说出其中几种,其实纯色之间的对比给人 的视觉刺激最强烈)
例如红,黄,蓝 3 种就是最极端的色彩 ! 这 3 种之间对比,那一种色 也无法影响对方.而非纯色对比出来的效果就显得很柔和,我们常见的 色彩就是这种对比 !
色彩间的对比也有纯度对比,举个例子,黄色是夺目的色,但是加入灰色会失 去其夺目的光彩,通常可以用混入黑,白,灰色来对比纯色,这样可以减低其 纯度.纯度的对比会使色彩的效果更明确肯定.
有很多因素可以影响色彩的对比效果,色彩的大小就是其中最重要的一 项,如果 2 种色彩同样大小,那么这 2 种色之间的对比十分强烈,但是 当其中的一种大小变得不一样时,小的一种色就会成为大的色的补充,其 本上人不会注意到小的色彩,而会感觉到大的色彩的存在.色彩的大小会 令色彩的对比有一种生动效果,试在一大片绿色中加入一小点红色,你 会注意到红色在绿色的衬托底下很抢眼,这就是色彩的大小对对比效果 的影响,在大面积的色彩陪衬底下,小面积的纯色会突出特别的效果,但是 如果用较淡的色彩,则会让感觉不到这种色彩的存在,便如在黄色中加入淡 灰色,你根本就不会注意到淡灰色.
不知你是否留意到,在不同的形状上面,同一种色彩也会有不同的效果,试 试在一个正方形和一条线上用红色,尼会发现,正方形更能表现红色的稳重 喜庆的感觉,不同的形状会使同一种色彩产生不同的效果,个人认为,圆形最 好用蓝色,这样给人辽阔博大的感觉,三角形用黄色,三角形的尖锐感与黄色 的刺目感配合起来.梭形建议用刺蓝色,平边四边形用绿色.....这些只是一 家之言,大伙儿可以自已选用,我只是写出不同的形状上面即使用同种色也 会有不同的效果.
还有,色彩所处的位置的不同,也会造成色彩对比的不同,试把两个同样大小 的色彩放在不同的位置,例如前后,你会看到,前面的色会给尼印象深些,而 后成的色则会让你觉得暗些,正是由于所处的位置的不同,导致到眼睛的视 觉的不同.
我喜欢在画图中使用渐层工具,无它,觉得多种色彩在一起会种一种不同的效 果,有如音乐的 1,2,3,4,5,6,7 变化,同样的色相但纯度不同的色彩组合在一 起会有令人吃惊的效果,不要以为渐层很简单,它内含着色彩的运用的一项重 要的运用.不知大家有没有唱过歌 ? ^-^ 不唱也没关系,那总会哼调子吧 ? 我觉得色彩的渐层变化里也有一种调子,如同歌曲里的谱一样.
暗色中含高亮度的对比,会给人清晰,激烈,很有强烈的刺激 如深黄到刺黄色. 暗色中间含高亮度的对比,会给人沉着,稳重,深沉的感觉觉,如深红中间是刺红. 中性色与低高度的对比,给人模糊,朦胧,深奥的感觉,如草绿中间是浅灰. 纯色与高亮度的对比,给人跳跃舞动的感觉,如黄色与白色的 纯色与低亮度的对比,给人轻柔,欢快的感快,如浅蓝色与白色 纯色与暗色的对比,给人强硬,不可改变的感觉,
以上只是我试出来个人的感觉,大家不妨试试 !! ^-^
色彩通常可以在不知不觉间影响人的心理,左右人的情绪.这些通常在不知不觉中 产生的,大伙儿可以试在阳光充足的日子里看蓝色,会让你觉得充满希望,在阴雨绵 绵的时候看黑色,会让你心理沉静.但是需要说明,对色彩的理解每个人都会不同,每 个人都有其喜欢或讨厌的色彩,每个人都会理解到不同的含义,我只是一个大概的认 识,我这里写的不一定适合全部人,因为层次的不同决定了对色彩理解的不同,我只 是写出我的个人观点 !
色彩对人的视觉,心理有很大的影响,这里先举个例子,如果大家看红,黄 2 种色是不是有种暧和的感觉 ? 如果看蓝,绿 2 种色是不是有种冰冷的感觉 ? 其实色彩本身是不带任何含义的,但是人的心理错觉把它们分成冷暧 2 个色系,大家经常在日常受到色彩的影响,例如在夏天,如果你在家里家把所有 的灯关掉,把窗帘换成深绿色,不见一丝阳光,这里尼在心理上会感到非常凉快 !
这些并非是真实的的温度,它只是色彩影响人的心理所产生的错觉,同样色彩 的亮度也会影响人的心理,暗的会使人觉得重,亮的会使人觉得轻.色彩的纯度也 会影响人的心理,淡的会使人觉得柔和,纯的会使人觉得强硬.
不同的色彩之间的搭配和对比,混
合同
劳动合同范本免费下载装修合同范本免费下载租赁合同免费下载房屋买卖合同下载劳务合同范本下载
样会使人的心理产生影响,例如草绿色+ 淡黄,和淡紫很容易引起人对童年的回忆 ( 个人胡思乱想,与各位无关 !! ^-^)
各种色彩都会有人给它加上特定的含义,俺也有一套,现在说出来向大伙儿现丑 ^ ^
红色: 强有力,喜庆的色彩,很容易使人有兴奋感觉,是一种雄壮的精神体现
黄色:亮度最高的色,给人感觉就是很有温暧感,灿烂辉煌 ! 试试加入淡红色或淡紫色 !
绿色: 美丽,优雅,给人感觉大度,宽容.
蓝色: 永恒,博大,大家可以看看天空 ! ^ ^ 给人感觉平静,理智.
紫色: 小 mm 们常用这种色,给人神秘,压迫的感觉.很怪的一种色.
黑,白色: 这 2种色我有时会觉得很奇怪,它们在不同时候给人的感觉是不同的, 黑色有时给人沉默,虚空的感觉,但有时也给人一种庄严肃穆的感觉,白色也是同样 ,有时给人无尽的希望感觉,但有时也给一种恐惧和悲哀的感受,具体还是要看与那 种色配在一块.
还有一些纯度不同的色,我自个较为喜欢的,例如含灰色的绿会给人联想到淡雾中的 森林,天蓝会令人心境畅快,淡红会给人一种向上的感觉.只是个人理解而已,大伙儿可 以自个试试.
再次强调,色彩本身是无任何含义的,有的只是人赋与它的,没必要强调将自已的 观点强加于别人的理解上面 !! ^ ^ !!
有关主页中的用色之二
刚刚做网页的朋友可能更习惯于用一些漂亮的图片做自己网页的背景,但是,更多地浏览一下大型商业网站,你会发现它们更多运用的是白色、蓝色、黄色或其他颜色的搭配,使得网页显得典雅、温馨又不失活泼,更重要的是,这种做法使浏览者大大加快了网页的加载速度,配合网站丰富的内容,使整个网站更具有吸引力。
那么如何搭配颜色才能让自己的主页更加绚丽多彩呢?我们常常遇到的问题其实主要是背景颜色和字体颜色的搭配问题:达到既不显得呆板,又不至于过于亮丽而造成过强刺激的视觉效果。一般说来,普通的底色应柔和些,素一些,淡一些,配上黑字,读起来自然、流畅。而为了追求醒目的视觉效果(如标题),可以使用较深的颜色,然后配上对比鲜明的字体如白字、黄字或蓝字。其实底色与字体的合理搭配要胜过用背景图画,因为背景图画太花哨,有种不安静的感觉。而纯色给人感觉较好,尤其是看图片多了以后!
下面是本人多日制作网页对底色和字体搭配积累的经验,这些颜色可以做正文底色,也可做标题底色,再配上不同颜色的字体,就有比较不错的效果。希望能对大家有所帮助。
bgcolor=“#f1fafa”//做正文的背景色好,淡雅。
bgcolor=“#E8FFE8”//做标题的背景色好,与上面的颜色搭配很协调。
这两种颜色可以配黑字或font color=“#800080"
bgcolor=“#E8E8FF" //做正文的背景色好,字体配黑色较好。
bgcolor=“#8080C0" //上配黄色白色字体较好
bgcolor=“#E8D098" //上搭配浅蓝色或蓝色字体较好
bgcolor=“#EFEFDA" //上搭配浅蓝色或红色字体较好
bgcolor=“#F2F1D7" //配黑字素雅,红字醒目
bgcolor=“#336699" //配白字做标题较好看
bgcolor=“#6699CC"、bgcolor=“#479AC7"、bgcolor=“#66CCCC"、bgcolor=“#00B271"和bgcolor=“#B45B3E"配白字都较好看 //可做标题
bgcolor=“#FBF8EA"、bgcolor=“#D5F3F4"、bgcolor=“#D7FFF0"、bgcolor=“#F0DAD2"和bgcolor=“#DDF3FF"配黑字都较好看 //一般做正文以上配色方案都比较淡雅。
浅绿底黑字,或白底蓝字都很醒目,但前者突出背景,后者突出前景。红底白字醒目,较深底色配黄字有效果。
本文只想起一个抛砖引玉的作用,大家可以在此基础上发挥想象力,搭配出更加有新意的颜色,做出更漂亮的网页。