网页设计 网页设计配色基础:RGB与HSB

网页设计配色基础:RGB与HSB

在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法。

这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。

为了使下面的网页配色分析更易于理解,我们先来了解色彩的RGB模式和HSB模式。

■ RGB

RGB是表示红色绿色蓝色又称为三原色光,英文为R(Red)、G(Green)、B(Blue),在电脑中,RGB的所谓"多少"就是指亮度,并使用整数来表示。

通常情况下,RGB各有256级亮度,用数字表示为从0、1、2至255。虽然数字最高是255,但0也是数值之一,因此共256级。按照计算,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

对于单独的R或G或B而言,当数值为0时,代表这种颜色不发光;如果为255,则该颜色为最高亮度。因此当RGB三种色光都发到最强的亮度,纯白的RGB值就为255,255,255。屏幕上黑的RGB值是0,0,0。R,意味着只有红色存在,且亮度最强,G和B都不发光。因此最红色的数值是255,0,0。同理,最绿色就是0,255,0;而最蓝色就是0,0,255。黄色较特殊,是由红色加绿色而得就是255,255,0。(详细分析请参考赵鹏所写的《电脑美术设计中的色彩模式详解》)

  

纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0

  

红色数值为R255,G0,B0绿色数值为R0,G255,B0

  

蓝色数值为R0,G0,B255黄色数值为R255,G255,B0

RGB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式,只要是在显示器上显示的,图像最终就是以RGB方式出现。

■ HSB

是颜色分为色相、饱和度、明度三个因素。英文为H(Hue)、S(Saturation)B(Brightness)饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到纯白,最低得到纯黑。一般浅色的饱和度较低,亮度较高,而深色的饱和度高而亮度低。

下一节我们讲讲色彩三属性以及一些网页配色实例。

许多初学者对色彩的属性和原色概念模糊,容易混淆,下面我们就先从几个概念入手。今天介绍色彩的三个属性。

颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色,而其他所有颜色均属于彩色。从心理学和视觉的角度出发,彩色具有三个属性:色相、明度、纯度(彩度)。



基本色相环

■ 色相(Hue):

也叫色调,指颜色的种类和名称,是指颜色的基本特征,是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系,只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。

■ 明度(Value):

也叫亮度,指颜色的深浅、明暗程度,没有色相和饱和度的区别。不同的颜色,反射的光量强弱不一,因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。



明度的递增

→ 明度网页例图:http://www.once-upon-a-forest.com



明度分析:

从上图网页所选取的4个主要色块的RGB数值来看,这4块色彩组合显示的RGB数值很高,接近于最高值255。RGB相互间的数值相近,由于有RG的高数值与B高数值混合,整个网页给人的感觉非常协调,柔和雅致,心情愉悦。

结论:

RGB同时呈现相近的高数值时,相近等量的色彩相互混合,页面呈高明度灰色段,协调的柔和状态,令人遐想,对视觉刺激是缓慢的,适合长时间观看。但由于数值接近,因此色阶平稳,同时存在着不够醒目的状态。

■ 纯度(Chroma):

也叫饱和度,指色彩的鲜艳程度。原色最纯,颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色,加入了白色或者黑色,使得它的纯度低,颜色趋于柔和、沉稳。



加入黑色的纯度变化和加入白色的纯度变化

→ 纯度网页例图:http://www.minimalweb.de



纯度分析:

上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。

我们看到蓝色S数值呈现99%具有相当高的饱和度,B明度为79%,玫瑰色S饱和度数值为85%,B明度为97%。当饱和度和明度同时呈最高值时,色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低,饱和度较高,而玫瑰色的明度较高,该颜色纯度随之加强,因此玫瑰色相对蓝色对人的视觉刺激更强烈。

结论:

HSB模式中S和B呈现的数值越高,饱和度明度越高,页面色彩强烈艳丽,对视觉刺激是迅速的,醒目的效果,但不易于长时间的观看。以上两种颜色的S数值接近,是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态,相对于SB来说,意义不大。

