网页设计配色

一、网页设计配色系列简析--基础部分

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

在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法。这说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。

■ RGB

RGB是表示红绿蓝又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓"多少"就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示从0至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）：也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。

明度的递增

明度分析：

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

结论：

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

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

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

纯度分析：

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

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

结论：

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

常用配色基本概念及精彩相关实例剖析

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

色环

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

三原色

■原色：

也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调出其他颜色。根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。

黄色分析：选取主色调黄色为例。RGB中RG最高255，HSB中的SB也最高100%，页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。

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

红色分析：

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

结论：

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

蓝色分析：

RGB中B131与 R2、G83混合，蓝色纯度降低。HSB中H203°，三原色的纯蓝为240°，蓝色的色相偏离较大，加上B为51%的明度，颜色偏暗，因此视觉冲击力较弱。页面沉稳、凝重。

结论：

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

间色

■间色：

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

间色分析：

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

RGB上绿色达208，混合R189，因此颜色偏黄绿色，由于添加B18，饱和度相对降低。玫瑰色中R最高，与B109混合为主要组成色，添加G27，纯度偏高。橙色中R255，混合了G145，添加B34，饱和度稍降低。紫色是蓝色和红色调配成，B170，R148，混色份量相当成为紫色，由于添加G87，也是4组颜色中的间色混合第三色数值最高的，HSB中S相对其他三色降低很多，因此颜色相对其它3种较沉稳，缓和。

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

结论：

间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。

■复色：

也叫"复合色"。复色是由原色与间色相调或由间

色与间色相调而成的"三次色"，复色纯度最低，含灰

色成份。复色包括了除原色和间色以外的所有颜色。

复色分析：

4种颜色中深绿色和赭石色为复色，其它2颜色，是更好的说明复色的特性，如果没有另外两种非复色搭配，页面配色就可能出现不舒服的感觉。深绿及赭石这两种复色的数值一个三位数，另外两者成份相当，都是两位数。RGB数值差距较接近、不明显，色阶趋于直线平稳，呈灰阶。HSB中SB也非常接近，是符合复色特性的必须条件。

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

补色

■补色：

是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。如：红色是绿色的补色；橙色是蓝色的补色；黄色是紫色的补色。补色的运用可以造成最强烈的对比。

补色分析：

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

RGB中绿色符合复色的条件，因此该颜色明度稍暗、纯度较低，红色R118构成了该色的主要成份，G72，B61数值接近，纯度和亮度相对绿色较高，因此2色在构成色彩空间差距上拉大。HSB中S数值也显示出，它们的饱和度相差较大。

结论：

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

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

邻近色

■邻近色：

是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围缩小了一点。例如红色和黄色，绿色和蓝色，互为邻近色。

邻近色分析：

用红色、黄色为邻近色示例，主要在色相上区别，丰富了页面色彩的变化。RGB上5色R的数值都很高，仅是微妙的不同。浅黄色的B138，因此HSB纯度S最低46%；5色RGB中G都不同，色相、明度也产生相应的不同。5色都有在同一频率的变化。

结论：由于是相邻色系，视觉反差不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重的同时不失活力，是一种恰到好处的配色类型。

同类色

■同类色：

比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。

同类色分析：

选用红色系4种同类色示例，主要在明度上做区别变化。

4色RGB中的R都很高且相当。从HSB数值看出，明度越高的颜色饱和度越低。

这4种同类色相来看，明度在强中弱的节奏中的缓和的进行变化。

结论：

看上去给人温柔、雅致、安宁的心理感受，该同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。

暖色

■暖色：

指的是红、橙、黄、这类颜色。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。

暖色分析：

由于是暖色系，3种颜色RGB中R为主导，B都为0，暖度强度倾向在G添加黄色变化中，较规律的数值变化、较有视觉节奏感。HSB中纯度S和明度B都达到最高值，是鲜艳夺目的搭配色组合。

结论：

高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。

充分体现了暖色系的饱和度越高，其温暖特性越明显的性格。

冷色

■冷色：

指的是绿、青、蓝、紫等颜色，冷色系亮度越高，其特性越明显。能够使人的心情平静，清爽，恬雅。

