网页设计配色基础、应用及实战

【专栏作者简介】

黎芳：科班艺术设计专业高材生，从事网页设计近十年；曾长期从事企业策划工作；长期分析研究网页设计、配色；2000年曾在天极设计在线（design.yesky.com）、《电脑报》发表过数篇文章，2001年开始在蓝色经典论坛任艺术设计版主ID：Redfall；2004年开始做自由职业、自由撰稿人；2005编著《网页设计与配色实例分析》一书。2006年首都师大讲师；目前在着手写第二本书。Email: [e-mail]

注：本专题部分理论节选于本文作者黎芳(Redfall)的《网页设计与配色实例分析》一书的第二部分第五章，由希望电子出版社出版。网上购买：China-Pub

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来说，意义不大。

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

1红黄蓝三原色 配色及实例剖析

点击查看《网页设计配色基础、应用及实战》完整专题

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

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

前面我们介绍了常用的电脑色彩模式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%的明度，颜色偏暗，因此视觉冲击力较弱。页面沉稳、凝重。

结论：

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

2间色、复色、补色

间色

■ 间色：

又叫"二次色"。它是由三原色调配出来的颜色，是由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数值也显示出，它们的饱和度相差较大。

结论：

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

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

3邻近色、同类色

邻近色

■ 邻近色：

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

→ 邻近色网页例图：http://www.artoyz.com

邻近色分析：

上图选用了红色、黄色为邻近色示例，主要在色相上做区别丰富了页面色彩上的变化。

RGB数值上看，以上5色R的数值都很高，仅是微妙的不同。其中浅黄色的B为138，因此在HSB数值中纯度S显示最低，为46%；5色RGB中G的数值都不同，色相、明度也产生相应的不同。从数值上分析整体看来，5色都有在同一频率的变化。

结论：

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

同类色

■ 同类色：

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

→ 同类色网页例图：http://www.misspato.com

同类色分析：

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

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

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

结论：

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

4冷色、暖色

暖色

■ 暖色：

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

→ 暖色网页例图：http://www.mrwong.de

暖色分析：

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

结论：

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

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

冷色

■ 冷色：

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

→ 冷色网页例图：http://www.portaldemoda.pt

冷色分析：

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

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

结论：

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

本部分小结：

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

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

● 色彩运用到一定程度后，应该逐渐认识到在一个环境、区域范围里，色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下，黄色可以说这个时候是呈暖色，而出现在桔红、朱红、深红这几个区域环境下，黄色可以说在这个时候是呈冷色。同样的，蓝色相对绿色是冷色，紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求，环境协调度的需要等等做相应的搭配调整。

● RGB三者的数值越接近，色阶较趋于直线平稳，呈灰阶，网页对视觉的刺激性越缓慢、柔和；RGB三者的数值相互间差距越大，色阶曲线波动就大，网页对视觉的刺激性越迅速、强烈。HSB数值中SB相应数值越高，视觉刺激度越强烈。抓住以上这些规律及色彩特性，在以后的网页设计配色中，根据不同的需要配置不同的颜色，来达到某些不同的目的和效果。

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

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

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

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

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

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

■ 主色调

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

■ 辅色调

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

■ 点睛色

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

■ 背景色

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

→ 色调网页例图：http://www.robinssondivision.com

本部分小节：

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

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

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

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

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

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

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

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

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

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

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

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

■ 色相对比

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

→ 色相对比网页例图：http://www.portfolios.com

色相对比分析：

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

结论：

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

■ 明度对比

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

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

→ 明度对比网页例图：http://www.dior.com

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

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

2纯度对比、补色对比

■ 纯度对比

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

→ 纯度对比网页例图：http:// www.havaianas.com

纯度对比分析：

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

大家注意看，以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空间及明快页面的作用，在这里可以说是功不可没。

结论：

页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色。从多种高纯度的搭配协调能力上看，足可见作者对色彩设计搭配不一般的功底。

这类网页配色非常能够体现出一个网站页面产品个性，配色难度大。让人过目难忘。

■ 补色对比

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

→ 补色对比网页例图：http:// www.forthosewholovelife.co.uk

补色对比分析：

由冷色系的绿色、蓝色组成大背景环境，纯度较低。前景主要是突出产品、文字信息内容的大红色形成补色对比效果，RGB的R255数值与HSB是H为零，数值显示非常明确，标准的大红色。纯度亮度非常高，达到最高值，加之白色的勾边，使得红色更为凸显，更易于视觉对信息的迅速捕捉。

结论：

对比色的合理搭配，能拉开前景与背景的空间感，突出页面主体物。尤其是红色在主体物的运用，能迅速传递视觉的效果。

3冷暖对比

■ 冷暖对比

是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色体系，蓝、绿、紫则代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。

→ 冷暖对比网页例图：http:// disney.go.com

冷暖对比分析：

以上这几组颜色乍一看感觉鲜艳程度都差不多，但是通过观察它们的数值发现饱和度都有相差，然而明度相近，因此它们给人造成的视觉感受几乎是相同的。该页面冷暖颜色较为丰富，橙和蓝是对比最强烈的补色，其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡作用。主色调的浅蓝色亮度较高，让页面不易给人沉闷的感觉。

结论：

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

将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。通常初学者较容易使两色相互排斥，导致画面色调不谐调。一般我们采用两种调和的方法。

纯度调整

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

→ 纯度调整网页例图：http:// www.darkelephant.com

纯度调整分析：

主色调的橙色，添入了少许黑色做渐变背景色，降低了纯度。辅助色的蓝色是橙色的补色，主要起的是使得整个页面过多的暖色降低协调于整体的效果，及背景色的棕色都分别提暗降低纯度。而左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑，纯度亮度很高的点睛色红色就起到了这个作用。

结论：

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

面积调整

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

→ 面积调整网页例图：http:// www.upstairz.com

面积调整分析：

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

结论：

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

4面积对比

■ 面积对比

同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。

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

→ 面积对比网页例图：http:// www.parkpack.ru

面积对比分析：

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

结论：

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

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

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

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

两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。色彩调和是求得视觉统一，达到人们心理平衡的重要手段。

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

■ 同种色的调和

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

→ 同种色的调和网页例图：http://www. solar1.org

同种色的调和分析：

同种色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同来稍微加以区别的，产生了及其微妙的韵律美。为了不至于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其他颜色做点缀。该页面使用了同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。

结论：

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

2类似色的调和

■ 类似色的调和

在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。

→ 类似色的调和网页例图：http://www. solar1.org

类似色的调和分析：

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

以上页面主要取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。虽然主色调的米黄色在页面中使用面积最大，但是我们看到由于它的明度非常高，饱和度就降低了，因此在页面中处在不明显的角色。而绿色的纯度最高，且使用面积次之，页面显示较显眼，因此用于次级导航位置上。整个页面主次的视觉引导分明。

结论：

不是每种主色调都是极其显眼的位置，通常多扮演着用于突出主体的辅助性配角。而重要角色往往在页面中用的份量极少，却又起到突出主体的作用。

3对比色的调和

■ 对比色的调和

调和方法有：

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

2、在对比色之间插入分割色（金、银、黑、白、灰等）；

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

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

→ 对比色的调和网页例图：http:// www.snapple.com

对比色的调和分析：

基本上可以说是黄色和紫色的对比色做页面的主要色调。黄色紫色组合在网页中使用率较低，原因是这组颜色适用范围相对其他两组对比色要小很多，配色难度也较两组大。

这里黄色加入了红色呈中黄色，紫色加入了红色，偏玫瑰色，所以这组颜色不是严格意义上的对比色，也因此使这组颜色看起来协调、舒服。这个页面都调低了亮度使整体降低了纯度，缓和视觉刺激。白色是这组对比色里加入的协调色。

结论：

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

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

4渐变色的调和

■ 渐变色的调和

渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。

→ 渐变色的调和网页例图：http:// www.macromedia.com

渐变色的调和分析：

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

结论：

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

除了统一当然也可以起到变化页面视觉形式的作用。该设计语言可做需要的时候适当的使用。

本部分小结：

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

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

● 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。

● 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才对比色调和页面分析例子方法。

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

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

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

红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。

在众多颜色里，红色是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。

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

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

红色相对于其他颜色，视觉传递速度最快。由于以上的这些红色传达出的特性，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。

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

朱红色

→ 朱红色网页例图：http://www.muchvibe.ca

朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。在色环表中，纯红色在HSB里为0度，往360度方向呈现的是冷红色系，0度方向为黄色系。

整个页面里，主色调朱红色面积非常大、确定明显，辅助色主要由黑色、深红构成，（数值上选取的是深红色做标示）。主色调的R呈现出255最高数值，S中100%，充分标明了红色最高特性。辅助色的深红R为222，B87%，显示其充当辅助角色的这一特性。

结论：

背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。

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

2深红色

深红色

→ 深红色网页例图：http:// www.sisley.com

深红色在原有的红色基础上降低了明度而得，是红色系中的明度变化。通过上图的数值显示看出明度较低。

这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。

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

数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入提亮，页面视觉效果强化。

结论：

前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。

3玫瑰红色

玫瑰红色

→ 玫瑰红色网页例图：http://www.gentverwent.be

玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。

这个页面主要由两种不同明度、纯度的玫瑰色调组成。两色数值显示，我们看到RGB数值中R呈现的数值最高，红色特性较明显。辅助色调的玫瑰色，加入少许G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。

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

结论：

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

这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。

4明度粉红色

明度粉红色

→ 明度粉红色网页例图：http:// www.enjo.com.au

粉红色主要是红色系中的明度的高亮度的变化。是红色系里的冷色系。RGB数值显示明度较高，因此HSB中S纯度下降，几乎呈最低值。

主色调和辅助色调数值对比可知：主色调混合的G的份量较多且明度较高，因此纯度较低，色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。辅助色R数值比主色调的R数值稍高，红色性稍明显，加入的G相对少，B明度稍低，因此相对纯度要高，辅色位置应用在框架区域的导航位置，起到突出导航作用。点睛色突出标志及购物主体的作用。

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

结论：

RGB数值中，数值同时呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。这里以粉红色为主色调的页面，女性主题内容特征倾向明显。这组粉红色页面里，由于纯度都较低，任何一个纯度高小面积使用的颜色都能起到点睛的效果。

这类颜色的组合多用于女性主题，例如：化妆品、服装等，鲜嫩而充满诱惑，传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。

5对比色：橙红色+蓝色

对比色：橙红色+蓝色

