随着因特网的发展与普及,越来越多的企业和个人都把与其相关的信息组织成五彩缤纷的网页,用于在网络上进行展示以达到信息交流的目的。
关于网页的制作技术,无论是Frontpage,Dreamwaver,Fireworks,还是Asp,Javascript,相信你都已经游刃有余。但在网页的设计过程中,你是否有过为了几种色彩的巧妙搭配而一筹莫展呢!
网页色彩的完美搭配,对于一个图形艺术设计师来说,那简直就是小菜一碟。但对于一个既想拥有自己的完美页面而又没有专业美术功底的普
通大众来讲,那可就不是一件简单的事情了。
本文从“色环”的研究角度出发,就网页设计中如何利用色彩搭配的原则问题进行探讨,相信你看了此文之后,对你的网页设计能起到一定的帮助作用。
● 基本色
我们知道可以把一条连续彩虹中的“可视光”分解成从蓝到红的色谱(图1)。
我们也看到,或许应用过,通过把两种或两种以上的颜色混合在一起,就可以得到一种特殊的颜色。从本质上讲,色环(图2)就是色谱可以看到的颜色所形成的线性连续环(如图2所示)。
一个色环通常包括12种明显不同的颜色。而对于艺术设计师充分理解的色环和色论的重要方面,也许不会被我们中的网页设计者们能够充分欣赏。缺少多这方面的了解,你将会把事情搞乱。
● 三原色
从定义上讲,三原色是能够按照一些数量规定合成其他任何一种颜色的基色。为了确定三原色,你必须首先确切明确哪一种颜色是你正在使用的中间色。在上小学时,你可能就知道了三原色:红、黄、蓝,并且你现在用于展示的,仍然是红、黄、蓝三原色。但是如果你有喷墨打印机的话,花点时间把它的盖子打开,看看它的墨盒。你能看到红、黄,蓝吗?不能!你可能看到的是四种墨色:蓝绿(青)色、红紫(洋红)色、黄色和黑色。颜色的不同是由于你的电脑用的是正色,而你的打印机用的是负色。显示器发出的是彩色光,而纸上的墨则吸收灯光发出的颜色。更进一步的解释就超出了本文要探讨的范围。
除了发射与吸收光的不同之外,本文涉及的概念同样适用于正色和负色模式,出于本文的写作目的,我们仅探讨着正色模式的三原色:红、绿、蓝。
● 次色
为了构造色环,我们将认识任两种相临基色通过合成得到的三种颜色,它们称作为“次色”:蓝绿(青)色、红紫(洋红)色和黄色。正色域中的“次色“同样可以作为负色域中的“原色”。由此你可以得出结论,正色中的次色就是负色中的原色。这是正色和负色模式之间的所有内部关系。
● 三色
最后我们可以找出色环中当前填充色之间的中间色。幸运地是,三色对于正色域和负色域来讲是没有什么区别的。现在我们已经定义出所使用的12点色环之后,就能够讨论颜色间的相互关系了。
● 近似色
近似色可以是我们给出的颜色之外的任何一种颜色。如果从橙色开始,并且你想要它的两种近似色,你应该选择红和黄。用近似色的颜色主题可以实现色彩的融洽与融合,与自然界中能看到的色彩接近起来。
● 补充色
正如我们所知道的相对色一样,补充色是色环中的直接位置相对的颜色。当你想使色彩强烈突出的话,选择对比色比较好。假如你正在组合一幅柠檬图片,用蓝色背景将使柠檬更加突出。
● 分离补色
分离补色由两到三种颜色组成。你选择一种颜色,就会发现它的补色在色环的另一面。你可以使用补色那一边的一种或多种颜色。
● 组色
组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时,会对浏览者造成紧张的情绪。因为三种颜色形成对比。上面所讲的基色和次色组可以被称作两组组色。
● 暖色
暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力,它们也产生了一种色彩向浏览者显示或移动,并从页面中突出出来的可视化效果。
● 冷色
冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用,它们看起来有一种从浏览者身上收回来的效果,于是它们用作页面的背景比较好。
需要注明的是,你将发现在不同的书中,这些颜色组合有不同的名称。但是如果你能够理解这些基本原则,它们将对你的网页设计是十分有益的。
● 抽取对比
对比是在两种临近色间被认识到的不同色彩。因为白色和黑色并不是真正的颜色,它们被说成是非色彩的对比。白和黑也表现出对比的最高水平。色环中的补色表现的是高色彩的对比。这就是当你增加压缩比后把图象中的白色和黑色信息减少所造成的.JPG压缩算法使彩色信息减少的原因。
图12 白到黑:非色彩的对比坡
图13 采用蓝色的单色对比坡
当你使用一种单色,然后增加或降低亮度时,单色的对比就被提取出来了。
网页设计中的对比非常重要。并且有不同的应用方式,所有这些都基于上面所列的其他颜色。每个人都清楚的是,白底黑字看起来非常容易,这就是你所阅读的大部分印刷材料中为什么都是白底黑字的原因的一部分。同样地,黑底白字产生强烈对比,但是它阅读起来比较困难。因为黑色相对白色和其它的颜色来讲,看起来有一种沉重感和些许的压抑感。从图14所示的两种对比效果来看,相信你已经对对比色就有了进一步的体会。
图14 高对比色的搭配
类似的对比效果也同样发生在暖色和冷色之间。暖色有些微冲出荧屏的感觉,而冷色被认为有从荧屏后退的感觉。这就意味着暖色/暗色适合于文本,而冷色/亮色更适合于用作背景。但是,这样的方式不是十分固定的。让我们看看选择这两种对比色的一个简单例子。用一种(颜色)作为背景,用另一种(颜色)作为文本。
图15 补色的搭配
你将注意到得到的结果是十分糟糕的。这两种颜色之间不能形成恰当的对比,它们看起来就象伸向你的拳头,明确地讲,它们不是一个好的结合。但是保持这基本相同的颜色不变,调整一下它们的亮度/暗度,使它们之间更一致一些(见下图)。
图16 调整色的搭配
你可以看出这是一种较好的色彩搭配。这不但是从分析角度的判断思考,更是从视觉观点进行的阐释。
在背景图象上添加文本,对比色的使用也许是最重要的。使用这些对比的概念,你需要记住的是,页面上的文本成分必须和背景图象上的所有颜色形成足够强烈的对比。例如,你仅使用了上面所描述的一套“组色”,就会有三种显然的对比色给页面造成的糟杂喧嚣感。
图17 组色的搭配 背景图象上的文本
一种较好的方法是去使用一套分离补色,近似色作为背景,补色作为文本(色)。在这种方式下,背景色之间完全地融合在一起,不会招来人们特别明显的注意,并且能够使文字突出出来。
图18 分离补色的搭配,文字在背景图象的上面
了解色彩理论,可以在你为你的站点选取一种主题颜色时起到作用。依赖于你需要的背景色,导航元素和不同的文本风格,你可以从色环中选用对比模式。那么使用一些比较安全的颜料图标,你可以容易地选取较暗较亮的颜色去增强你元素间的对比而达到一个适当的水平。有许多搭配适合于你的页面―提供一个好的色彩应用而不至于使你的用户头疼。
通过上面的讲述,你对网页设计中色彩的运用,应该有了一个较全面的了解。那你就马上开始行动吧,用你的双手与慧眼,把你的网站设计的更加靓丽多彩!
我是美校的,
我一开始是用这两本书的!
<配色基础原理>
<艺术概论>
色彩的物质性心理错觉
色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。心理学家对此曾做过许多实验。他们发现,在红色环境中,人的脉搏会加快,血压有所升高,情绪兴奋冲动。而处在蓝色环境中,脉搏会减缓,情绪也较沉静。有的科学家发现,颜色能影响脑电波,脑电波对红色反应是警觉,对蓝色的反应是放松。自19世纪中叶以后,心理学已从哲学转入科学的范畴,心理学家注重实验所验证的色彩心理的效果。不少色彩理论中都对此作过专门的介绍,这些经验向我们明确地肯定了色彩对人心理的影响。
冷色与暖色是依据心理错觉对色彩的物理性分类,对于颜色的物质性印象,大致由冷暖两个色系产生。波长长的红光和橙、黄色光,本身有暖和感,以次光照射到任何色都会有暖和感。相反,波长短的紫色光、蓝色光、绿色光,有寒冷的感觉。夏日,我们关掉室内的白炽灯,打开日光灯,就会有一种变量双的感觉。颜料也是如此,在冷食或冷的饮料包装上使用冷色,视觉上会引起你对这些食物冰冷的感觉。冬日,把卧室的窗帘换成暖色,就会增加室内的暖和感。
以上的冷暖感觉,并非来自物理上的真实温度,而是与我们的视觉与心理联想有关。总的来说,人们在日常生活中既需要暖色,又需要冷色,在色彩的表现上也是如此。
冷色与暖色除去给我们温度上的不同感觉以外,还会带来其它的一些感受,例如,重量感、湿度感等。比方说,暖色偏重,冷色偏轻;暖色有密度强的感觉,冷色有稀薄的感觉;两者相比较,冷色的透明感更强,暖色则透明感较弱;冷色显得湿润,暖色显得干燥;冷色又很远的感觉,暖色则有迫近感。一般说来,在狭窄的空间中,若想使它变得宽敞,应该使用明亮的冷调。由于暖色有前进感,冷色有后退感,可在细长的空间中的两壁涂以暖色,近处的两壁涂以冷色,空间就会从心理上感到更接近方形。
除去寒暖色系具有明显的心理区别以外,色彩的明度与纯度也会引起对色彩物理印象的错觉。一般来说,颜色的重量感主要取决于色彩的明度,暗色给人以重的感觉,明色给人以轻的感觉。纯度与明度的变化给人以色彩软硬的印象,如淡的亮色使人觉得柔软,暗的纯色则有强硬的感觉。
颜色表情
色彩本身是没有灵魂的,它只是一种物理现象,但人们却能感受到色彩的情感,这是因为人们长期生活在一个色彩的世界中,积累着许多视觉经验,一旦知觉经验与外来色彩刺激发生一定的呼应时,就会在人的心理上引出某种情绪。
无论有彩色的色还是无彩色的色,都有自己的表情特征。每一种色相,当它的纯度和明度发生变化,或者处于不同的颜色搭配关系时,颜色的表情也就随之变化了。因此,要想说出各种颜色的表情特征,就想要说出世界上每个人的性格特征那样困难,然而对典型的性格作些描述,总还是有趣并可能的。
1、红:活跃、热情、勇敢、爱情、健康、野蛮
2、橙:富饶、充实、未来、友爱、豪爽、积极
3、黄:智慧、光荣、忠诚、希望、喜悦、光明
4、绿:公平、自然、和平、幸福、理智、幼稚
5、蓝:自信、永恒、真理、真实、沉默、冷静
6、紫:权威、尊敬、高贵、优雅、信仰、孤独
7、黑:神秘、寂寞、黑暗、压力、严肃、气势
8、白:神圣、纯洁、无私、朴素、平安、诚实
暖色系+冷色系:红vs蓝、黄vs紫,此配法,是相对配色 ;
浅色系+深色系:浅蓝vs深蓝、粉红vs铁灰,此配法,是深浅配色 ;
暖色系+暖色系:黄vs红、黄vs绿,此配法,是同系配色;
冷色系+冷色系:灰vs黑、紫vs黑,此配法,是同系配色;
明亮系+暗色系:白vs黑,此配法,是明暗配色 深浅配色与明暗配色,营造出的视觉效果不同。
如果你知道基本的色彩原理,那么,相同大小的补色不要放一起,大红大绿什么的。颜色和面积大小有关,视觉影响会直接感受到大脑。
书籍我也推荐《配色宝典》,设计师大都用的
或者时尚类摄影类杂志,它们是最直接的。也帮助你知道什么风格该用什么色的疑问
这些在任何关于美术类的使用上都有用
好了,不是复制粘贴的哦~
以上的书籍推荐在50,60元不等,个人觉得买一本的话可以用很久了,就是不知道LZ觉得好不好了。。
你可以先看一些色彩构成的书
一些色彩构成上会有详细的介绍
什么时候该用什么颜色
还有你可以看一看色谱
上面有一些颜色搭配
可以根据自己的需要选所需要的颜色
色谱上面会RGB
CMYK
我这个绝对不是复制粘贴
我是学设计的
在用色方面还是懂一点
你就记住看看《色彩构成》
和我说的《色谱》
你会有收获的。