冷色分析：

网页选用邻近色系蓝色绿色和同类色的明度变化。3种蓝色系的RGB数值从二位数到三位数，随着明度的递增的同时，由低到高在有规律的变化。HSB的SB也相对随着变化，纯度S都不大，因此这几组色彩相对含蓄柔和。

绿色系RGB数值G明显，相应添加了高亮度的黄色R，使色彩较鲜艳明快。HSB高纯度高亮度的特性。结论：

冷色系的亮度越高，其特性越明显。单纯冷色系搭配视觉感比暖色系舒适，不易造成视觉疲劳。蓝色、绿色是冷色系的主要系，带来一股清新、祥和安宁的空气。

本部分小结：

●三原色视觉冲击力最强，也最是刺目的，容易制造冲突、烦燥、不舒适的心情，是较难掌握的配色，大面积大范围使用要慎重。间色是三原色中的两色调配二次，于原色和复色之间属于中性色，视觉冲击力次之，颜色的刺激缓和不少给人舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使用得比较多的颜色。复色是由两种间色或原色与间色相混合而产生的颜色，呈灰色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配好了，能体现出高层次高素养的成熟特性魅力，也称为高级灰，是很经看的颜色。

由上可知，颜色相互混合的越多，饱和度越低，视觉冲击力越弱。

●色彩运用到一定程度后，应该逐渐认识到在一个环境、区域范围里，色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下，黄色可以说这个时候是呈暖色，而出现在桔红、朱红、深红这几个区域环境下，黄色可以说在这个时候是呈冷色。同样的，蓝色相对绿色是冷色，紫色相对蓝色是暖色等等。

●RGB的数值越接近，色阶趋于直线平稳，呈灰阶，网页对视觉的刺激性越缓慢、柔和；RGB三者的数值差距越大，色阶曲线波动就大，网页对视觉的刺激性越迅速、强烈。HSB数值中SB相应数值越高，视

觉刺激度越强烈。抓住以上这些规律及色彩特性，在以后的网页设计配色中，根据不同的需要配置不同的颜色，来达到某些不同的目的和效果。

通过RGB数值和HSB数值的计算，能帮助更科学理性的分析判断，为的是更准确的研究分析网页设计配色的协调性、合理性、掌握其规律性。

有经验的设计师通常仅仅凭目测、直觉，就能随心所欲的掌控色彩的配置了。但如遇到困惑，不防也使用一下模式计算法。

二、网页设计配色系列简析

网页设计配色应用——色调

前面介绍了常用的电脑色彩模式RGB、HSB，以及色彩的三大属性，还有常用配色的基本概念和相关实例剖析。今介绍应用部分，本节介绍调色。

网页页面总是由某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。

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

■主色调

页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。（背景白色不一定根据视觉面积决定，可以根据页面的感觉需要。）

■辅色调

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

■点睛色

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

■背景色

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

本部分小节：

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

当不同的颜色使用的面积相当，这个页面容易呈现枯燥单调之感，而没有局部细节的变化。当一个页面使用的颜色过多、面积大小用得过于琐碎，这个页面容易呈现花哨、主次不分没有整体的感觉。

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

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

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

在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。

各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。

很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。

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

■色相对比

是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。

色相对比分析：

主要以绿色与蓝色之间的色相对比。HSB嫩绿色S纯度高B亮度也很高，因此艳丽的颜色作为背景与前景纯度稍低的墨绿和轱蓝色形成色相之间的对比。前景的墨绿虽然纯度达到最高值100％，比主色调高不少，但是因为亮度低，因此色彩显示没有主色调明艳。

结论：

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

■明度对比

明度对比可分为:彩色差的明度对比及非彩色差的明度对比

是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。

明度对比分析：（非彩色差）

严格来说，页面是黑白灰色非色彩构成，图片中人物衣服为灰色，相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一，形成另一道独特的风景。

■纯度对比

是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。

纯度对比分析：

页面看起来异常艳丽刺激然而又非常的协调。主要选取了几种较有代表性的颜色。

以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，充分发挥出了色彩的艳丽。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色拉开相近色阶的空间，明快页面。

结论：

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

■补色对比

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