→ 对比色橙红色应用网页例图：http://www. tostitos.com

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

该页面的背景色使用纹理图形由深至浅的制造空间范围，模拟真实环境。这里的数值选取其中间色值来分析，由于背景蓝色B的明度较低，又由于冷色比暖色视觉传递速度慢的特点，很适合作为辅助角色突出前景的应用。主色调橙红色R的数值达到最高值255，SB都达到了最高值100%，视觉刺激非常强烈，运用大面积高纯度来突出蓝色产品主体物，又形成了一次页面上的视觉对比--背景蓝色与前景橙红色，前景橙红色与产品主体物蓝色的二次对比。

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

结论：

颜色的深浅除了能营造空间感的效果，也能辅助性的制造主次效果。颜色除了性能对比，面积对比、位置安排也是制造主次效果的关键。

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

6配色：红色+黑色

配色：红色+黑色

→ 红色配色应用网页例图：http:// www.pleasuredome.it

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

从数值上看，红色添加了G和B饱和度稍降低，因此该红色大面积使用不会觉得刺激或不舒服，这也与背景色蓝色加入了适量渐变的技法，使得页面的节奏呈现缓和。辅助色黑色的加入，与深红色在明度拉大，页面色彩元素相对活跃不少。

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

结论：

这里颜色位置的摆放，起到平衡页面视觉，突出主题效果。背景色加了渐变效果、整体与前景人物黑色对比呈浅色，前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系，构成空间环境的视觉效果。

这组配色中，红色是降低了明度的深红色，为主色调和背景色的大面积使用。红黑搭配色，常用于较前卫时尚、娱乐休闲、电子商务等等要求个性的网页设计配色里，也又有用于部分政治、新闻的页面。

7配色：红色+黑色+灰色

配色：红色+黑色+灰色

→ 红色配色应用网页例图：http:// www.enjo.com.au

这组配色，达到最高纯度的红色做小面积的使用。虽然这里选取了红色做为辅助色，但从整个页面的功能和所表达的主题来看，红色可以作为该页面的点睛色，强烈的突出了主题。

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

红色与黑色本是对比强烈的配色，但由于背景灰色的作用，缓和整个页面的视觉刺激度。背景色灰色RGB数值变化不大，因此颜色纯度较低、趋于平稳柔和，辅助前景内容的呈现。

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

结论：

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

本部分小节：

● 红色在RGB数值的R为255左右，HSB数值的H中为0度左右，达到红色最高值。随着纯度的提高、亮度的适度增加，它易于迅速的传达、醒目性的特征发挥得越明显。和其他颜色一样，颜色相互混合的越多，明度越低，饱和度越低，视觉冲击力越弱。

● 颜色的对比：对比色红色绿色的搭配，红色的特性发挥得越明显。绿叶衬红花的效果。另外红与黑的搭配，也较能展现红色的魅力。

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

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

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

在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。

在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。

下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。

橙色

→ 橙色网页例图：http:// www.wastelink.co.uk

橙色系分析：

主色调橙色HSB数值的H表示色相，显示的是30度，而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值，因此整个页面的视觉刺激是极其耀眼强烈的。

这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色，使页面生动的同时又运用于导航位置，从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低，与明度纯度较高的背景正橙色形成鲜明的对比。

通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时，又呼应统一于整个页面。

辅助色在这里是橙色与白色的过渡色。

结论：

饱和度与纯度很高特性明显的颜色，在达到视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而削弱视觉的疲劳度。

2深橙红色系

深橙红色系

→ 深橙红色网页例图：http:// www.matisserestaurant.ca

深橙红色系分析：

从色相度中可以知道0度为正红色，30度为正橙色，而主色调的HSB数值H显示22度可知，该深橙红色是橙色基础上加入少许邻近色红色，整体上降低了明度而得，因为红色本身较橙色明度低，因此这里橙红色的明度呈现出较低状态。

辅助色选取了明度相对于主色调更低的三种颜色，前面两种饱和度都较高，最后一种灰蓝色由于明度较高因此饱和度降低，是主色调与前面两种辅助色的协调色。

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

数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB数值显示，添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入和提亮，使页面视觉效果得到强化。

结论：

前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时，形成的是另外一种柔和统一的效果。

3浅橙色同类色

浅橙色同类色

→ 浅橙色同类色网页例图： http:// www.talentic.com

浅橙色同类色分析：

从主色调和辅色调在HSB数值H显示的数值是36可以看出，该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色，明度越高饱和度越低，页面上减弱了饱和度较高的橙色特性，整个网页呈现出柔和自然稍有些发灰的调子。

该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化，属于单色调，配色非常的单纯。色阶平稳，同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离，增强辅色调橙色的特性，使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩，只在明度上呈最高数值而无彩度，不能给页面带来彩度所具有的鲜活靓丽的感觉，另一方面却也呈现出质朴的感受。

结论：

前面我们提到过同类色是在同一色相中不同的明度颜色变化。因此这类颜色相对其他类别颜色来说明净而单纯，配色上较容易达到协调统一，但也容易显得单调。

初看该页面配色协调舒服，但看多了的确有些单调乏味的感觉，这也是同类色搭配的特性。同时由于运用了渐变色这一调和方法，该页面同时占有了前面我们提到的4种色彩中的调和方法的2种，整个页面呈现出调和中的调和是勿庸置疑的，但也同时显得有些单调，没有色彩亮点。

4橙色系邻近色（黄色+橙色＋橙红色）

橙色系邻近色（黄色+橙色＋橙红色）

→ 邻近色橙色网页例图：http:// www.tide.com

橙色系邻近色（黄色+橙色＋橙红色）分析：

虽然第一眼看上去似乎色调上变化很多，但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的，通过不同的明度和纯度的变化而得到更为丰富的色阶，它们是浅黄色、黄色、橙色、橙红通过不同的形状面积，位置变化而得。从HSB数值中的H可以看出属于暖色范畴，三个色相的倾向不是很明显，以至于色彩呈现较规律、缓和。由于不同数值的明度表达，纯度也做出了不同的数值变化。

浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感，增强整个页面彩度的作用。

结论：

橙色与邻近色黄、红暖色调的搭配组合，这是一种简单又安全的方法，视觉韵律上处理得井然有序。整个页面看起来艳泽华丽、新鲜充满活力的感觉，符合Tide这一主题所要表达的目的。

5橙色系对比色（橙色＋蓝色）

橙色系对比色（橙色＋蓝色）

→ 对比色橙红色应用网页例图：　www.rastifilms.com.ar

橙色系对比色（橙色＋蓝色）分析

HSB数值中的H色相显示主色调橙红色为26，我们知道正红色的H为0，正橙H为30，主色调橙红色是往0偏移而得。正蓝色是240，而该点睛色蓝色为192，往绿度偏移，在RGB中的数值G160也能看出来，因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值，因此尽管蓝色不是正蓝，但它的特性得到了很大程度的发挥。

此种橙蓝对比色中的蓝色调配，比较少见，让人很容易记住它。而橙红色的饱和度明度都非常高，刺激度强，属于让人不可久视的颜色。

介于橙红色和蓝色之间，与蓝色面积相当的白色，起到调和对比色橙红与蓝色之间关系的作用。

结论：

这组对比色通过使用的面积位置的不同来反映主次之间的关系。对比色能相互强烈的突出色彩特性。这组对比色属于是非常能突显个性的颜色。

6橙色系低对比度（橙色+绿色）

橙色系低对比度（橙色+绿色）

→ 橙色低对比应用网页例图：http:// www.colourpixel.com

橙色系低对比度（橙色+绿色）分析：

如果不看数值参数，刚一开始看会以为这是一组纯度较低的颜色。HSB数值H显示主色调为正橙色，而黄绿色的明度较低且色相倾向不够明确，加之背景有少许的暗橙色纹样，整个页面没有高亮度白色点缀衬托，使得纯度的彩度不够确切，就很容易造成了该页面纯度较低的错觉。

整个页面最亮的颜色除了“书本”最亮色浅黄色外，就是点睛色黄色了。我们知道黄色是所有彩度色中明度最高的颜色，不同明度纯度的黄色系让整个页面明亮了不少，它是整个页面明度色阶的最高调。

黄绿色的出现，让本只有邻近色的橙色系列多了些内容，页面配色丰富不少、视觉节奏多了些变化。

结论：

这类颜色的组合随着不同色阶明度的变暗，整个页面没有白色衬托，制造出另外一种古典的环境氛围，有如娓娓道来的故事场景，也是一种不错的主题配色方法。

本页面的配色设计亮点是——无白色设计。

7橙色系高纯度高对比度（橙红色+绿色）

橙色系高纯度高对比度（橙红色+绿色）

→ 橙色高纯度对比应用网页例图：　 www.aliveis.com

橙色系高纯度高对比度（橙红色+绿色）分析：

与上组的橙色绿色相比，这组颜色强烈而刺激，色彩倾向无疑明确了很多。主色调橙红色往红色倾向，而红色的对比色是绿色，因此整组颜色有强烈的对比效果。从HSB数值H上看，除了蓝色外，其余几种颜色纯度都非常高，加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。

黄色是中间色，起到过渡对比色作用，在这组色里属于调和色。蓝色出现在产品图案上，引导主次关系，增强视觉的注目点。

结论：

橙色是注目容易引起食欲的颜色，在这里得到了较充分的应用。

非色彩的白色和黑色在这里起到了非常重要的作用，拉大了色彩色阶空间的距离。白色让整个色调组合更加明快，而黑色增添色彩的厚重质感——强烈中的强烈，增强对产品的视觉刺激。

本部分小节：

● 橙色在HSB数值的H中为30度，是正橙色。橙色是一个非常响亮注目的颜色。橙色的对比色是蓝色，当这两种颜色彩度倾向越明确，对比强度就越大。但我们也看到，除了正宗的对比色橙蓝色外，橙色和绿色随着纯度的升高，达到的对比效果也很强烈。

在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试，会有意想不到的收获。

● 白色是所有网页设计中属于较通用的颜色，它容易突出彩度的特性，明快于整个页面，当一个页面设计没有使用白色时，空间感觉减弱，容易造成彩度不够明确、页面有些沉闷等反应，然而又相对来说增添页面的厚重感觉，制造另外一种环境气氛。黑色在色调组合的辅助角色里容易制造出厚重的色彩效果。

从这里我们又一次感受到色彩的相对性，即没有绝对的配色组合，它们总是根据搭配不同的色彩组合或强或弱的表现出什么样的特性。