下一节我们讲:常用配色的基本概念与实例分析。

在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法。

这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。

前面我们介绍了常用的电脑色彩模式RGB、HSB,以及色彩的三大属性,今天我们介绍常用配色的基本概念和相关实例剖析。



色环

色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色,就可以得到一个色彩环。色环通常包括12种不同的颜色。



三原色

■ 原色:

也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多,变化丰富,但这三种颜色却是最基本的原色,原色是其他颜色调配不出来的。除白色外,把三原色相互混合,可以调和出其他种颜色。

根据三原色的特性做出相应的色彩搭配,有最迅速最有力最强烈的传达视觉信息效果。

→ 黄色网页例图:http://www.uni-leipzig.de/studienart/i_flash.htm



黄色分析:

选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值255时,HSB数值中的SB也呈现最高值100%,页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。

结论:

HSB中SB呈现的数值越高,饱和度明度越高,页面色彩强烈艳丽,由于黄色是亮度最高的颜色这一特性,也给人视觉产生强烈刺激的状态,对视觉刺激是迅速的、警戒、醒目的效果,但不易于长时间观看。

→ 红色网页例图:http://www.doritos.com



红色分析:

我们看到RGB中R的数值是227,混合了G30、B40,因此红色的纯度轻微降低,颜色稍偏深红。HSB数值中S显示的饱和度为87%,B为89%,因此颜色还是较为饱和明亮。

结论:

主色R227数值较高的时候,由于混合了G30、B40少许颜色,饱和度明度稍微降低,视觉刺激减弱,红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性,该网页整体看来仍然厚重而热烈的表达了主题。

→ 蓝色网页例图:http://www.voxhon.com



蓝色分析:

RGB数值中B蓝色的数值是131与 R2、G83相混合,蓝色的纯度降低。结合HSB中数值H色相目前显示的是203°,而三原色的纯蓝为240°来看,蓝色的色相偏离较大,加上B为51%的明度,颜色偏暗,因此视觉冲击力较弱。页面沉稳、凝重。
【网页设计】网页设计配色基础:RGB与HSB

结论:

当蓝色色相偏离于三原色的纯蓝时,视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性,适合用于表达成熟、稳重、安静的网页设计主题。蓝色在网页设计里也是使用得较频繁的颜色。



间色

■ 间色:

又叫"二次色"。它是由三原色调配出来的颜色,是由2种原色调配出来的。红与黄调配出橙色;黄与蓝调配出绿色;红与蓝调配出紫色,橙、绿、紫三种颜色又叫"三间色"。在调配时,由于原色在份量多少上有所不同,所以能产生丰富的间色变化。

→ 间色网页例图:http://cidadefm.clix.pt



间色分析:

上网页例图4种间色搭配一起非常明快、鲜亮。

从RGB数值显示上看,绿色含量较高达到208,混合了R189的黄色光,因此颜色偏黄绿色,由于添加了B18,饱和度相对降低。玫瑰色中R的含量最高,与B109混合为主要组成色,添加了少量的G27黄,纯度偏高。橙色中R的含量很高为255,混合了G145黄为主要组成色,添加了第三色B34,饱和度稍降低。紫色是由蓝色和红色调配而成,B为170,R为148,混色份量相当也就成为了组合紫色这一间色的主要成份,但是由于添加了G87,也是4组颜色中的间色混合第三色数值最高的,HSB中S数值相对其他三色,降低很多,因此颜色相对于其它3种较沉稳,缓和。

以上4组颜色RGB数值的共同点是以两色混合为主,都是三位数值,另外一色份量较少,为两为数值,因此饱和度较高,色相倾向明显。HSB数值的共同点是,除了紫色,其他三色的S饱和度相当,属较高数值,因此视觉刺激也强。

结论:

间色是由三原色中的两原色调配而成的,因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。

间色尽管是二次色,但仍有很强的视觉冲击力,容易带来轻松、明快、愉悦的气氛。



复色

■ 复色:

