网页设计配色应用.docx

上传人:b****8 文档编号:9252451 上传时间:2023-05-17 格式:DOCX 页数:70 大小:2.32MB
下载 相关 举报
网页设计配色应用.docx_第1页
第1页 / 共70页
网页设计配色应用.docx_第2页
第2页 / 共70页
网页设计配色应用.docx_第3页
第3页 / 共70页
网页设计配色应用.docx_第4页
第4页 / 共70页
网页设计配色应用.docx_第5页
第5页 / 共70页
网页设计配色应用.docx_第6页
第6页 / 共70页
网页设计配色应用.docx_第7页
第7页 / 共70页
网页设计配色应用.docx_第8页
第8页 / 共70页
网页设计配色应用.docx_第9页
第9页 / 共70页
网页设计配色应用.docx_第10页
第10页 / 共70页
网页设计配色应用.docx_第11页
第11页 / 共70页
网页设计配色应用.docx_第12页
第12页 / 共70页
网页设计配色应用.docx_第13页
第13页 / 共70页
网页设计配色应用.docx_第14页
第14页 / 共70页
网页设计配色应用.docx_第15页
第15页 / 共70页
网页设计配色应用.docx_第16页
第16页 / 共70页
网页设计配色应用.docx_第17页
第17页 / 共70页
网页设计配色应用.docx_第18页
第18页 / 共70页
网页设计配色应用.docx_第19页
第19页 / 共70页
网页设计配色应用.docx_第20页
第20页 / 共70页
亲,该文档总共70页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

网页设计配色应用.docx

《网页设计配色应用.docx》由会员分享,可在线阅读,更多相关《网页设计配色应用.docx(70页珍藏版)》请在冰点文库上搜索。

网页设计配色应用.docx

网页设计配色应用

网页设计配色应用

网页页面中总是由具有某种内在联系的各种色彩,组成一个完整统一的整体,形成画面色彩总的趋向,称为色调。

也可以理解为色彩状态。

色彩给人的感觉与氛围,是影响配色视觉效果的决定因素。

  为了使网页的整体画面呈现稳定协调的感觉,以便充分的掌握其规律来更好的分析学习,我们把视觉角色主次位置分为如下几个概念,以便在网页设计配色时更容易操纵主动权。

  ■主色调

  页面色彩的主要色调、总趋势,其他配色不能超过该主要色调的视觉面积。