● 同类色、邻近色的组合，是非常调和的色彩组合，即使减少了色相的数量，一样也可以调配出很多不同的调和色彩。对于初学者来说，这是一个非常实用的配色方法。

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

黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉。象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。它的亮度最高，和其他颜色配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个性，有希望与功名等象征意义。黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。

黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。

浅黄色系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。

中黄色有崇高，尊贵，辉煌、注意、扩张的心理感受。

深黄色给人高贵、温和、内敛、稳重的心理感受。

下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。

→ 黄色系网页例图：www.bernhardwolff.com

黄色系分析：

黄色是所有彩色中明度最高的颜色。上图看到HSB模式的H数值是60度，正是正黄色，但RGB数值中加入了B蓝色数值为51，因此降低了HSB的饱和度S为80％，但是大面积的　　黄色仍使得该页面色彩明亮显眼。

辅助色是纯黑色，非色彩明度最低的颜色。

大面积显眼的正黄色有黑色的线条压制，黄色顿时显得沉稳，页面增添内容感。

白色虽然是点睛色，但由于非色彩的白色与黄色的明度最高，因此这里似乎没有起到"点睛"的作用。

结论：

当鲜度、明度高的背景色与前景辅助色暗度低的黑色在明度形成较强烈的对比时，艳度降低，较能协调视觉。

整个页面配色单纯，却也不简单，形成另一种设计风格。

→ 黄色同类色网页例图：www.paralotna.pl

黄色同类色分析

该页面的配色很单纯，是同类色的黄色不同明度颜色，页面看起来干净、单纯。

点睛色白色淡黄色在深色黄色背景下比较显眼，且在最中间位置，是整个页面中的高调部分。

这三种黄色，明度都很高，只有背景辅助色明度稍低，点睛黄色H色相是三种颜色中黄色倾向最高的为57度，而60度是正黄色，因此明度也是最高的，充分的发挥其点睛色的作用。

背景色和前景色只在色相上明度上有非常微妙的变化，却也很巧妙，形成了变化较明显的空间层次感，削弱了同类色易产生的单调感。点睛色白色让层次感更明显。

结论：

同类色的属性使得整个页面非常和谐，可以根据不同的主题来设计配色。

可以通过明度、饱和度的不同变化来加强页面配色的层次感。

2中黄色、黄绿色调

→ 中黄色应用网页例图： www.totshop.com

中黄色系分析：

背景中黄色上点缀多种艳度较高的颜色，都是属于跳跃的颜色，渲染整个网站的热闹环境气氛，符合该网站的设计主题。

从HSB数值上看，该中黄色的明度和饱和度呈最高值，属于明亮耀眼的颜色。辅助色是黄绿色和红色，黄绿色在中黄背景下呈冷色调，轻快单薄的亮色；红色的HSB数值H色相上看是正红色，明度稍低，这里属于厚重沉稳的颜色，在中黄色背景下呈现暖色调；背景中黄色在黄绿色和红色两者中这时呈中间色，是很好的整体页面视觉过渡色。

加之商品图片多种亮艳的色泽混合在同一页面上，点睛色白色在这里起到了调和多种颜色的作用，减少、透气于整个页面的多种配色噪音。

结论：

当背景色起到中间色的作用时，页面少量冷暖色彩搭配较容易调和。

通常商品网站志在渲染热闹气氛，比较适合活泼跳跃、色彩绚丽的配色方案，但色彩的调和难度较大。

→ 黄绿色调网页例图： www.jpggrupo.com.ar

黄绿色调分析：

主色调为黄绿色，单纯而看，黄绿色是通常的暖色的起始色、色彩中亮度最高的黄色与冷色的起始色、绿色相结合而得，因此该颜色看起来非常明快清新。

处于辅助色的非色彩黑色，中间的点缀色是主色调黄绿色，很容易让人一时以为该颜色就是点睛色。实际主色调黄绿色的明度非常高，饱和度这时也很高，在明度最低的黑色衬映下就异常显眼。

背景色使用略有些渐变的效果，正是黄绿和黑（灰）颜色的柔和过渡，页面调和。

点睛色在这里混色较多，RGB、HSB数值差距都不大，因此颜色偏灰色阶，仔细分析是黄绿色与少许黑色混合而得，起到了调和背景色与辅助色明度差异过大的作用。

结论：

点睛色可以是少许耀眼的颜色，也可以是少许协调于视觉的混合灰色，无论是耀眼的颜色还是谦逊沉稳的灰色，都是不可缺少的角色，有着不可替代的作用。

整个页面配色较单纯，只有三种色，非色彩来说分别起到黑（辅助黑）白（主色黄绿）灰（点睛混合色）的作用，所以页面配色较有层次感，并不显得单调。

3黄色邻近色、高纯度黄色邻近色

→ 黄色邻近色网页例图：www.leerbanen.nl

黄色邻近色配色（黄色+红色）分析：

选取的上图三组色里HSB数值的B明度虽然都有些变化，但S饱和度分毫没有受到影响，仍都呈最高值100％，因此页面配色异常耀眼。好在其间有少量不同明度饱和度的红色系色块做压制，页面显得沉稳许多，页面色彩层次也丰富了许多，块面交织设计富有节奏韵律美，却也有雀跃的感觉。

页面照片人物也经过了双色调处理，与页面色彩风格一致。

整个页面属于明暗反差较大的色调，所以页面响亮明快，极赋视觉冲击力、感染力。

结论：

耀眼的颜色有深色块压制，也是很好的调和方法。

该页面里的不少小色块混合了暗灰色，因此页面饱和度刺激程度得到少许降低并调和。

同类色系、类似色系不同纯度明度的深浅变化搭配，增添现代美感。

→ 高纯度黄色邻近色应用网页例图：www.mudbubble.com

高纯度黄色邻近色配色（黄色+红色）分析：

全页选取的几个色彩组合是高纯度高明度的邻近色正黄、淡黄（这里的淡黄色不是指浅黄色，而是色彩颜料色里的称呼。）、中黄及正红色。

我们知道，黄色是色彩系里明度最高的耀眼色，HSB数值H色相60度是正黄色，特性越高明度越高。H色相度往60度前是接近红色，而红色明度相较于黄色低，背景色HSB数值H色相为48度，往红色靠近，因此色度较深，呈现为中黄色。使用中黄背景正是烘托突出前景的淡黄色。淡黄色的前景上设计少许中黄色带进入，页面的色彩层次感生动了不少。

另一个辅助色红色HSB数值的H色相是0度，显示正红色且高纯度高亮度，放在最显眼的标志广告区域，实现视觉引导作用，主次感增强了。

白色也是辅助色三色之一，在顶部面积较大的使用，使整个页面的纯度缓和了许多，起到提亮并拉开空间的作用。

点睛色用于导航栏，提示导航区域的醒目与重要性。

结论：

高纯度高明度的颜色调子耀眼响亮，通常对视觉的刺激程度较大。

邻近色由正黄到最后的正红色是色轮表的协调过渡色，因此页面调和。

邻近色与同类色一样，是调和色，但较同类色更生动更多变化。

4黄色低纯度配色

→ 黄色低纯度配色应用网页例图：www.luckystarcafe.com

低纯度黄色配色（黄色+蓝色）分析：

该页面是属于纯度较低的多组配色页面，配色难度似乎较大，但是按主色调、辅助色、点睛色来细细分析就会发现容易多了。

主色调的中黄色，从RGB数值B明度48来看，提高了明度，RGB数值的变化HSB也相应变化，该色调纯度降低，黄色的耀眼特性相应缓和。

该页面辅助色比较多，这里选了主要的三种浅黄、浅蓝、棕红色，明度纯度不同的变化来分析。浅黄色的RGB三个数值接近，因此呈现偏灰的柔和状态。正蓝色的RGB数值R为0，G为255，B为255，该蓝色RGB数值上看，混合了R红色11，G的绿色数值较低，B蓝色的数值较高，因此饱和度降低，颜色呈浅色调。棕红色的RGB的三数值上看，R的数值最高为124，加入了对比色G绿色67，因此颜色变暗发乌，调入了适量B蓝色24，因此该颜色饱和度亮度降低，也是该页面沉稳的主要色调，牵制艳度较高的几种颜色。

点睛色的HSB数值H色相为356度，几乎呈正红色，只是调入了少许B蓝色18，因此颜色在明度上稍偏暗。另一点睛白色的作用除了提亮整个页面，同时也突出标志图像。

标志是红色，下面的绿色是红色的对比色，目的是突出标志的作用，同时也是黄色与蓝色的中间视觉过渡色。

结论：

多种辅助色份量相当冷暖搭配时，有饱和度稍低的主色调牢牢把握住，整个页面容易调和。

由于页面颜色较丰富，点睛色在这里起到拉开各个色彩层次的作用，明确主次角色。

本部分小节：

● 黄色是色彩系里明度最高的耀眼颜色，尤其是HSB数值H色相为60度正黄色时，它的特性越明显。由于黄色的特性，在页面配色的时候可适当添加明度较深的颜色，色阶层拉开，并起到协调刺眼的艳度作用。黄色饱和度、明度的不同变化传达不同的意义和作用。

● 无论是高纯度低纯度还是多色彩的页面配色，白色起到关键的作用。

● 点睛色不一定就是非常显眼的颜色，也有起到调和整体页面配色的作用。

● 中间色通常被大面积的使用为主色调、辅助色，是调和辅助色（有可能是同时几种）与点睛色（有可能是几种）的色彩，是调和色、调和方法的关键。

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

绿色在黄色和蓝色（冷暖）之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。

绿色与人类息息相关，是永恒的欣欣向荣是的自然之色，代表了生命与希望，也充满了青春活力，绿色象征着和平与安全、发展与生机、舒适与安宁、松弛与休息，有缓解眼部疲劳的作用。

它本身具有一定的与自然、健康相关的感觉，所以也经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。

绿色能使我们的心情变得格外明朗。黄绿色代表清新、平静、安逸、和平、柔和、春天、青春、升级的心理感受。

下面我们根据绿色系不同属性邻近色、同类色的高纯度低纯度、对比色等色彩搭配做不同的举例分析。

→ 绿色网页例图：http://www. bacardimojito.com

绿色系分析：

从上图的主色调、辅色调HSB模式的数值可看出，这两中颜色只是在明度上有区别，其显示的色相与饱和度是一样的。正绿色是120度，这两种颜色从RGB数值上看，都不同程度的混合了其他少许颜色，因此离正绿色稍有些偏差。由于绿色本身的特性，所以整个网页看起来很安稳舒适。

