网站的色彩搭配是树立网站风格及文化形象的关键之一,包括 背景、文字、图标、边框、超链接 等等元素,应该使用什么样的色彩,应该如何搭配才能最好的体现企业文化或者网站风格定位,应该如何使用色彩是初学网页设计所遇到一个比较难处理的问题,特别是非美术科班类专业出身的朋友在接触配色及色彩搭配的时候往往是一头雾水不知所措,这里将收集一些关于色彩搭配的基本知识或技巧,希望对初学者有些帮助。
1、颜色是如何产生的:
既然要我们要使用各种颜色就要知道它们是如何产生的,因为白色的太阳光是包含各种波长及频率的单色光的复色光(可通过“光的色散”三棱镜分解)当太阳光照到物体上时,一部分光被物体表面反射,另一部分被物体吸收,剩下的穿过物体透射出去,不完全透明的物体的颜色即是由它反射的光颜色决定的。
2、三原色 加色 三基色 减色:
调出任意颜色有两种方法“加色 减色”即通过添加颜色或者减少颜色来调出想要的色彩,这两种方法最典型的应用就是:印刷绘画中在三原色(红黄蓝)的基础上使用“加色”调出从“白色”到“黑色”的色谱;同样的光学显示上则在三基色(红绿蓝)的基础上“减色”也能调出从“白色”到“黑色”的色谱。
3、网页颜色的表示:
这里只讨论网页颜色的表示,既然“红(Red)绿(Green)蓝(Blue)”是用于光学显示的三基色,我们就可以通过定义这三个数值来确定一个颜色即 color:rgb(R,G,B); 其中 R G B 均为 0-255 的整数例如 rgb(255,0,0) 表示红色 rgb(255,255,255) 表示白色 等等;但通常我们在网页中使用 16 进制来表示颜色即 color:#RRGGBB; 其中 RR GG BB 均为 00-FF 的两位十六进制整数例如 #00FF00 表示绿色 #000000 表示黑色 等等;当然还有另外的一些表示方法如 颜色名称、短十六进制、RGB百分比、RGBA、HSL、HSLA 等等不在本文介绍之内。
4、彩色 黑白灰 色相 亮度 饱和度 透明度:
颜色可分为彩色和非彩色两大类,非彩色即 黑 白 灰,剩下的即是彩色;任何色彩都有 色相、亮度、饱和度、透明度 等属性,前面提到的 HSL 就是使用 色相 饱和度 亮度 三个属性来确定一个颜色的。
有调查报告指出:人们对于彩色的记忆效果是非彩色的 3-4 倍,所以我们都会使用彩色来设计及制作网页,即通常的做法是,主要内容文字使用非彩色(黑或灰)而边框背景及图片等装饰使用彩色,这样既能保持页面不单调,又能保证在浏览主要内容的时候眼睛不至于疲劳。
5、非彩色页面配色:
非彩色的 黑 白 是最基本和最简单有效的搭配,我们平时看到的各种书籍资料都采用“白底黑字”清晰明了,而 灰色 是万能百搭色,可以和任何颜色相搭配,在设计制作页面时如果一时找不到好的颜色来搭,不妨试试灰色,灰色既可以帮助两种色彩和谐过渡,也不至于突兀即使长时间观看也不至于疲劳。
6、色彩 色谱 色感:
即使是全部采用网页安全色其数量也达 216 种之多,如何使用这些千变万化的色彩其实也是一门学问,美术类的同学都知道“色彩学”这门课用了你们多少时间和精力,这里只能就色彩中最基本的一些知识给从来没有接触过美术色彩的朋友做一下普及,想要最终设计出漂亮实用的网页还是需要长期的积累与实践。
色谱:我们最常见的色谱“虹”就是把颜色按照“ 红 橙 黄 绿 青 蓝 紫 ”依次过渡渐变,色谱两端分别是 暖色 冷色 中间为 中型色。
色感:其实上面所说的“暖色”和“冷色”就是按照色彩给人的感觉来分类的,不同的颜色会给用户不同的主观感觉。
7、几种主要色彩的感觉:
红色:激奋的色彩,刺激效果,能使人产生冲动,愤怒,热情,活力的感觉;
橙色:也是激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果;
黄色:具有快乐,希望,智慧和轻快的个性,它的明度最高;
绿色:介于冷暖两中色彩的中间,和睦,宁静,健康,安全的感觉;
青色:极为幽雅的色彩,独特的品位,既深远又神秘,让人进入无限的空间,稳重又端庄;
蓝色:凉爽,清新,专业,宽广澄澈的天空、透明深沉的海洋,给人带来活泼和沉稳;
紫色:清逸但也最有贵族气,是比红更略胜一筹的内敛,介于沉静蓝和热烈红,所以紫色给人的感觉是高贵、高雅,难以琢磨,甚至有点神秘的色彩;
——
白色:洁白,明快,纯真,清洁的感受;
黑色:深沉,神秘,寂静,悲哀,压抑的感受;
灰色:中庸,平凡,温和,谦让,中立和高雅的感觉;
其实每种色彩在饱和度、亮度、透明度上只要略微做变化就会产生不同的感觉,以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深;不同的色彩搭配也会产生一些新颖的感觉,绿色和金黄,淡白搭配,可以产生优雅,舒适的气氛。蓝色和白色混合,能体现柔顺,淡雅,浪漫的气氛等等。
下一篇《网页配色技巧篇》将谈一些对网页配色中比较容易掌握及迅速提高的一些小技巧,请继续关注。