网页色彩搭配的原则是什么

设计师最常用的色彩模式有CMYK,RGB这两种。CMYK是青色(Cyan)、洋红(Magenta)、黄色(Yellow)、黑色(Black)的缩写。CMYK是一种依靠反光的色彩模式,它需要由外界光源照射在物体上再反射在我们的眼中,是一种基于印刷的色彩模式。

1.色彩的模式

RGB分别是红(red)、绿(green)、蓝(blue)的英文缩写,RGB是基于发光体的色彩模式,比如电脑屏幕、电视机、太阳光等。RGB色彩模式给图像中每一个RGB分量分别分配一个0~255的强度值。


要指定网页上的颜色,就要使用RGB模式来确定。方法是分别指定R、G、B三种色彩的强度,最低的强度数值为0,最高强度数值为255,并通常都以十六进制数值表示,如255对应的十六进制就是FF,把三个数值依次并列起来以“#”开头,如R-255、G-255、B-255,其对应的十六进制色就是“#ffffff”,也就是白色。


2.色彩的情感

不同的颜色有不同的色彩情感,它能传递出不同的视觉印象,大多数网站都有自己的主色调,同样的主色搭配不同比例的辅助色也会产生不同的心理感受。


红色是一种激奋的色彩,具有刺激效果,能使人产生冲动、愤怒、热情、活力的感觉,它在很多文化中代表的是停止的信号,用于警告或禁止一些动作,很多停止的图标用的就是红色。


红色色相上轻微的不同明度、饱和度差异分为:品红、朱红、宝石红、洋红等。不同比例的搭配更可能会产生出截然不同的效果。如可口可乐网中鲜红色与无色系并且明度最高的白色组合,更加凸显红色本身的活力与热情。


而Toki网中的深红色可以唤起可靠感,深红色搭配黑色更能突显该餐饮品牌的专业性,同时深红与黑色的搭配也与戏剧院的幕布有异曲同工之妙,具有一定的戏剧性。


橙色也是一种激奋的色彩,具有轻快、欢欣、热烈、温馨、时尚的效果。一些主要经营创意设计的网站,如Maad网就采用了橙色作为主色系,从而表现年轻活力的调性。橙色有时候也用于提示,如微博上一些含有一定提示功能的图标,就采用了橙色。


黄色是所有色相中最能发光的颜色,给人轻快、透明、辉煌、充满希望的色彩印象。如设计师Jan Mense个人网站采用时尚醒目的柠檬黄配以黑色,不仅使黑色文字内容无比的醒目,还闪烁着黄色特有的智慧、时尚的光芒。


Kre Sko网采用了中黄色作为主色调,少量的红色用于强调,使得整个页面主次分明,另外灰、白色的穿插使得画面十分和谐。黄色快乐、甜美的特色在这个产品中被体现得淋漓尽致,符合该休闲品牌的特性。

此外,黄色也是一个可见度高的色彩,一些警告健康安全和设备危险的信号也选用黄色。


绿色是自然界中最多的颜色,它能够唤起一种人类对于自然的本能意识。绿色代表着通行、准许通过的意思,因此很多常用于开始按钮和下载按钮,还有成功提示页面等。绿色给人以和睦、宁静、健康、安全的感觉。


如360网选用绿色作为主色调,不仅能营造出清爽、自然、宁静的界面,还能让访问者感到使用360系类产品的安全性,增加网站的亲切感。


JF家具网站采用橄榄绿作为主色调,添加类似于泥土的褐色,仿佛闻到了大自然的芬芳,极好地反映了该品牌绿色环保的特色。


蓝色是最具凉爽、清新、专业的色彩,蓝色天生冷静,能够给人以安全感,但是它同样有着优雅和活泼的一面,在很多领域都将它和白色混合,能体现柔顺、淡雅、浪漫的气氛。Skype网用天蓝色搭配白色、蓝色显得清新雅致,传达出一种享受Skype产品时的轻松愉悦之感。


fork-cms内容管理系统借助海水蓝睿智沉稳的属性突出公司可靠的特点,而明黄色、白色的点缀又让整个页面显得明快、活泼起来。


紫色是由温暖的红色和冷静的蓝色化合而成,被认为是一种优雅高档的色彩,常用于表现商品的奢华和高贵。紫色同时也是很多艺术家都喜欢的色彩。


Dimchevski网选用粉紫色的渐变,梦幻华丽的色彩给人神秘、变幻莫测的视觉心理感受,大面积的深蓝色又给以优雅、安定感。


Eagle rock学校网以纯度较低的青莲色与小面积的绿色作为网站的主要用色,传递出该学校稳定、可靠、优质教学的特色。


3.色彩组合

色彩对情感有着巨大的冲击,色彩的搭配无穷无尽,可以玩多彩风格,也可以极简配色。按照色彩的多少来分类,大致分为无色系配色、单色配色、2-3色配色、多色配色四种类型。


(1)无色系配色

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

Velvet网无色系这个作品展示页是一个典型的单色设计,抽象的图形使得它看起来不那么接地气,而这种独特的设计美学可能更容易被那些经过专业训练的用户所欣赏,这个网站是相当值得探索和研究的。


(2)单色配色

单色配色是指一种颜色与无色系(黑白灰)的搭配,在色彩上进行不同的明暗渐变,或是贯穿全站的单一色彩。数字服务机构isobar网就是用一个橙色加上黑白无色系来搭配设计,需要强调的地方用橙色。


(3) 2-3色配色

2-3色配色方案是在一种主色、一种辅助色的基础上进行明度、饱和度的变化。主色所占页面的面积大,处于视觉中心位置,而辅助色常常选用主色的互补色或邻近色。这种或冲突或和谐的配色方案是一种前卫又时尚的网页色彩流行趋势。如Holm Marcher &Co网的页面以大面积红色为主,灰蓝色为辅,在灰蓝色的基础上做了明度、饱和度的变化,沉稳的色调给网站奠定了专业和强力的基调。


4.色彩的对比

多种色彩对比还可以通过降低色彩本身的纯度及控制色彩的面积比例来达到悦目的效果。如brdr-kruger官网结合品牌产品,每个色块为一个主题,其灰蓝色的色调包容了多种低纯度的色彩,很好地表现了品牌低调雅致的属性。


而Softwaremill官网同样用了多个明快的色彩,但色彩所占的比例却十分讲究,而且最终统一在一个白色的大背景下,时尚清新。

营销型网站