辅助色只在明度上降低，让页面多了些层次感、空间感。

白色块面使得绿色的特性发挥到最好的状态并增强了视觉节奏感。

点睛色恰到好处的体现出了"点睛"这一妙笔，极尽诱惑力，整个页面顿时生动提神起来，增强了页面主题的表达力。

结论：

主、辅色调是属于同类色绿色系，通过不同明度的变化，能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。如果不是通过数值来分析判断，可能会有些朋友凭经验判断，容易误认为这两种颜色除了明度外有可能纯度会有所不同，这时候适当的使用数值模式会很容易得到正确的结论的。

整个页面配色很少：最大色块的翠绿，第二面积的白色，第三面积的深绿色，但得到的效果却是强烈的、显眼的，达到充分展现产品主题的目的。

深绿色给人茂盛、健康、成熟、稳重、生命、开阔的心理感受。

2绿色高纯度网页例图分析

→ 绿色高纯度网页例图：http://www. marocfruitboard.com

绿色系分析： (高纯度配色：绿色+对比色组合)

HSB数值H显示60度为正黄色，该主、辅色调只向绿色倾斜了一丁点--H为75度。大面积明度稍低的黄绿色为主要色调，饱和度却非常高，达到了100%，辅助色使用了提高明度的嫩绿色和白色，这两种辅色除了增加页面的层次感的同时，还能让整个页面配色有透亮的感觉，增强了绿色的特性。背景深褐色无疑把前景的所有纯色烘托得都耀眼于舞台上。

该页面有两组小小的对比色，一组是黄绿与橙红色，一组是橙黄色与天蓝色，这两组配色严格的来说不算对比色，因为色彩多少有些偏差。虽然它们的饱和度降低，但在这个页面中足以构成了最响亮的色调，把整个页面烘托得非常活跃、鲜明。

结论：

主、辅色调黄绿色大面积使用并不刺目，反而使得页面看起来很有朝气、活力。

适当运用不同纯度的不是相当严格意义上的对比色系组合时，通常能起到的主要作用是主次关系明确。不"标准"的对比色系对比特性虽然减弱，页面色彩看起来容易协调、柔和，但一样能突出主题。

3同类色浅绿色网页例图分析

→ 同类色浅绿色网页例图 ： http:// shehouse.we.tv

绿色系分析：(同类色浅绿色)

主色调绿色属性是明度很高的浅绿色，前面提到过，通常情况下明度高饱和度就降低，饱和度低页面色彩度就降低，除非颜色本身有自己的特性，加上大面积的辅助色白色，整个页面看起来很清淡、柔和、宁静，甚至有温馨的感觉。

页面中使用了渐变的浅绿色，使得整个页面视觉上更加柔和舒适。

尽管点睛色只在主要标志上出现，按钮也只有少许一点，但也给整个页面的色彩带来些亮笔。尤其是红色的HSB模式的H数值显示颜色接近于正红色，饱和度达到最高值。另一个点睛色中黄色，在页面视觉上呈绿色与红色这一组对比色起到缓和视觉的作用。因为在色轮表上，黄色正是在绿色和红色之间的过渡色。

结论：

浅绿色系有优雅、休息、安全、和睦、宁静、柔和的感觉。

渐变的效果更能加深这种印象。但页面配色上浅色过多时，整个页面容易呈现发"灰"的感受，这就需要适量的添加纯度稍高的颜色例如左下角的辅助色绿色块，适当的鲜艳的点睛都能很好的解决这一问题。

4绿色弱对比网页例图分析

→ 绿色弱对比网页例图：http:// www. visualade.com

绿色系分析：(黄绿色+弱对比)

从HSB模式的数值上看，主色调是接近于黄色的基础上加入了少许绿色在里面，饱和度和明度降低，色彩看起来较柔和。辅色调墨绿色的绿色的倾向稍高，饱和度也较高，只是明度降低，该色看起来踏实沉稳。

点睛色红色H数值为零度，呈正红色，但是该颜色饱和度和明度降低，而红色本身的色度比黄绿色要暗不少，因此颜色稳重。另一点睛色蓝绿色，明度饱和度都很低，在页面配色里似乎没有点睛感觉，更多的是呈辅助状态。

结论：

主色调是相对比较鲜亮的颜色，而辅助色和点睛色是属于比较沉稳的颜色，页面通过大小色块的对比提高视觉的反差力度，增强页面的感染力。

由于整个页面的饱和度整体稍微降低，因此该页面配色较协调、缓和。

5同类绿色+多种点睛色例图分析

→ 同类绿色+多种点睛色例图 ：http://www. girlshop.com

绿色系分析：(绿色配色：同类绿色+多种点睛色)

主要色调HSB模式H数值显示75度，依旧是色轮表里倾向于黄色区域方位边缘的绿色，呈现出的黄绿色调。辅色调在明度上有些提亮，与主色调形成较强的对比。

点睛色里所使用的对比色组合有两组，红色与绿色，蓝色与橙黄色，其中黄色是介于暖色(橙黄、红色)和冷色(绿色、蓝色)的过渡色也是调和色。

结论：

通过上面的分析大家可以看到，该网页的配色不少，而且还有两组对比色在内，但是页面配色也很协调。原因之一，从下面抽取的色块可以看出来，是一个过渡柔和的色轮表：以黄色为中界一边是较浅的黄绿到绿色再到蓝色，另一边是橙黄再到红色。原因之二，点睛色毕竟是扮演着点睛色的角色，有主色调和辅色调大面积的控制，即便再多些点睛色也不至于很快干扰到页面的整体配色。

整个页面保证了协调、不凌乱的步调，但是又能把商业网站的热闹氛围体现得很好的渲染。此种配色方法值得我们学习借鉴。

6绿色邻近色应用网页例图分析

→ 绿色邻近色应用网页例图 ：http://www. codcefngwlad.org.uk

绿色系分析：(邻近色配色：绿色+蓝色)

全页使用的主要色调基本上是属于明度较高饱和度较低的颜色，其中还使用了渐变色缓和的过渡，因此页面看起来舒服协调。

主色调是饱和度较高的翠绿色运用于背景色，几乎是调节于整个页面的关键色。如果没有这一背景色块，整个页面容易发灰。还有右边的粉绿大块面积稍多，有些灰的感觉，好在前景的文章使用了色度明度稍深的蓝色压住，稍显好些，关键还是有白色的箭头很好的把粉绿和蓝色文字的色阶拉开了距离。左边的照片清晰且纯度较高也对整个页面配色起到一定的调节作用。

点睛色主要是标志的颜色，如果可以忽略不计，页面配色更趋于平淡。

结论：

明度较高饱和度较低的颜色，如果没有明度较深饱和度较高的颜色进行勾勒或者点缀，这个页面配色看起来容易发灰。

7绿色对比色网页例图分析

→ 绿色对比色网页例图：http://www. fitintercambio.com.br

绿色系分析：(对比色配色：绿色+红色)

主色调是有点黄色倾向的绿色，从HSB数值上可以看到H为98度，绿色特性较明显了。

辅助色则是三个浅色系，起到调和整个页面色彩的作用。粉红和粉绿色分别取的是页面绿色红色通过提高明度而得，因此整个页面色彩前后呼应、配色调和。

点睛色红色的HBS模式H数值351度，在色轮表上偏向于紫色方位，因此倾向于冷红色，色度上稍有些刺目和艳丽。

主色调绿色和点睛色红色所放置的位置，让页面导航区域和内容区域视觉引导较为分明：主色调绿色的设计亮点既用于导航又很流畅自然的融合到背景，浑然一体;这里尤其是点睛色红色放置于背景的处理很独到，烘托突出于前景内容，在众多网页设计中并不多见。

结论：

整个页面的配色取色于标志色，量身定做的感觉。

适当的运用对比色有强调的感觉，但页面配色处理上并不强烈、耀眼，因为使用了白色及其相应的提高明度的粉色做视觉的缓和处理。

本部分小节：

● 绿色是缓和健康的颜色， HSB数值H色相为120度时是正绿色。大家通过以上的网页实例可以看到，偏向于黄色方位的绿色运用得最多，也就更受到大众的欢迎。纯正的正绿色在视觉感受上可能稍微显得有些色度较低的生硬，配色难度稍大。不同的黄绿色饱和度、明度的不同变化可以表达不同主题的页面效果。

● 点睛色可以是几种，也可以是不同对比色的组合，有的起到丰富并活跃页面配色的视觉节奏，有的起到调和整体页面配色的作用。

辅助色通常是同类色系或者邻近色系，起到辅助并烘托主色调的作用。辅色调和主色调分别在不同的页面做为唯一高纯度色的时候，能够起到挽救于整个页面发灰的作用。

● 当整个页面配色明度太高色度降低时候，页面容易呈现发灰的感觉，可以适当的使用少许纯度较高或者明度较低的色系来加以改善。

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

蓝色是色彩中比较沉静的颜色。象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。

蓝色的朴实、稳重、内向性格，衬托那些性格活跃、具有较强扩张力的色彩，运用对比手法，同时也活跃页面。另一方面又有消极、冷淡、保守等意味。蓝色与红、黄等色运用得当，能构成和谐的对比调和关系。

蓝色是冷色调最典型的代表色，是网站设计中运用得最多的颜色，也是许多人钟爱的颜色。

蓝色表达着深远、永恒、沉静、无限、理智、诚实、寒冷的多种感觉。蓝色会给人很强烈的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等。

下面我们根据蓝色系不同属性的同类色、邻近色、高纯度对比、相对对比色等色彩搭配做不同的举例分析。

→ 蓝色高纯度对比网页例图：http://www.toysdesign.com

蓝色系分析：(高纯度对比：蓝色+玫瑰色)

蓝色的HSB数值H色相为240度时是正蓝色。上图的HSB模式S数值显示，所有主要配色的饱和度都是100%。从主色调、辅色调HSB模式的数值可看出，这两种颜色在明度上有较大的区别，色相上稍有轻度变化，饱和度相同。RGB模式上看，主色调与辅色调R数值都为0，G绿色的数值和B蓝色数值分量的变化，得到了不同蓝色的两结果。点睛色仅是R红色与B蓝色两色调和而得没有掺杂其他颜色，因此饱和度呈最高值100%。整个页面配色的饱和度都为100%，页面整体配色看起来视觉冲击力异常强烈。