(背景白色不一定根据视觉面积决定,可以根据页面的感觉需要。

  ■辅色调

  仅次与主色调的视觉面积的辅助色,是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。

 

  ■点睛色 

  在小范围内点上强烈的颜色来突出主题效果,使页面更加鲜明生动。

  ■背景色 

  衬托环抱整体的色调,协调、支配整体的作用。

    →色调网页例图:

  

  本部分小节:

   一个页面的色彩角色主要是根据其面积多少的来区别主次关系、达到最终目的的。

  当不同的颜色使用的面积相当,这个页面容易呈现枯燥单调之感,而没有局部细节的变化。

当一个页面使用的颜色过多、面积大小用得过于琐碎,这个页面容易呈现花哨、主次不分没有整体的感觉。

  为页面设计配色的时候,应根据主题内容主次需要,各颜色有其各自的功能角色--面积使用最多的、最少的、不多不少的,加上冷暖的适度安排,纯度明度的合理变化,遵循这条原则,网页配色定能得心应手。

  下一节我们详细介绍各种色彩的对比方式和效果

网页设计配色应用——色彩的对比

网页页面中总是由具有某种内在联系的各种色彩,组成一个完整统一的整体,形成画面色彩总的趋向,称为色调。

也可以理解为色彩状态。

色彩给人的感觉与氛围,是影响配色视觉效果的决定因素。

  为了使网页的整体画面呈现稳定协调的感觉,以便充分的掌握其规律来更好的分析学习,上次我们介绍了视觉角色主次位置的几个概念,本节我们介绍色彩的对比。

对比与调和就是形式美的变化与统一规律

  在一定条件下,不同色彩之间的对比会有不同的效果。

在不同的环境下,多色彩给人一种印象,色彩单一给人另一种印象。

  各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。

红、黄、蓝三种颜色是最极端的色彩,它们之间对比,哪一种颜色也无法影响对方。

  很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比,实际色彩对比范畴不局限于这些。

是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别,使网页色彩配合增添了许多变化、页面更加丰富多彩。

  色彩的对比规律大致有以下几点:

  ■色相对比

  是指因色相之间的差别形成的对比。

当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容及效果等,这样才能增强其表现力。

不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和。

越接近补色,对比效果越强烈。

 

→色相对比网页例图:

001

色相对比分析:

  主要是以绿色与蓝色之间的色相对比。

从HSB数值上可看出嫩绿色的S纯度高B亮度也很高,因此艳丽的颜色作为背景与前景纯度稍低的墨绿和轱蓝色形成色相之间的对比。

前景的墨绿虽然纯度达到最高值100%,比主色调高不少,但是因为亮度低,因此色彩显示没有主色调明艳。

  结论:

  该页面色相的对比,主要作用于前景与背景的对比、局部与整体的对比。

■明度对比

  明度对比可分为:

彩色差的明度对比及非彩色差的明度对比 

是指色彩之间明暗程度的差别而形成的对比。

是页面形成恰当的黑、白、灰效果的主要手段。

明度对比在视觉上对色彩层次和空间关系影响较大。

例如柠檬黄明度高,蓝紫色的明度低,橙色和绿色属中明度,红色与蓝色属中低明度。

→明度对比网页例图:

002

  明度对比分析:

(非彩色差)

  严格来说,该页面应该是黑白灰色非色彩构成,摄影图片中的人物衣服为灰色,相对单纯的黑白对比柔和舒适于视觉。

能使页面显得更单纯、统一,形成另一道独特的风景。

网页设计配色应用——色彩的对比

(2)

■纯度对比

  是指不同色彩之间纯度的差别而形成的对比。

色彩纯度可大致分为高纯度、中纯度、低纯度三种。

未经调和过的原色纯度是最高的,而间色多属中纯度的色彩,复色其本身纯度偏低而属低纯度的色彩范围。

纯度的对比会使色彩的效果更明确肯定。

 

→纯度对比网页例图:

http:

//  

纯度对比分析:

  整个页面看起来异常艳丽刺激然而又非常的协调。

以上数值主要选取了几种较有代表性的颜色。

  大家注意看,以上色彩除了粉红色,其他几组颜色都是高饱和度高亮度的颜色,因此充分的发挥出了色彩的艳丽程度。

包括粉红色在内的几种灰色阶,在中间起到了和谐作用。

白色能拉开相近色阶的空间及明快页面的作用,在这里可以说是功不可没。

  结论:

  页面实际上用了不少颜色,配色大胆。

抓住颜色主次冷暖的安排,适度再加上和谐的过渡色灰色,实现了作者对该页面的轻松配色。

从多种高纯度的搭配协调能力上看,足可见作者对色彩设计搭配不一般的功底。

  这类网页配色非常能够体现出一个网站页面产品个性,配色难度大。

让人过目难忘。

网页设计配色应用——色彩的对比(3)

■补色对比

  将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置,使色彩感觉更为鲜明,纯度增加,称为补色对比。

 

→补色对比网页例图:

补色对比分析:

  由冷色系的绿色、蓝色组成大背景环境,纯度较低。

前景主要是突出产品、文字信息内容的大红色形成补色对比效果,RGB的R255数值与HSB是H为零,数值显示非常明确,标准的大红色。

纯度亮度非常高,达到最高值,加之白色的勾边,使得红色更为凸显,更易于视觉对信息的迅速捕捉。

  结论:

  对比色的合理搭配,能拉开前景与背景的空间感,突出页面主体物。

尤其是红色在主体物的运用,能迅速传递视觉的效果

网页设计配色应用——色彩的对比(4)

■冷暖对比

  是指不同色彩之间的冷暖差别形成的对比。

色彩分为冷、暖两大色系,以红、橙、黄为暖色体系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。

另外,色彩的冷暖对比还受明度与纯度的影响,白光反射高而感觉冷,黑色吸收率高而感觉暖。

 

→冷暖对比网页例图:

001

冷暖对比分析:

  以上这几组颜色乍一看感觉鲜艳程度都差不多,但是通过观察它们的数值发现饱和度都有相差,然而明度相近,因此它们给人造成的视觉感受几乎是相同的。

该页面冷暖颜色较为丰富,橙和蓝是对比最强烈的补色,其次是倾向不够明显的补色黄、紫。

明度不同的两个绿色起到了冷暖视觉的过渡作用。

主色调的浅蓝色亮度较高,让页面不易给人沉闷的感觉。

结论:

  冷暖对比的应用,通常在休闲娱乐网站、食品网站出现比较多。

  将这两个色系的色彩安排在同一画面时,其对比效果极为强烈。

通常初学者较容易使两色相互排斥,导致画面色调不谐调。

一般我们采用两种调和的方法。

 

  纯度调整

  降低冷暖两色纯度。

用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配,或者加入补色的谐调,也都能很好的起到协调的效果。

→纯度调整网页例图:

002 

纯度调整分析:

  主色调的橙色,添入了少许黑色做渐变背景色,降低了纯度。

辅助色的蓝色是橙色的补色,主要起的是使得整个页面过多的暖色降低协调于整体的效果,及背景色的棕色都分别提暗降低纯度。

而左上角的黄色则通过提高了亮度来降低纯度。

一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑,纯度亮度很高的点睛色红色就起到了这个作用。

  结论:

  纯度的调整主要是通过明度黑、白、灰变化来调整画面的层次,适当的加入补色也是其中的一个办法。

  面积调整

  主次的面积区分。

根据设计主题的需要,在画面的面积上以一方为主色,于是就掌控画面的色调作用,其他的颜色在使用面积上拉开距离,使画面的主次关系更突出,在统一的同时富有变化。

→面积调整网页例图:

003

面积调整分析:

  作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。

  结论:

  大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面

■面积对比

  同一种色彩,面积越大,明度、纯度越强,面积越小,明度、纯度越低。

面积大的时候,亮的色显得更轻,暗的色显得更重。

这种现象称为色彩的面积效果。

面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。

 

  面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。

 

→面积对比网页例图:

004

面积对比分析:

  作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。

  结论:

  大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面。

网页设计配色应用——色彩的调和

(1)

网页页面中总是由具有某种内在联系的各种色彩,组成一个完整统一的整体,形成画面色彩总的趋向,称为色调。

也可以理解为色彩状态。

色彩给人的感觉与氛围,是影响配色视觉效果的决定因素。

  为了使网页的整体画面呈现稳定协调的感觉,以便充分的掌握其规律来更好的分析学习,我们前面介绍了色调的视觉角色主次位置的几个概念,也介绍了色彩的对比。

今天我们介绍色彩的调和。

  两种或两种以上的色彩合理搭配,产生统一谐调的效果,称为色彩调和。

色彩调和是求得视觉统一,达到人们心理平衡的重要手段。

 

  调和就是统一,下面介绍的四种方法能够达到调和页面色彩的目的。

  ■同种色的调和

  相同色相、不同明度和纯度的色彩调和。

使之产生秩序的渐进,在明度、纯度的变化上,弥补同种色相的单调感。

  →同种色的调和网页例图:

同种色的调和分析:

  同种色给人的感觉是相当协调的。

它们通常在同一个色相里,通过明度的黑白灰或者纯度的不同来稍微加以区别的,产生了及其微妙的韵律美。

为了不至于让整个页面呈现过于单调平淡,有些页面则是加入极其小的其他颜色做点缀。

该页面使用了同种色的黄色系,淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。

  结论:

  同种色被称为最稳妥的色彩搭配方法

网页设计配色应用——色彩的调和

(2)

■类似色的调和

  在色环中,色相越靠近越调和。

主要靠类似色之间的共同色来产生作用。

→类似色的调和网页例图:

http:

//www.solar1.org 

类似色的调和分析:

  类似色相较于同类色色彩之间的可搭配度要大些,颜色丰富、富于变化。

  以上页面主要取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。

虽然主色调的米黄色在页面中使用面积最大,但是我们看到由于它的明度非常高,饱和度就降低了,因此在页面中处在不明显的角色。

而绿色的纯度最高,且使用面积次之,页面显示较显眼,因此用于次级导航位置上。

整个页面主次的视觉引导分明。

  结论:

  不是每种主色调都是极其显眼的位置,通常多扮演着用于突出主体的辅助性配角。

而重要角色往往在页面中用的份量极少,却又起到突出主体的作用

网页设计配色应用——色彩的调和(3)

■对比色的调和

  调和方法有:

  1、提高或降低对比色的纯度;

  2、在对比色之间插入分割色(金、银、黑、白、灰等);

  3、采用双方面积大小不同的处理方法;

  4、对比色之间加入相近的类似色。

  →对比色的调和网页例图:

对比色的调和分析:

  基本上可以说是黄色和紫色的对比色做页面的主要色调。

黄色紫色组合在网页中使用率较低,原因是这组颜色适用范围相对其他两组对比色要小很多,配色难度也较两组大。

  这里黄色加入了红色呈中黄色,紫色加入了红色,偏玫瑰色,所以这组颜色不是严格意义上的对比色,也因此使这组颜色看起来协调、舒服。

这个页面都调低了亮度使整体降低了纯度,缓和视觉刺激。

白色是这组对比色里加入的协调色。

  结论:

  从上面的分析我们可以知道,通过上面的这些色值调配--当需要使用这组对比色配色时候该如何达到协调的目的。

  不是对比色为主色调的页面就一定会有不舒服的感觉的,主要可以通过调低亮度、降低饱和度、加入少许白色来调和

网页设计配色应用——色彩的调和(4)

■渐变色的调和

  渐变色实际是一种调和方法的运用。

是颜色按层次逐渐变化的现象。

色彩渐变就像两种颜色间的混色,可以有规律地在多种颜色中进行。

暗色和亮色之间的渐变会产生远近感和三维的视觉效果。

 

→渐变色的调和网页例图:

  渐变色的调和分析:

  该页面背景使用了渐变的效果,增加了视觉空间感。

在导航栏、广告区域、产品技术的大标题块,都使用了渐变的技术手法来表达,产生三维的视觉效果,统一了整个页面的设计语言,也是区别于其他网站页面的个性体现,达到让人印象深刻的目的。

  结论:

  渐变色能够柔和视觉,增强空间感,体现节奏和韵律美感,统一整个页面的目的。

  除了统一当然也可以起到变化页面视觉形式的作用。

该设计语言可做需要的时候适当的使用。

 

  本部分小结:

  本节主要对色彩的对比与调和做了实例分析。

例如当页面平淡单调,需要用对比手法做些变化来丰富页面的色彩设计;当页面变化过多,显得刺眼、凌乱,可以通过以上介绍的调和方法进行调整,使得页面看起来更统一协调。

  ● 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。

  ● 颜色平淡可加入适当类似色对比色来使页面产生变化。

颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。

  ● 对比色的搭配并不是就是说是绝对值的红或者绿,蓝或橙、黄或紫。

对比色的第一视觉倾向越明显配色难度就越大,也就是说越难调和;反之,倾向越不明显的对比色越容易调和。

请参照刚才对比色调和页面分析例子方法。

  ● 不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色,主要是根据色彩相互之间的搭配关系来体现的。

  ● 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配,容易产生个性效果,那叫玩色彩了,限于色彩运用得非常熟练的朋友,但不推荐初学者使用。

网页设计配色应用实例剖析——红色系

(1)

红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的颜色。

红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。

在众多颜色里,红色是最鲜明生动的、最热烈的颜色。

因此红色也是代表热情的情感之色。

鲜明红色极容易吸引人们的目光。

  红色在不同的明度、纯度的状态(粉红、鲜红、深红)里,给人表达的情感是不一样的。

  在网页颜色的应用机率中,根据网页主题内容的需求,纯粹使用红色为主色调的网站相对较少,多用于辅助色、点睛色,达到陪衬、醒目的效果。

通常都配以其他颜色调和。

红色相对于其他颜色,视觉传递速度最快。

由于以上的这些红色传达出的特性,因此人们喜欢用红色作为警示符号的颜色,例如:

消防、惊叹号、错误提示等等。

 

  为了让大家对红色的理解做更好的区别,下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。

网页设计配色应用实例剖析——红色系

(2)

朱红色在红色系里倾向黄色方向,是大红色加入黄色而得。

在色环表中,纯红色在HSB里为0度,往360度方向呈现的是冷红色系,0度方向为黄色系。

  整个页面里,主色调朱红色面积非常大、确定明显,辅助色主要由黑色、深红构成,(数值上选取的是深红色做标示)。

主色调的R呈现出255最高数值,S中100%,充分标明了红色最高特性。

辅助色的深红R为222,B87%,显示其充当辅助角色的这一特性。

 结论:

  背景色朱红由于红色特性明显,饱和度、明度都非常的高,这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性,也同样能达到突出前景主要图片内容的目的。

点睛色主要用于标志的突出上,其他导航文字、图片的部分运用等,调和并达到了不至于使得整个页面刺激中又透出的沉闷感。

 

  这类颜色的组合比较容易使人提升兴奋度,红色特性明显,这一醒目的特殊属性,比较被广泛的应用于食品、时尚休闲等等类型的网站

网页设计配色应用实例剖析——红色系(3)

深红色在原有的红色基础上降低了明度而得,是红色系中的明度变化。

通过上图的数值显示看出明度较低。

  这类颜色的组合随着明度的变暗,比较容易制造深邃、幽怨的故事气氛。

传达的是稳重、成熟、高贵、消极的心理感受。

  这个页面背景色运用了纹样,是以目前选取的主色调颜色和明度较暗的深红色结合而的,使得明度稍暗。

  数值上看,主色调也就是背景色的饱和度较高,但是由于降低了明度,颜色变得较沉稳。

辅助色RGB添加了适量的其他颜色,G和B数值区别不大,因此饱和度降低,颜色趋于柔和稳定。

点睛色的加入提亮,页面视觉效果强化。

  结论:

  前景色通常要较明显的区别于背景色,达到台前的宣传目的。

当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果

网页设计配色应用实例剖析——红色系(4)

玫瑰红色在色环上实际已经接近冷色,是红色系中的色相的微妙变化,是红色系里的冷色系。

我们在HSB中H数值可看出,0度为红色的最高值,越接近0度数值红色特性越明显,否则逐渐冷色倾斜,而该数值偏离0度稍远。

  这个页面主要由两种不同明度、纯度的玫瑰色调组成。

两色数值显示,我们看到RGB数值中R呈现的数值最高,红色特性较明显。

辅助色调的玫瑰色,加入少许G,色调向冷色稍微偏移,也由于加入了G,在HSB数值里,饱和度轻微减弱,但随着明度增加,色彩趋于艳丽,符合突出前景的目的。

主色调虽然纯度达到最高饱和,但由于明度降低,相对于辅色调较沉稳,适合做背景色。

  数值上看,由于背景色和前景色的明度较为接近,加入白色边框,强烈了前景色于背景色的区分,加强视觉强化效果。

  结论:

  背景色和前景色的明度较接近,颜色给人的视觉表象较闷,加入少量白色划分使得色彩引导的主次块面更分明,页面明快许多。

  这类颜色的组合多用于女性主题,例如:

化妆品、服装等,容易营造出娇媚、诱惑、艳丽等气氛

网页设计配色应用实例剖析——红色系(5)

粉红色主要是红色系中的明度的高亮度的变化。

是红色系里的冷色系。

RGB数值显示明度较高,因此HSB中S纯度下降,几乎呈最低值。

 

  主色调和辅助色调数值对比可知:

主色调混合的G的份量较多且明度较高,因此纯度较低,色调柔和,在框架区域内较适合做类似背景色的辅助性岗位。

辅助色R数值比主色调的R数值稍高,红色性稍明显,加入的G相对少,B明度稍低,因此相对纯度要高,辅色位置应用在框架区域的导航位置,起到突出导航作用。

点睛色突出标志及购物主体的作用。

  背景白色除了突出前面粉红色主体的作用,在前景也有出现,背景色与前景色的相互牵制,减少空间距离的效果。

  结论:

  RGB数值中,数值同时呈现相近的高数值时,色彩越柔和协调,纯度相对降低,页面呈高明度灰色段,视觉刺激缓慢。

这里以粉红色为主色调的页面,女性主题内容特征倾向明显。

这组粉红色页面里,由于纯度都较低,任何一个纯度高小面积使用的颜色都能起到点睛的效果。

  这类颜色的组合多用于女性主题,例如:

化妆品、服装等,鲜嫩而充满诱惑,传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受

网页设计配色应用实例剖析——红色系(6)

严格上来说,橙色是蓝色的对比色,这组对比色中的橙红色倾向于红色。

  该页面的背景色使用纹理图形由深至浅的制造空间范围,模拟真实环境。

这里的数值选取其中间色值来分析,由于背景蓝色B的明度较低,又由于冷色比暖色视觉传递速度慢的特点,很适合作为辅助角色突出前景的应用。

主色调橙红色R的数值达到最高值255,SB都达到了最高值100%,视觉刺激非常强烈,运用大面积高纯度来突出蓝色产品主体物,又形成了一次页面上的视觉对比--背景蓝色与前景橙红色,前景橙红色与产品主体物蓝色的二次对比。

  点睛色白色,使这组对比色在页面中表现得更协调,调和的作用。

  结论:

  颜色的深浅除了能营造空间感的效果,也能辅助性的制造主次效果。

颜色除了性能对比,面积对比、位置安排也是制造主次效果的关键。

  这组橙色蓝色对比色在网页上比其他两组对比色红色绿色,黄色紫色应用得多,能迅速的传达网站主题内容、网页主体,容易增添强烈的兴奋度,多用于食品、休闲娱乐、产品等,但却又是跨越于各行业的主题网站,适用的范围非常大

网页设计配色应用实例剖析——红色系(7)

红色与黑色的搭配在商业设计中,被誉为商业成功色,鲜亮的红色多用于小面积的点缀色。

  从数值上看,红色添加了G和B饱和度稍降低,因此该红色大面积使用不会觉得刺激或不舒服,这也与背景色蓝色加入了适量渐变的技法,使得页面的节奏呈现缓和。

辅助色黑色的加入,与深红色在明度拉大,页面色彩元素相对活跃不少。

  点睛色白色,所放的位置和面积,起到平衡黑色位置面积的作用,当然也达到醒目的效果。

  结论:

  这里颜色位置的摆放,起到平衡页面视觉,突出主题效果。

背景色加了渐变效果、整体与前景人物黑色对比呈浅色,前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系,构成空间环境的视觉效果。

  这组配色中,红色是降低了明度的深红色,为主色调和背景色的大面积使用。

红黑搭配色,常用于较前卫时尚、娱乐休闲、电子商务等等要求个性的网页设计配色里,也又有用于部分政治、新闻的页面

网页设计配色应用实例剖析——红色系(8)

这组配色,达到最高纯度的红色做小面积的使用。

虽然这里选取了红色做为辅助色,但从整个页面的功能和所表达的主题来看,红色可以作为该页面的点睛色,强烈的突出了主题。

  红色的数值显示,HBS中的H为0度,达到红色特性的最高值,S为最高饱和度100%,在明度最低的黑色背景的衬托下,其特性发挥到极致,页面醒目而响亮。

红色与黑色本是对比强烈的配色,但由于背景灰色的作用,缓和整个页面的视觉刺激度。

背景色灰色RGB数值变化不大,因此颜色纯度较低、趋于平稳柔和,辅助前景内容的呈现。

  白色让前景和背景的划分更明显,活跃页面中的色彩元素。

  结论:

 

  使用面积小的纯度高的颜色在非色彩的黑色和灰色上,是产生变化页面的颜色,达到容易突出主题的目的。

   本部分小节:

   ● 红色在RGB数值的R为255左右,HSB数值的H中为0度左右,达到红色最高值。

随着纯度的提高、亮度的适度增加,它易于迅速的传达、醒目性的特征发挥得越明显。

和其他颜色一样,颜色相互混合的越多,明度越低,饱和度越低,视觉冲击力越弱。

   ● 颜色的对比:

对比色红色绿色的搭配,红色的特性发挥得越明显。

绿叶衬红花的效果。

另外红与黑的搭配,也较能展现红色的魅力。

   ● 根据主题的需要,除了对比色的应用,还有面积上、位置上的对比应用,也能很好的配合达到突出主题产品主体物的目的

网页设计配色应用实例剖析——橙色系

(1)

橙色具有轻快、欢欣、收获、温馨、时尚的效果,是快乐、喜悦、能量的色彩。

  在整个色谱里,橙色具有兴奋度,是最耀眼的色彩。

给人以华贵而温暖,兴奋而热烈的感觉,也是令人振奋的颜色。

具有健康、富有活力、勇敢自由等象征意义,能给人有庄严、尊贵、神秘等感觉。

橙色在空气中的穿透力仅次于红色,也是容易造

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > IT计算机 > 电脑基础知识

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2