也叫"复合色"。复色是由原色与间色相调或由间色与间色相调而成的"三次色",复色是的纯度最低,含灰色成份。复色包括了除原色和间色以外的所有颜色。

→ 复色网页例图:http://www.benharper.net



复色分析:

以上4种颜色中深绿色和赭石色为复色,之所以还选择其它2颜色,为的是更好的配合说明复色的特性,如果没有另外两种非复色搭配,页面配色就可能出现肮等不舒服的感觉。

我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数,另外两者成份相当,都为两位数组合而得。RGB之间的数值差距较接近、不明显,色阶较趋于直线平稳,呈灰阶。HSB中SB显示的数值也非常接近,成为符合复色特性的必须条件。

结论:

复色是由两种间色或原色与间色混合而成,因此色相倾向较微妙、不明显,视觉刺激度缓和,如果搭配不当,页面便呈现易脏或易灰朦朦的效果,沉闷、压抑之感,属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感;明度高的多复色(参看明度的网页例图)多用来表示宁静柔和、细腻的情感,易于长时间的浏览。



补色

■ 补色:

是广义上的对比色。在色环上划直径,正好相对(即距离最远)的两种色彩互为补色。如:红色是绿色的补色;橙色是蓝色的补色;黄色是紫色的补色。

补色的运用可以造成最强烈的对比。

→ 补色网页例图:http://www.upsod.org



补色分析:

选用了一组红绿对比色,极赋视觉冲击力、所表现出的性格异常鲜明。

我们看到RGB中绿色的数值显示情况符合复色的条件,因此注定了该颜色明度稍暗、纯度较低的特性,而红色R数值118构成了该色的主要成份,其他G72,B61数值接近,纯度和亮度相对绿色较高,因此2色在构成色彩空间差距上拉大。HSB中2色的S数值也显示出,它们的饱和度相差较大。

结论:

补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用,对比并突出了前景纯度明度较高的面积较小红色的图形,形成了视觉中心重点突出,达到主次分明的主题效果。

红绿、橙蓝、黄紫这三组补色中,前两种使用得最频繁。这三组补色搭配出的最终效果和目的,可以用两个字来概括——强烈!

  

爱华网本文地址 » http://www.aihuau.com/a/25101011/92619.html

更多阅读

《超级兄弟:剑与巫术》详尽图文攻略上

极具特色的动作冒险游戏。具有令玩家印象深入的音画效用,设计上走的是剧场路线,而画面作风则是 8-bit 作风。玩家要扮演游览的剑客,历经沿途一路艰难,最终解开月之谩骂成就武士之路。玩家在游戏中可能还需求解开一些音乐的谜题。 《超

网页课件基础知识 导游基础知识课件

一、网页课件基础知识:1.什么是多媒体CAI课件?多媒体CAI课件是一种根据教学目标设计的,表现特定的教学内容,反映一定教学策略的计算机教学程序。它是一种可以用来储存、传递和处理教学信息,能让学生进行交互操作,并对学生作出评价的教学媒

转载 安达充:梦想与青春的记录者上 _highlong

感谢手打分享~原文地址:安达充:梦想与青春的记录者(上)作者:谭亭  (原文为河北音像出版社出版的《动漫名家系列丛书》中的一部,名为《Season'sWorld 安达充:梦想与青春的记录者》。丛书策划兼总监为兔子,编著为OTAKU工作室,设计为Ghosts,由

转载 入门基础:世界四大耳机品牌厂商

原文地址:入门基础:世界四大耳机品牌厂商作者:得墨特尔demeter世界四大耳机品牌/厂商,它们分别是:德国的拜亚动力(beyerdynamic)和森海塞尔(Sennheiser)、奥地利的爱科技(AKG)、美国的歌德(Grado)。拜亚耳机(beyerdynamic):德国耳机、话筒制造专业

声明:《网页设计 网页设计配色基础:RGB与HSB》为网友缱绻入梦分享!如侵犯到您的合法权益请联系我们删除