辅助色白色让页面上的颜色的特性发挥到极致，是不可缺少的辅助配色。

结论：响亮、强烈刺激的词语似乎都适用于上图页面，源于高纯度烘托、微妙的冷暖变化配色上，体现出现代都市张扬时尚的气息。白色块面的线型使得这种高纯度高强度的配色变得响亮却也缓和。

辅色调蓝色的运用透露出设计师的大胆与魄力，玫瑰色在色轮表里算是冷色系，但是与蓝色广义上的对比来说是暖色，在这里与蓝色搭配算是绝配了。整个页面无不体现出特色和个性。

2同类色浅蓝色

→ 蓝色浅蓝色网页例图：http://www.voeslauer.com/start.html

蓝色系分析： (同类色：浅蓝色)

主色调HSB数值H显示200度，色轮度稍向绿色方位倾斜，但是由于从180度到270度基本上给人的视觉呈现还是蓝色范畴，因此与视觉上广义的蓝色差别不大。

该页面中间色较多，主要是在蓝色范畴内做明度的变化，所以色度差非常缓和，以致于页面的色彩呈现非常柔和，甚至稍有些发灰的感觉，好在该页面还有些较大色块的浅蓝色及白色，拉大了页面的色阶，使得这种灰的感觉减弱不少。

点睛色的HSB数值是258，色轮趋势是向暖色紫色(相对冷暖色)倾向，变化微妙，是本页面最温暖的颜色。蓝紫色在色相环中位于蓝色和紫色之间，所以它也蕴含着紫色的一些神秘感，加上浅蓝色的雅致，所以亮度较高的蓝紫色显得非常高雅。在网页中，蓝紫色通常与蓝色一起搭配使用。

结论：

浅蓝色给人一种很宁静安静的心理感受。浅蓝色系有淡雅、清新、浪漫、高级的特质，常用于化妆品、女性、服装网站。它是最具凉爽，清新特征的色彩。和白色混合时，能体现柔顺，淡雅，浪漫的气氛。

主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。

该页面基本上属于同类色系，也是最保守稳妥且调和的配色方案。但该种配色看久了容易呈现出平淡乏味的感受。

3深蓝色

→ 蓝色深蓝色网页例图： http://www.ro-audio.com

蓝色系分析：(深蓝色)

HSB数值显示主色调和辅色调的H色相接近，饱和度为最高，都为100%，两者只在明度上有区别，分别是35%和65%。三维厚重的设计风格，用调和法之一的渐变手法，把主色调和辅色调进行了缓缓的过渡，增强了层次感，体现个性魅力，符合该页面视音频风格网站的主题。

虽然是被誉为点睛色，但从整个页面来看由于面积关系，点睛色在这里所起的作用不大，仅仅就蜻蜓点水而已。相反的辅助色在这里却起到了较为突显的作用——让整个沉闷的本只起烘托作用的深蓝色得到充分的展示。另一辅色调灰色令白色与深蓝色反差不易过大，起到调和的目的。白色增强了整个页面的视觉感，使之更醒目。

结论：

深蓝色是沉稳的且较常用的色调。能给人稳重、冷静、严谨、冷漠、深沉、成熟的心理感受。它主要用于营造安稳、可靠、略带有神秘色彩的氛围。

深蓝色明度偏暗，基于上面对深蓝色的特质描述，在常规网站的设计里，可能不适合做太大面积的使用。但根据不同网站主题的设计需要可以做些不同的尝试。

4蓝色纯度对比

→ 蓝色纯度对比网页例图：http://www.ccw.gov.uk

蓝色系分析：(纯度对比)

从HSB模式上的数值显示情况进行分析，全页基本上是属于高纯度配色，各颜色特性相互辉映、相互交融，把整个页面环境渲染得异常鲜亮和热闹。

冷暖色系之间跨度很大：蓝色、绿色、黄色、橙黄色、朱红色、土橙黄色、墨绿色，几乎按照色轮表上的轨迹进行。也由于面积有多有少的原因，因此页面看起来较明快调和。其中土橙黄色和墨绿色是页面明度最重的颜色，从RGB色值上可看出，都分别的混合了其他颜色，因此饱和度相对较低，略呈灰色状态，另一种意义上来说这种灰色状态是调和色的一种很好的方式。

由于有大面积的主色调和背景色做掌控，加之以上因素综合分析，无论页面再多再细再耀眼的颜色都能很好的统一在同一个页面之中。

结论：

非常明快活泼、跳跃的富有趣味性的配色。使人勾起了无限愉悦的童趣。

高纯度的蓝色主色调配合的其他高纯度冷暖色调对比，会营造出一种整洁轻快的印象。

根据色轮表的缓和过渡及使用面积多少，判断分析出页面调和程度。

5蓝色邻近配色：蓝色+绿色

→ 蓝色邻近色网页例图：http://www.rhinocortaqua.com

蓝色系分析：(蓝色邻近配色：蓝色+绿色)

从HBS模式的S饱和度数值100%上看，不少朋友会有疑惑的感觉，认为看起来较为柔和的颜色，饱和度或许会低，刺眼的颜色通常饱和度较高，其实不然，每个颜色有每个颜色的不同属性特性。高纯度的色彩，明度的降低是协调视觉的一个因素，容易给人造成低纯度的错觉。

不同块面的邻近色交错排列，增强本页面视觉动感。

辅色调浅蓝色是背景色白色和主色调蓝色的中间色，它形成了页面配色的中间色阶，色彩层次感增强以外，还使整个页面的颜色更为和谐。

另一辅色调青色，是蓝色和绿色的结合体，包括在标志文字、文字标题上的运用，无疑活跃了整个页面的配色环境。

两个点睛色都略调高了明度，另一意义上是该页面配色的中间色阶。两点睛色都是在主色调蓝色、辅色调青色的基础上衍生出来的颜色，这里“点睛”的作用不大，都属于和谐色系。

结论：

很多站点都在使用蓝色与青绿色的搭配效果。蓝色、青绿色、白色的搭配可以使页面看起来非常干净清澈，在我们的现实生活中运用的范围很广，可以说是随处可见的。

主颜色选择明亮的蓝色，配以白色的背景和灰亮的辅助色，加上中间色阶的运用，可以使页面有干净整洁，给人庄重、充实的印象。

这是一组非常愉悦和谐的邻近色系配色。中间色适度面积的运用及背景白色让这组颜色特征发挥到了极致。

6蓝色系强对比：蓝色+红色

→ 蓝色强对比网页例图：http://www.everyoneshero.com

蓝色系强对比：蓝色+红色

蓝色是冷色系的最典型的代表了，而红色是暖色系里最典型的代表，两冷暖色系对比下让全页的色彩对比异常强烈且兴奋，很容易感染带动浏览者的激昂情绪。红色把文字图片框起来，在蓝色背景对比下，很好的突出主题，又好似模仿投影荧屏的感觉，让人迅速的聚焦于视频中心，达到网站背后的最终目的。

辅色调是红色，从数值上看接近于正红色，红色对视觉传递的信息是很快的，属于高昂响亮的颜色。

点睛色分别是黄色、黄绿色。大家知道，黄色是明度最高的颜色，也较响亮、刺目，在这里的运用能强烈的突现标题。从大的来看，点睛色黄绿色与辅助色红色是对比色，虽然面积不太大，只小范围的对比，但是已经足以达到了迅速传递信息的效果，让人印象深刻，促成再访点击。

结论：

冷暖色系的对比碰撞，充满激情，能传递炽热情感、强烈刺激主题的目的。

该页面运用了冷暖、红绿两种比较鲜明的对比色，配色积极大胆，视觉冲击力很强。

7蓝色同类色对比：蓝色+暖色

→ 蓝色对比网页例图：http://www.crackerjack.com

蓝色同类色对比：蓝色+暖色

这是一个配色难度较大的页面。如何使这些配色和谐又能达到带动对比的目的，就要求要有一定的配色经验了。难度一，在于主色调辅色调及点睛色的这三种蓝色所充当的角色运用。难度二，高纯度高亮度的正黄色在这个页面的使用。难度三，黑色的运用。

运用排除法细分得到：主色调辅色调的蓝色饱和度一样都是最高值，色相H上稍微有些微妙区别，亮度上有些变化。点睛色蓝色饱和度和明度都较低，介于两种蓝色之间。三者面积如果用得不好页面容易呈混沌的灰色状态。拿出辅色调蓝色，再回到整个页面的配色来看，页面色彩偏重，亮度不够，缺少中间色阶，冷暖主次倾向不够明显，这时把辅色调蓝色添加进去正好弥补了这种缺憾。

HSB模式显示H是60度，S饱和度与B明度都是100%，正是正黄色。正黄色只适合做小面积的点睛色使用，大面积使用页面配色较难协调，当然正黄色做为主色调能好配色些。

在这样的页面色彩组合里，黑色是很难运用进去的，面积使用多了，页面有可能会破坏所营造的氛围、产生不协调的感觉。只在辅助性的勾勒于边框是很好的使用办法。

图片里的产品颜色，有降低纯度的棕黄色、土黄色、米黄色等同类黄色系，对该页面色彩组合调配具有一定的协调能力。

结论：

通常矢量页面的配色相对于图片配色来说，难度较大，色彩的组织搭配，是根据设计师们自己以往的丰富配色经验，反复调配、反复加减而得。

该页面设计师选取了页面的产品图片中的两三种颜色，例如点睛色里的红色、蓝色和黄色，再大胆的发挥出主色调蓝色、较浅的辅色调蓝色和点睛色正黄色，点睛色黄色运用于最能突出产品特色的文字上，这些和谐的元素生动趣味，让整个页面充满了故事情节。

本部分小节：

● HSB数值H色相为240度时是正蓝色，它的特性这个时候也就挥洒得越明显。从以上不同属性的蓝色页面色调上能看到，不同色相、饱和度、明度的蓝色本身色彩特性表现得不是非常特殊，这也是低调沉稳的蓝色所具备的特征之一。关键在于该种蓝色都与哪种哪几种颜色衬托、对比的。

● 冷色系以蓝色为最典型的代表，因此就产生了广义的相对暖色，例如当与玫瑰紫色做对比时，玫瑰紫就呈现出微妙的暖色，当与绿色做对比色，绿色就呈出了相对的暖色，但是此种特性呈现得非常的微弱，应根据不同的主题页面做具体分析。

● 当在蓝色色相、明度上暗色亮色非常明朗的情况下，可以考虑添加中间色，减弱可能造成的单调感，丰富两极色阶的过渡，调和页面的视觉感受。

● 同一种RGB、HSB数值的蓝色与不同的颜色搭配时，所反映出的特性与主题是不一样的。例如与同类色(根据色相明度纯度面积等同类色里得到很多种不同的蓝色)，与邻近色(根据色相明度纯度面积等衍生出更多颜色)，与对比色(根据色相明度纯度面积等产生出的广义对比狭义对比)…… 应多多思考、多做尝试。

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

紫色是一种在自然界中比较少见的颜色。象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。另一方面又有孤独等意味。紫色在西方宗教世界中是一种代表尊贵的颜色，大主教身穿的教袍便采用了紫色。

紫色的明度在有彩色的色度中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。在紫色中红的成份较多时，显得华丽和谐。紫色中加入少量的黑，沉重、伤感、恐怖、庄严的感觉。紫色中加入白，变得优雅、娇气，并充满女性的魅力。

紫色通常用于以女性为对象或以艺术作品介绍为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色，但都很少做大面积使用。

不同色调的紫色可以营造非常浓郁的女性化气息，在白色的背景色和灰色的突出颜色的衬托下，紫色可以显示出更大的魅力。

下面我们根据紫色系不同属性的邻近色、高纯度低纯度配色、相对对比色等色彩搭配做不同的举例分析。

→ 紫色高纯度网页例图：http:// www.everythinggirl.com

紫色系分析：（高纯度对比：同类紫色+同类对比色）

紫色的HSB数值H色相为300度时是正紫色。上图的HSB模式S数值显示，上组颜色饱和度基本都比较高，加上部分较高的明度组合，使该页面异常奢华艳丽。

辅色调之一的黄色是紫色强度最高的对比色，主、辅色面积的大小不同是形成视觉冲击力最大的主要原因。值得一提的是右下脚的浅蓝色的运用，它在整个页面配色上是很谦逊的角色，但却既突出上面的文字内容，又不张扬的压抑住其他颜色的配色，属于丰富于页面的辅助作用。如果把它试换成别的颜色似乎还是没有这个浅蓝色效果好。

另一辅助色浅紫红色又称粉红色，粉红色主要用于包含少女在内的女性站点。因为从明亮到浅白色调的粉红色能够表现出可爱、乖巧的感觉，这里只做少量运用。

其他点睛色使用得虽多但面积很小，主要是主色调紫色附近的过渡色，例如群青、青莲、玫瑰、红色等点缀，闪亮耀眼，增强页面的视觉感染力，有渲染出华丽凸显现代气息的作用。

结论：

紫色结合红色的紫红色是非常女性化的颜色，它给人的感觉通常都是浪漫、柔和、华丽、高贵优雅，特别是粉红色可以说是女性化的代表颜色。高彩度的紫红色可以表现出超凡的华丽，而低彩度的粉红色可以表现出高雅的气质。

紫红色并不能随意在所有的站点中使用，但使用恰当的紫红色会给人留下深刻的印象。高彩度的紫色和粉红色之间的搭配通常都能得到较好的效果。

该页面具有非常强烈的现代奢华感。时尚张扬的配色组合，符合该页面主题所要表达的环境，让人容易记住它。

2浅紫色

→ 紫色浅紫色网页例图：http://www.oopsy-daisy.com

紫色系分析：（浅紫色）

该页面使用特性最高的紫色提亮为100％高明度的主色调，很容易抓住人们的视线成为聚焦点，是非常大胆又时尚的配色。

辅色调则是使用冷色系代表的深蓝色，明度较低。主要是为了烘托左边导航菜单，凸显上面的内容信息，由于人们对网页已然形成了视觉惯性，也起到了很好的视觉引导作用。

主、辅色的搭配运用构成了较强烈的视觉对比效果。

另一辅色调浅蓝色，在主色调浅紫色的烘托下呈现稚嫩的感受，里面的白色块起到浅紫的背景和浅蓝色调和、明快的作用。

点睛色的使用实际有不少，这里只选几种起到主要作用的颜色做举例分析。中黄色运用得很珍贵，只在左上区域出现，旨在突出主题文字的效果。其他配色主要是根据左下文字字母而来，红和绿色出现在页面的浅紫色较为宽敞的位置，小范围的做色彩对比效果。其他点睛色则极少的零星分布，既调和呼应又起到活跃于页面的角色作用，以上这些都是点缀和渲染页面气氛不可缺少的配色元素。

结论：

在紫色中加入白色，可使紫色略显沉闷的特征消失，变得清秀、优雅、娇气，并充满女性的魅力。

白色、粉紫色、天蓝色的颜色搭配，是比较稚嫩的配色，同时也是最受少女欢迎的配色方案，这里运用也较得体。

使用高明度高饱和的主色调非常个性，让人很容易记住它，但是色彩都有两面性，此种颜色略显骄躁感过于刺激视觉，不易于长时间的注目浏览。 3深紫色

→ 紫色深紫色网页例图： http://www.dinis91.com

紫色系分析：（深紫色）

以略有渐变色为背景主色调，渐变色是调和方法之一，起到增加层次感空间感柔和视觉的作用。背景色左上最亮处的特殊处理，主要起到突出了标志的作用。

从HSB模式H色相数值上看到辅助色依旧以主色调延伸而成，仅在明度上做了些变化，属于同类色的调和色系。

点睛色皆选用了色彩色系中明度最高的黄色及相近色黄绿、玫瑰红。黄色和黄绿色真就点睛之笔——黄色是紫色的对比色，深紫色背景上的高明度黄色被衬托得异常跳跃。黄绿色既和谐又增添了页面配色的高强度节奏。玫瑰红在这里是最温暖的颜色，协调且增强了页面配色的层次感。根据各颜色的特质，在视觉上成功做了先后次序的引导。白色虽是非色彩，但也起到拉大色彩之间色阶层次的作用，增强了页面空间感，也使以上配色更调和。

结论：

深紫色给人华贵、深远、神秘、孤寂、珍贵的心理感受。较暗色调的紫色可以表现出成熟沉稳的感觉，创造、谜、忠诚、神秘、稀有。

整个页面配色尤其是点睛色的妙用，使得整个页面非常新颖别致，极赋现代都市气息。

根据面积的大小对比，适当的对比色能让页面有活跃、明快的气氛。 4紫色配色：紫色＋绿色

→ 紫色配色网页例图：http://www.kidskandoo.com

紫色系分析：（紫色配色：紫色＋绿色）

绿色被誉为紫色的绝配色。主色调是饱和度降低明度较低的紫色，辅色调是色彩明度较高的草绿色及沉稳的深蓝色。

点睛色虽然被称为点睛色，但在整个页面中使用的面积极小，与其他色系所占的比重来看，这两种点睛色小到几乎给忽略。尽管从HSB模式数值上看到，橙黄色为高纯度高明度色，只在主题文字上有些体现。另一蓝绿色所处的位置在显眼的网站名称后方，谦逊程度几乎不为人们注意到，尽管它才是网站背后所要表达的真正主题。

草绿色和深蓝色把大面积的白色框起来，衬托起前景，但也许由于白色面积使用过大，为了不至于让它太突出，在白色的背景上点缀较浅的纹样来降低这种感觉。

背景色紫色由于色彩特质明度较低的缘故，与明度较高的辅助色草绿色形成较明快的效果。

结论：

点睛色根据页面所占的面积因素，也有的仅起到辅助的作用。相反草绿色或许由于色彩特质的原因，这里起到比较强调的强势目的，在该页面配色里起到非常关键的作用。 5紫色邻近色配色：紫色+紫红色

→ 紫色邻近色网页例图：http:// www.bridalbabe.com

紫色系分析：（紫色邻近色配色：紫色+紫红色）

严格来说，该页面配色的色组和紫色关联上稍有些偏移，之所以做为案例选择，是因为整体配色上依旧给人有紫色系配色的错觉。

HSB的H色相数值上显示的260来看，正紫色数值为300，主色调整个往蓝色系稍偏移，构成较有视觉感染力的蓝紫色。蓝紫色在色相环中位于蓝色和紫色之间，所以它也蕴含着紫色的一些神秘感。尽管饱和度不是很高60%，但明度达到最高状态为100％，使得该色彩艳度很强，较高亮度的蓝紫色显得非常高雅，契合网站主题。

辅色调HSB的H色相数值为270，已经稍往紫色偏移，紫色特征较明显，明度较高且较明快的感觉。另一辅助色粉红色H色相数值为331，稍往红色系偏移，明度极高为100％，更增添了明快的气息。

点睛色在这里起到了不可忽视的作用，由于浅紫红较有女性气质特征，增添了该页面的女性温柔细腻的美感。另一点睛色深蓝色由于色彩特质所致，这里只是辅助性的做些点缀。

结论：

浅紫色系给人妩媚、优雅、娇气、清秀、梦幻，充满女性魅力。

上面的配色除了点睛色深蓝色明度较低，其他的色彩组合都在不同的程度上提高了明度，增强了页面所要表达的主题效果。 6紫色配色：紫色+红色

→ 紫色配色应用网页例图：http://www.vitaminwater.com

紫色系分析：（紫色配色：紫色+红色）

这是一组非常简洁精干的配色页面。主要使用了主、辅两色调为界，点缀小配色，整体疏密得当，色块分明的色彩构成。主色调紫HBS模式的H色相数值是283，稍向蓝色方位偏移，以致于此种紫色略呈现冷色特征。点睛色主要选择红蓝黄三种，其中红色的H色相显示为347，色值向蓝色偏移略呈冷调，因此该颜色在这里显示没有僵硬的感觉。另一点睛色橙黄色使用面积非常之小，几乎让人忽略。

右上角多个线条的小色块的修饰增强了页面的视觉感染力。

背景黑色不是孤立使用，既响亮的突出前景，又与前景的线条、文字呼应起来，让整个页面高品位高层次的特质更明显。

结论：

主色调紫色在这里既有沉静又显高贵的感觉，提升产品的档次。点睛色红色的加入让这种高贵又档次的感觉更加明显。蓝色有稳住紫色和红色的效果。

该页面大色块的构图及配色极其简约，独具魅力。 7低纯度配色：紫色+绿色

→ 紫色低纯度配色应用网页例图：http://www.mandarinaduck.com

紫色系分析：（低纯度配色：紫色+绿色）

该页面除了点睛色外，整体配色饱和度都很低，所以在视觉上呈柔和状态。

主色调紫色的HSB模式H色相为308，数值稍向红色倾斜，由于饱和度及明度降低，颜色呈现很平和，空间感增强。辅助色绿色H色相为167，数值稍向蓝色偏移，从RGB模式上看，G为125（正绿色时为255，R为0，B为0），R为82，B116，有这两色混合，因此饱和度和明度都很低，然而在雅致的紫色背景的烘托下，较为突出了绿色的产品这一主角，达到配色目的。另一辅助色灰色，为整体的柔和状态增添了雅致的气息。

点睛色黄色的特质因素，无疑是这页面最响亮耀眼的颜色尽管使用的面积较小，它是紫色的对比色，高纯度的黄色与低纯度的紫色形成较强烈的视觉反差对比效果，也因此使得页面的沉闷得到一定程度的缓解，提升页面配色的空间透亮感。

结论：

整体柔和的配色调子较吻合的体现了尊贵高雅的服饰感觉，并透露出宁静、安稳、雅致的环境氛围，充分体现出了紫色运用的最大魅力。

本部分小节：

● HSB数值H色相为300度时是正紫色，它的特性这个时候也就挥洒得越明显。从上面的网页配色实例中我们较全面的看到了不同角色紫色的性格体现。

● 紫色是色彩系里明度最低的颜色。尽管如此，高纯度的紫色与高级灰度的紫色都透出不同的气质。神秘、高雅在这里配色是它普遍的诠释。

紫色的纯色明度很低，因此它与浅色在一起，从明度关系上就分出了泾渭。为了不与黑白对比混淆，适当地将紫色加白色效果会更好。 由于紫色发冷，紫色配暖色时，暖色不能直接介入，需要调整纯度或明度才能形成比较和谐的配色。

● 绿色被誉为紫色的绝配色，也是一对复色对比色，它比三原色的对比色要温和含蓄，由于它们都带有一点共同成分，相互配合也会协调得多。各自的特质原因，对比之下绿色通常起到比较关键的作用。

紫色对比色组通常是较小面积的做对比使用，不同面积不同明度饱和度的使用所表达的感受是不一样的。

● 紫色传达着高贵、优雅、幻想、神秘、庄重的心理感受。蓝紫色可以用来创造出都市化的成熟美，且蓝紫色可以使心情浮躁的人冷静下来。明亮的色调直至灰亮的蓝紫色有一种与众不同的神秘美感。低亮度的蓝紫色显得沉稳，高亮度的蓝紫色显得非常高雅。在网页中，蓝紫色通常与蓝色一起搭配使用。

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

黑色是暗色，是纯度、色相、明度最低的非彩色。象征着力量，有时感觉沉默、虚空，有时感觉庄严肃穆，有时又意味着不吉祥和罪恶。自古以来，世界各族都公认黑色代表死亡、悲哀黑色具有能吸收光线的特性，别有一种变幻无常的感觉。

黑色能和许多色彩构成良好的对比调和关系，运用范围很广。

黑色给人深沉、神秘、寂静、悲哀、压抑的感受。

黑色是最有力的搭配色。

黑色也常用来表示英俊的男人。

下面我们根据黑色系搭配不同的颜色所表现出的特性做不同的举例分析。

→ 黑色网页例图：http://www.chanel.com

黑色系分析：（明度对比：黑色+白色）

从RGB和HBS模式可以看出，三组数字显示没有掺杂任何的数字，都统一到最高级0到255，即纯黑和纯白。

黑色白色属于没有色相和饱和度、只在明度两极的非色彩。两种极端强烈对比的只在明度上有区别的颜色，与前面我们所说的三原色、对比色的对比还是有较大区别的。

该页面只有两种非色彩搭配，即黑色白色，衬映得该页面的设计元素也非常干净简练，旁边点缀大小得当的文字元素减小该页面有可能因此产生的单调感觉。

结论：

黑白纯色在明度上反差非常大，视觉冲击强烈，主次分明，全站的贯穿运用，构成特色鲜明的设计风格，散发迷人的高品位的贵族气息。

黑白两种颜色的搭配使用通常可以表现出都市化的感觉，常用于现代派页面设计中。

2非色彩系：黑白深灰色

→ 黑色网页例图：http://www.foryoubruidsmode.nl

黑色系分析：（非色彩系：黑白深灰色）

该页面与上页配色类似，只是多了一组辅助色——灰色，黑、灰、白这三种非色彩在该页面里都运用到了。大家从该页整体可以看到，多了辅助色灰色，令该页面层次感更丰富，过渡更柔和，空间感觉增强。左上部点睛色白色块面的运用，使得这种空间感差距拉大，增强视觉层次感，同时突出标志品牌、主题思想。另一作用在于突出文字的功能运用。

背景深灰色明度非常低，接近于黑色，稍不留心有可能会被忽略。结合辅助色灰色再整体上看该色配色，主要起到丰富视觉层次感，缓和主色调黑色有可能带来的僵硬感。

结论：

黑白灰非色彩色调所构成的页面较具特色，尤其灰色的加入更增添层次感。

结合黑白图形，营造出一段古典的故事场景。契合该网站所体现的内容思想。

3黑色背景

→ 黑色应用网页例图：http://www.telepopmusik.fr

黑色系分析：黑色背景

背景黑色下，除了白色，还有其他三种颜色绿色、紫色、红色分布在不同的位置。其中绿色和紫色虽然被称之为辅助色，但它们使用的面积仍然不多，只是相对于点睛色红色来说。绿色主要是用于文字方面，紫色用于图形方面，所指向的分工明确。从RGB模式RGB三个数值上看到紫色混合数值上较接近，因此纯度降低，相对于绿色红色来说为中间色，色彩性能上呈低调缓和状态。

HSB模式S数值来看，绿色虽然纯度上比红色稍低些，也许是因为使用面积较多的原因，看起来似乎比红色醒目些。红色在这里主要起到的是点明目前所属的状态这一功能性作用，在黑色的背景下尽管使用面积非常小，但依旧容易被浏览者注意到。

结论：

黑色的背景下所使用的颜色面积虽然不多，但由于黑色这一衬托放大的特性，其他颜色较容易引起浏览者的注意，充分发挥其设计意图。

4黑白浅灰

→ 黑色配色网页例图：http://www.kurtarrigo.com

黑色系分析：（黑白浅灰）

从RGB数值都是234来上看可知，255为白色，背景色234只是在明度上稍做变化得到的浅灰色。背景的浅灰色把前景的白黑对视觉的刺激力变得柔和协调很多。虽为背景灰色，实际在整个页面配色作用上起到了点睛之笔，使得页面焕发出另外一种神秘且特殊的气息。

该页面无论从设计上还是配色上都非常简洁，主要是以黑白文字为重点，背后的白黑色块面粗、白色边框线条无不是为了突出前景文字的作用。

结论：

该页面设计风格极其简约，除了方形块面边框，没有多余的图形修饰，主要是以文字的大小粗细、疏密间距排版为设计元素。

浅灰色的加入让本来具强烈冲突色的黑白变得素雅些了，也颇具高层次格调许多。

5黑色＋少量彩色

→ 黑色配色应用网页例图：http://www.panopt.net

黑色系分析：黑色＋少量彩色

该页面基本上还是以黑色为主色调，虽然似乎多了不少颜色的加入，但是由于使用面积都较少，除了少许修饰外主要运用于功能文字方面的强调。

辅助色蓝色正蓝色的HSB模式的H应该是240，目前这显示的是215可看出色相上稍向绿色靠拢，S93％B43%来看纯度和明度都不高，因此该蓝色在黑色上显示不明显。

这里的点睛色主要都运用在文字功能上，红色几乎是正红，由于降低了纯度和明度，该颜色不明显。绿色H数值为149，正绿色为120，色相上稍向蓝色倾斜，纯度和明度不高，因此该颜色也不明显。

结论：

低纯度低饱和度的色彩在黑色背景下，较易使整体色彩达到统一的目的，颜色变得柔和而含蓄。

6黑色配色：黑色+橙色

→ 黑色配色应用网页例图：http://www.africa.com.br

黑色系分析：（黑色配色：黑色+橙色）

橙色的HSB模式H色值显示是25，而正橙色是30可以知道，该橙色色相上稍往黄色倾斜。我们通过前面的学习可以知道橙色适用于视觉要求较高的时尚网站，运用于该网站主题设计再适合不过了。另一点睛橙色在色相上稍偏橙红色，是基于橙色的一个过渡或者说是增加视觉节奏感的一个小方法。右边文字在不同程度上也使用了橙色做为点睛，稍平衡了左右视觉，起到色彩左右呼应的作用。

辅色调白色使得黑色和橙色的搭配上不至于太生硬，增强页面视觉的愉悦感。

结论：

橙色在黑色的背景上显得很鲜亮，它的特性得到了最大化的发挥。

7黑色配色：黑色+红色

→ 黑色配色应用网页例图：http:///www.emilystrange.com

黑色系分析：（黑色配色：黑色+红色）

辅助色红色从HBS模式上的H为0度看出，该红色为正红色且纯度明度都为最高值100%，在黑色这一背景的衬托下，高纯度高明度的正红色遇到黑色搭配结合而得的特性简直发挥到了极致。因此该页面色彩配色具有极强的视觉冲击力。

点睛色白色是让这两种颜色配合起来更透亮，缓和对人视觉不适的压迫力。

尽管页面的设计元素为噪音效果，颜色在不同面积分配上也参差不齐的感觉，但是由于黑色主色调为背景，牢牢掌控了全局，页面设计及配色上也能达到统一的目的。

结论：

红色和黑色的搭配被誉为商业的成功色。一是因为红色是一种对人刺激性很强的颜色，是最鲜明生动的、最热烈的颜色。在黑色的反衬下鲜明红色极容易吸引人们的目光。红色相对于其他颜色，视觉传递速度最快。

红黑这两种配色也被广泛的运用于较能体现个性的时尚类网站，让人印象强烈的深刻。 　　本部分小节：

● 黑色是最暗的颜色，是纯度、色相、明度最低的非彩色。因此它较容易起到衬托和发挥起其他颜色的特性，是最有力的搭配色。

● 黑白色的搭配较充满个性，合理运用能散发出另外一种迷人的高品位高格调的贵族气质。黑色与橙色搭配较容易营造视觉要求较高的时尚网站。黑色与红色的搭配被誉为是商业的成功色，具有极强的视觉冲击力。

● 无论页面上使用或者色相跨度大的多种颜色、或是高纯度低纯度、或者高对比的颜色，只要有黑色这一最得力的色彩为主色调掌控着，页面设计配色上能得到和谐统一的效果。

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

灰色介于灰色和白色之间，中性色、中等明度、无色彩、极低色彩的颜色。灰色能够吸收其他色彩的活力，削弱色彩的对立面，而制造出融合的作用。

灰色是一种中立色，具有中庸、平凡、温和、谦让、中立和高雅的心理感受，也被称为高级灰，是经久不衰、最经看的颜色。

任何色彩加入灰色都能显得含蓄而柔和。但是灰色在给人高品味、含蓄、精致、雅致耐人寻味的同时，也容易给人颓废、苍凉、消极、沮丧、沉闷的感受，如果搭配不好页面容易显得灰暗、脏。

从色彩学上来说，灰色调又泛指所有含灰色度的复合色，而复合色又是三种以上颜色的调和色。色彩可以有红灰、黄灰、蓝灰等上万种彩色灰，这都是灰色调，而并不单指纯正的灰色。

下面我们根据灰色搭配不同的颜色所表现出的视觉特性，做一些不同的举例分析。

→ 灰色网页（明度浅灰色）例图：http://www.canubia.com

灰色系分析：（明度浅灰色）

从页面所呈现的明度色调来看，整个页面偏浅灰色调，柔美高雅的灰调子。

主色调及背景色是接近于明度白色且非常浅的灰调，辅色调的灰调子明度上较主色调稍深些，另一辅色调为白色。

RGB模式显示点睛色红色R217及G9来看不是正红色，在如此灰调子的页面来看，如果不参考RGB模式肉眼几乎看不出来。如果没有点睛色的加入整个页面呈毫无生气的灰色系，略有些脏的感觉，平淡且乏味，没能使大家对它产生过多的印象。红色的特性把以上的这些平淡的感受打破了，让人愿意细品灰色所带来的悠长韵味。

HSB模式的B也能看出浅灰色在明度上较高，部分渐变的深灰色在页面上所占用的面积也不少，另一点睛色黑色的作用就是使明度色阶跨度加深、明确，整个页面呈现灰蒙蒙的感觉得以减弱。

结论：

该页面整个看起来也可以说只有两种色彩搭配，即非色彩系黑白灰和色彩系红色，页面显得非常简洁而含蓄。点睛色的加入减少了非色调浅灰色有可能产生的单调感觉。

2同类灰色系：灰色＋橙色

→ 灰色网页（同类灰色系：灰色＋橙色）例图：http://www.hcreativos.com

灰色系分析：（同类灰色系：灰色＋橙色）

该页面主要以大面积的灰色系列为主，主色调为背景色非常明确。部分灰色只在明度上加深了，增强灰色的空间感。

从RGB所呈现的均衡数值及HSB模式的HS都为零来看，主色调的浅灰色属于非常纯净的非色彩，没有掺杂其他色系进去。而辅色调的两个模式上就有些差异，HSB模式的H显示180度色相上偏青蓝色，有及其微弱的饱和度，明度也较低。点睛色壬獺SB显示为正桔红色且饱和度和明度都为100％，应该是及其耀眼的颜色，然而在大面积背景主色调下，此种耀眼的颜色得到缓解，这正是与灰色的配色后显示出灰色最强烈的特性--削弱缓和刺激耀眼的颜色。

点睛色橙色和白色点缀下打破了平面平淡的配色格局，眼前顿时一亮的感觉。

结论：

灰色调非色彩所构成的页面颇具有独特的魅力，整个页面呈现出平稳缓和的气质。两个点睛色橙色和白色起到调动配色页面的作用。

3同类灰色＋多种颜色

→ 灰色应用（同类灰色＋多种颜色）网页例图： http://www.kimbyungjin.com

灰色系分析：（同类灰色＋多种颜色）

这是一个灰色阶变化较多的页面，形成较有节奏块面分明的韵律美感。这一变化改善了灰色容易形成的呆板单调特性。

从HSB模式数值来看，主色调辅色调都是非色彩的正灰色，没有掺杂其他色彩进去。点睛色黄色、绿色H数值上显示有些色相偏移都略向暖色色环靠拢，这两颜色的特性是属于较显眼的颜色。另外两点睛色粉红和粉蓝色在色相上已经较接近于正色系，明度较高饱和度降低。这四种颜色尽管所使用的面积非常少，但结合了面积上相对使用较多的非色彩白色，让整个页面配色雅致的同时不乏生动活跃。

结论：

不同灰色背景的变化，前景使用面积较少的纯净色点缀，这几种颜色还同样出现在右上角产生平衡色彩的呼应作用，整个页面产生雅致和谐的视觉美感。

4灰色＋对比色

→ 灰色配色（灰色＋对比色）网页例图：http://www.fantasy-interactive.com

灰色系分析：（灰色＋对比色）

从RGB和HSB模式上可看出主色调不是纯正的非色系，里面掺杂了其他色彩，肉眼识别及H色相为32范围上都能看出含有微弱的黄色调在里面，S13%B46%分别显示该种颜色含浓重的灰色，有少量的黄色加入结合整个页面的配色是比较调和的搭配。辅色调则是运用了比较正的浅灰色。

点睛色主要是一组橙色、蓝色对比色构成，从双方的H色相上也能看出来。RGB模式上看到这两种颜色都或多或少的掺杂了其他的颜色在里面，所以明度纯度上呈灰色阶倾向。另一点睛色浅黄色相上呈现正黄色，但由于明度非常高因此色彩呈不饱和状态，尽管如此在主色调灰色的背景下还是比较突出的。

结论：

该页面依旧以灰色为主导位置，虽然主色调灰色少量掺杂了黄色，与页面其他黄色色彩元素较统一调和。点睛色主要是以两对比色做主导，相对其他颜色饱和度较高且面积使用得不少，较响亮和突出产品目的。在主色调灰黄色特性掌控下却也到达醒目又和谐的目的。

5灰色+青蓝色

→ 灰色配色（灰色+青蓝色）应用网页例图：http://www.stylestation.net

灰色系分析：（灰色+青蓝色）

肉眼看上去已经能识别到了深灰色主色调有青蓝色倾向，从HSB模式上能够看到色相为180度，该深灰色饱和度和明度都比较低。

点睛色是浅青蓝色，HSB模式H色相所呈现的色相与主色调的数值一致，属高明度低饱和度色系。

主色调是明度较低的深灰色，是属于较沉闷的颜色；而点睛色是浅青蓝色，在深灰色的背景下略呈现有些暗淡，并没有改善和带来明快的感觉，辅助色是白色大面积的介入而因此使得整个页面得到一定的透亮缓解，这是该页面至关重要的一色。

结论：

该页面用色不多，深灰、浅青蓝、白，但合理的运用这三种颜色的配色角色，能使页面焕发与众不同的气质魅力。

6灰色+棕黄色

→ 灰色配色（灰色+棕黄色）应用网页例图：http:// www.davychan.com

灰色系分析：（灰色+棕黄色）

主色调是由两种明度较接近的灰色构成。从RGB和HSB模式上能看到这两种灰色属于纯正的非色彩，没有其他的颜色掺杂进去。

辅助色为复色，我们知道复色是由两种间色或者原色和间色混合产生，通常所混合产生的颜色色相不明显，当某种颜色所占的比重大时，该颜色的色相才相较突出。从H色相上看颜色稍偏黄色，由于混合其他颜色且明度较低，因此呈棕黄色。复色棕黄色在背景深灰的衬托下低调不张扬，能很好的与之融为一体。

点睛色H显示120度是正绿色。该绿色选择了明度适中纯度不高的配色，既表达了主题又能与整个页面灰调子很好的调和一起。另一点睛色白色让所有的颜色的特性都得以很好的发挥并起到拉开色阶层次的作用。

结论：

深灰色具有谦虚、平凡、沉默、中庸、寂寞、忧郁、消极的心理感受。

主色调主要集中在背景的运用和变化上，增强页面的空间感，视觉元素颇有时尚现代的气息，与前景的色彩明度纯度稍有变化又在视觉上达到风格统一。

7无彩色搭配

→ 灰色配色（无彩色搭配）应用网页例图：http://www.hejz.com

灰色系分析：（无彩色搭配）

就像回到了古老的黑白照年代。初看该页面容易把背景的深灰色误认为是黑色，再仔细观看就感觉到了此种深灰色不凡的作用，假如背景色使用了黑色，页面的主体人物和空间感的相互作用就变得僵硬且呆板。

从RGB和HSB模式上可知主色调深灰色为纯正的非色彩，明度很低。但与人物的毛发对比下就能看出它们明度之间的差异。

辅助色这里取的是照片的肤色，也是纯正的浅灰色，该人物占据了该页面三分之一的面积，主次鲜明。

尽管点睛色是明度最高的白色，但是由于只在小文字上的小面积使用，因此只起到了点缀一下页面细节突显主次关系的作用。

结论：

根据前面最初讲的网页应用部分的第一节色调，主色调、辅色调、点睛色所使用的面积比例来看，该页的例子得到了很好的诠释。

由于该页面是非色彩黑白灰构成，页面配色分析就变得简单化了不少，因此在其他页面实例里出现的主色调、辅色调、点睛色不同的色彩内敛与张扬的特性在这里也就涉及不到了。

本部分小节：

● 灰色谦和内敛的特性决定了不同明度的灰色扮演的是辅佐陪衬的角色。

● 非色彩就是没有彩度的颜色，而灰色相对黑色、白色要多些变化，因为它能的通过明度来表达不同的性格特征。

● 灰色与其他彩度色彩搭配时能降低张扬耀眼的颜色，调和色彩的方法之一。两种或两种以上的色彩混合，如能配上灰色，这两个色调本身必能相互调和。

● 以上的例子中不难看出，都是非色彩系灰色为主色调点缀极少面积的色彩系，色彩运用的面积反差越大，页面所呈现的独特魅力也就越强烈。灰色的特性在于能把刺激耀眼的颜色柔和化，这将是调和多个页面配色的利器，但要也要注意不同明度灰色所起到的配色作用，不同明度的灰色搭配不同的彩度颜色时，所得到的结果差别是很大，根据整体页面配色应在灰色明度上要反复的调整。

● 无彩度的黑白灰不同面积的使用，相对彩度色系来说是比较容易的颜色搭配，且能包容所有的彩度颜色。