网页设计配色.doc

一、网页设计配色系列简析-基础部分网页设计配色基础：RGB与HSB在实用美术中，常有远看色彩近看花，先看颜色后看花，七分颜色三分花的说法。这说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。 为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。 RGBRGB是表示红绿蓝又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓多少就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示从0至255。虽然数字最高是255，但0也是数值之一，因此共256级。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即25625625616777216。通常也被简称为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,B0RGB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以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，比主色调高不少，但是因为亮度低，因此色彩显示没有主色调明艳。结论：页面色相的对比，主要作用于前景与背景的对比、局部与整体的对比。 明度对比明度对比可分为:彩色差的明度对比及非彩色差的明度对比 是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。 明度对比分析：（非彩色差）严格来说，页面是黑白灰色非色彩构成，图片中人物衣服为灰色，相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一，形成另一道独特的风景。 纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。 纯度对比分析：页面看起来异常艳丽刺激然而又非常的协调。主要选取了几种较有代表性的颜色。以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，充分发挥出了色彩的艳丽。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色拉开相近色阶的空间，明快页面。结论：页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色。 补色对比将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。 补色对比分析：冷色系绿色、蓝色组成背景纯度较低。前景主要是突出产品、文字信息内容的，与红色形成补色对比，RGB的R255与HSB是H0，标准的红色。纯度亮度达到最高值，加之白色的勾边，使得红色更为凸显，更易于视觉对信息的迅速捕捉。结论：对比色的合理搭配，能拉开前景与背景的空间感，突出页面主体。 冷暖对比是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系，以红、橙、黄为暖色系，蓝、绿、紫代表着冷色系，两者基本上互为补色关系。另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。 冷暖对比分析：乍一看颜色感觉鲜艳程度都差不多，但饱和度数值有相差，明度相近，因此给人造成的视觉感受几乎是相同的。页面冷暖色较为丰富，橙和蓝是对比最强烈的补色，其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡作用。主色调的浅蓝色亮度较高，让页面不易给人沉闷的感觉。结论：冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。通常初学者较容易使两色相互排斥，导致画面色调不谐调。一般我们采用两种调和的方法。 纯度调整降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配，或者加入补色的协调，也都能很好的起到协调的效果。纯度调整分析：主色调的橙色，添入了少许黑色做渐变背景色，降低了纯度。辅助色蓝色是橙色的补色，使得整个页面过多的暖色降低协调整体，及背景色棕色提暗降低纯度。左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑，纯度亮度很高的点睛色红色就起到了这个作用。结论：纯度的调整主要是通过明度黑、白、灰变化来调整画面的层次，适当的加入补色也是其中的一个办法。面积调整主次的面积区分。根据设计主题的需要，在画面的面积上以一方为主色，于是就掌控画面的色调作用，其他的颜色在使用面积上拉开距离，使画面的主次关系更突出，在统一的同时富有变化。 面积调整分析：大面积使用的主色调橙色饱和度亮度高，适当白色加入协调、平衡了视觉的作用外，主体的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用，缩小面积却又能突出视觉中心点，疏密构图的对比效果。结论：大面积的颜色和小面积使用的颜色可以拉开主次关系，位置的正确安排也是一个方面。 面积对比同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。称为色彩的面积效果。面积对比是指页面各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。 面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。 网页设计配色应用色彩的调和为使网页的整体画面呈现稳定协调的感觉，以便充分的掌握其规律来更好的分析学习，前面介绍了色调的视觉角色主次位置的几个概念，也介绍了色彩的对比。今介绍色彩的调和。两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。色彩调和是求得视觉统一，达到人们心理平衡的重要手段。 调和就是统一，下面介绍的四种方法能够达到调和页面色彩的目的。 同种色的调和相同色相、不同明度、纯度的色彩调和。使之产生秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感。同种色的调和分析：同种色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同加以区别的，产生及其微妙的韵律美。为了不让页面呈现过于单调平淡，加入极其小的其他颜色做点缀。页面使用同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。结论：同种色被称为最稳妥的色彩搭配方法。 类似色的调和在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。类似色的调和分析： 类似色相较于同类色色彩之间的可搭配度要大些，颜色丰富、富于变化。页面取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。虽然主色调米黄色在页面中使用面积最大，但是由于它的明度非常高，饱和度就降低了，在页面中处在不明显的角色。绿色的纯度最高，使用面积次之，页面显示较显眼，用于次级导航位置上。主次的视觉引导分明。结论：不是每种主色调都是极其显眼的位置，通常多扮演着用于突出主体的辅助性配角。而重要角色往往在页面中用的份量极少，却又起到突出主体的作用。 对比色的调和 调和方法有：1、提高或降低对比色的纯度；2、在对比色之间插入分割色（金、银、黑、白、灰等）；3、采用双方面积大小不同的处理方法；4、对比色之间加入相近的类似色。 对比色的调和分析：可以说黄色和紫色的对比色做页面的主要色调。黄色紫色组合在网页中使用率较低，这组颜色适用范围相对其他两组对比色要小很多，配色难度也较两组大。黄色加入红色呈中黄色，紫色加入红色偏玫瑰色，所以这组颜色不是严格意义上的对比色，因此使这组颜色看起来协调、舒服。页面调低亮度降低了纯度，缓和视觉刺激。白色是对比色里加入的协调色。结论：不是对比色为主色调的页面就一定会有不舒服的感觉的，主要通过调低亮度、降低饱和度、加入少许白色来调和。 渐变色的调和渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。 渐变色的调和分析：页面背景使用渐变的效果，增加了视觉空间感。在导航栏、广告区域、产品技术的大标题块，都使用渐变来表达，产生三维的视觉效果，统一整个页面的设计语言.结论：渐变能够柔和视觉，增强空间感，体现节奏和韵律美感，统一整个页面的目的。除了统一当然也可以起到变化页面视觉形式的作用。 本部分小结：本节主要对色彩的对比与调和做了实例分析。当页面平淡单调，需要用对比手法做些变化来丰富页面的色彩设计；当页面变化过多，显得刺眼、凌乱，通过以上调和方法进行调整，使页面看起来更统一协调。 主要通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越容易调和。 不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色，主要是根据色彩相互之间的搭配关系来体现的。 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配，容易产生个性效果，那叫玩色彩了，限于色彩运用得非常熟练的朋友，但不推荐初学者使用。网页设计配色应用实例剖析红色系红色色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。在众多颜色里，红色是最鲜明生动的、最热烈的颜色。因此红色是代表热情的情感之色。鲜明红色极容易吸引人们的目光。红色在不同的明度、纯度的状态（粉红、鲜红、深红）里，给人表达的情感是不一样的。在网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。通常都配以其他颜色调和。红色相对于其他颜色，视觉传递速度最快，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。为了让大家对红色的理解做更好的区别，下面分别对红色系与邻近色、同类色、对比色的搭配做不同的举例分析。 朱红色 朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。在色环表中，纯红色H为0，360方向是冷红色系，60方向黄色系。整个页面里，主色调朱红色面积非常大，辅助色主要由黑色、深红构成。主色调R255最高，S100%，充分表明红色最高特性。辅助色深红R222，B87%，其充当辅助角色。结论：背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。 这类颜色的组合容易使人提升兴奋度，红色特性明显，被广泛的应用于食品、时尚休闲等类型的网站。深红色 深红色在原有红色基础上降低明度，通过上图的数值看出明度较低。随着明度的变暗，容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。页面背景色运用纹样，是以目前选取的主色调颜色和明度较暗的深红色结合，使得明度稍暗。 主色调背景色饱和度较高，由于降低明度，颜色变得较沉稳。辅助色RGB添加其他颜色，G和B区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入提亮，页面视觉效果强化。结论：前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。玫瑰红色玫瑰红色色环上已经接近冷色，是红色系里的冷色系。HSB中H 0为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。页面主要由两种不同明度、纯度的玫瑰色调组成。两色RGB中R最高，红色特性较明显。辅助色玫瑰色，加入G，色调向冷色稍微偏移，由于加入G，HSB饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。主色调纯度达到最高饱和，由于明度降低，相对于辅色调较沉稳，适合做背景色。背景色和前景色明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。结论：背景色和前景色明度较接近，颜色给人的视觉较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。明度粉红色 粉红色主要是红色系中明度的高亮度的变化。是红色系里的冷色系。RGB显示明度较高，因此HSB中S纯度下降，几乎呈最低值。 主色调和辅助色对比可知：主色调混合的G较多且明度较高，因此纯度较低色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。辅助色R比主色调R稍高，红色性稍明显，加入G相对少，B明度稍低，因此相对纯度要高，辅助色在框架区域的导航位置突出导航。点睛色突出标志及购物主体的作用。背景白色除突出前面粉红色主体，在前景也有出现，背景色与前景色相互牵制，减少空间距离。结论：RGB数值呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。以粉红色为主色调的页面，女性主题内容特征倾向明显。粉红色页面里纯度都较低，任何一个纯度高小面积使用的颜色都能起到点睛的效果。这类颜色的组合多用于女性主题，例如：化妆品、服装等，鲜嫩而充满诱惑，传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。对比色：橙红色+蓝色 橙色是蓝色的对比色，这组对比色中的橙红色倾向于红色。 页面的背景色使用纹理图形由深至浅的制造空间范围，模拟真实环境。数值取其中间色值来分析，背景蓝色明度较低，由于冷色比暖色视觉传递速度慢，适合作为辅助角色突出前景的应用。主色调橙红色R255，SB都100%，视觉刺激非常强烈，运用大面积高纯度来突出蓝色产品主体，形成视觉对比-背景蓝色与前景橙红色，前景橙红色与产品主体蓝色的二次对比。点睛色白色，使这组对比色在页面中表现得更协调，调和的作用。结论：颜色的深浅能营造空间感的效果，也能辅助性的制造主次效果。颜色除性能对比，面积对比、位置安排也是制造主次效果的关键。橙色蓝色对比色在网页上比其他两组对比色红色绿色，黄色紫色应用得多，能迅速的传达网站主题内容、网页主体，容易增添强烈的兴奋感，多用于食品、休闲娱乐、产品等。配色：红色+黑色红色与黑色搭配被誉为商业成功色，鲜亮的红色多用于小面积的点缀色。红色添加G和B饱和度稍降低，因此红色大面积使用不会觉得刺激或不舒服，背景蓝色加入适量渐变，使页面的节奏呈现缓和。辅助色黑色的加入，与深红色在明度拉大，页面色彩元素相对活跃不少。点睛色白色，所放的位置和面积，起到平衡黑色位置面积的作用，也达到醒目的效果。结论：颜色位置的摆放，起到平衡页面视觉，突出主题效果。背景色渐变效果、整体与前景人物黑色对比呈浅色，前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系，构成空间环境的视觉效果。红色是降低明度的深红色，为主色调和背景色大面积使用。红黑搭配，常用于较前卫时尚、娱乐休闲、电子商务等等要求个性的网页设计配色里，也又有用于部分政治、新闻的页面。配色：红色+黑色+灰色 选红色为辅助色，从页面功能和表达主题看，红色作为页面的点睛色，强烈突出主题。红色HBS的H0，红色特性的最高值，S最高饱和度，在明度最低黑色背景衬托下，特性发挥到极致，页面醒目而响亮。红色与黑色本是对比强烈的配色，由于背景灰色，缓和页面的视觉刺激度。背景灰色RGB变化不大，因此颜色纯度较低、趋于平稳柔和，辅助前景内容的呈现。白色让前景和背景的划分更明显，活跃页面中的色彩元素。结论： 使用面积小的纯度高的颜色在非色彩的黑色和灰色上，是产生变化页面的颜色，达到突出主题的目的。本部分小节： 红色RGB中R255，HSB中H0，达到红色最高值。随着纯度的提高、亮度的适度增加，易迅速传达、醒目性特征发挥得越明显。和其他颜色一样，颜色相互混合的越多，明度越低，饱和度越低，视觉冲击力越弱。 颜色的对比：对比色红色绿色的搭配，红色的特性发挥得越明显。另外红与黑的搭配，也较能展现红色的魅力。 根据主题的需要，除对比色的应用，还有面积、位置上对比应用，也能很好达到突出主题产品主体的目的。网页设计配色应用实例剖析橙色系橙色具有轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。在整个色谱里，橙色具有兴奋感，是最耀眼的色彩。给人以华贵而温暖，兴奋而热烈的感觉，是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义，能给人庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。下面根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。橙色 橙色系分析：主色调橙色HSB的H 30正橙色。饱和度和亮度到最高值，页面的视觉刺激是极其耀眼强烈的。选取三种面积相当是整个页面使用得最少的颜色为点睛色，页面生动，运用于导航位置，从而达到突出主题的效果。HSB明度纯度相对较低，与明度纯度较高的背景正橙色形成鲜明的对比。范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛，呼应统一页面。辅助色在这里是橙色与白色的过渡色。结论：饱和度与纯度很高特性明显的颜色，在达到视觉冲击力的同时，可适当采用少许对比色调和缓和视觉，从而削弱视觉的疲劳度。深橙红色系 深橙红色系分析：色相度中0为正红色，30为正橙色，主色调HSB的H22，深橙红色是橙色基础上加入邻近色红色，整体上降低明度而得，红色本身较橙色明度低，橙红色的明度呈现出较低状态。 辅助色选明度相对于主色调更低的三种颜色，前面两种饱和度都较高，最后一种灰蓝色由于明度较高因此饱和度降低，是主色调与前面两种辅助色的协调色。页面背景色运用纹样，是主色调和明度较暗的深红色结合而得，使得明度稍暗。 主色调背景色饱和度较高，但是降低了明度，颜色变得较沉稳。辅助色添加其他颜色，G和B区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入和提亮，使页面视觉效果得到强化。 结论：前景色通常要较明显的区别背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时，形成的是另外一种柔和统一的效果。浅橙色同类色 浅橙色同类色分析：主色调辅色调在HSB的H36，页面色调是在同一种橙色的基础上明度发生变化。主色调是浅橙色，明度越高饱和度越低，页面上减弱了饱和度较高的橙色特性，网页呈现出柔和自然稍有些发灰的调子。网页是在橙色这个颜色上做不同明度黑白灰色阶的柔和变化，属于单色调配色非常的单纯。色阶平稳，同时存在着不够醒目的状态。白色起到拉开主色调和辅色调空间距离，增强辅色调橙色的特性，使整个稍许有些发灰的页面明快不少。也由于白色属于非色彩，只在明度上呈最高数值而无彩度，不能给页面带来彩度所具有的鲜活靓丽的感觉，另一方面却也呈现出质朴的感受。 结论：前面提到同类色是在同一色相中不同的明度颜色变化。因此这类颜色相对其他类别颜色来说明净而单纯，配色上较容易达到协调统一，但也容易显得单调。页面配色协调舒服，但看多的确有些单调乏味的感觉，这也是同类色搭配的特性。由于运用渐变调和方法，该页面占有前面提到的4种色彩中的调和方法的2种，整个页面呈现出调和中的调和是勿庸置疑的，但也同时显得有些单调，没有色彩亮点。橙色系邻近色（黄色+橙色橙红色） 橙色系邻近色（黄色+橙色橙红色）分析：看上去似乎色调上变化很多，但网页的色彩构成主要是由黄色和橙色这两种邻近色构成的，通过不同的明度和纯度的变化而得到更为丰富的色阶，它们是浅黄色、黄色、橙色、橙红通过不同的形状面积，位置变化而得。HSB中的H可以看出属于暖色范畴，三个色相的倾向不是很明显，以至于色彩呈现较规律、缓和。由于不同明度表达，纯度也做出不同变化。浅色主要起到调和主色调和点睛色的色彩过渡作用。点睛色强调整个页面的华丽感，增强页面彩度。结论：橙色与邻近色黄、红暖色调的搭配组合，是一种简单又安全的方法，视觉韵律上处理得井然有序。整个页面看起来艳泽华丽、新鲜充满活力的感觉，符合Tide这一主题所要表达的目的。橙色系对比色（橙色蓝色） 橙色系对比色（橙色蓝色）分析HSB中的H 26，正红色H为0，正橙H为30，主色调橙红色是往0偏移而得。正蓝色是240，点睛色蓝色为192，往绿偏移，在RGB中G160，因此蓝色的特性不是很强。但橙红色的明度饱和度达到最高值，因此尽管蓝色不是正蓝，但它的特性得到了很大程度的发挥。此种橙蓝对比色中的蓝色调配，比较少见，让人很容易记住它。而橙红色的饱和度明度都非常高，刺激度强，属于让人不可久视的颜色。介于橙红色和蓝色之间，与蓝色面积相当的白色，起到调和对比色橙红与蓝色之间关系的作用。 结论：这组对比色通过使用的面积位置的不同来反映主次之间的关系。对比色能相互强烈的突出色彩特性。这组对比色属于是非常能突显个性的颜色。橙色系低对比度（橙色+绿色） 橙色系低对比度（橙色+绿色）分析：不看数值会以为这是一组纯度较低的颜色。主色调HSB的H30正橙色，黄绿色的明度较低且色相倾向不够明确，背景有少许的暗橙色纹样，页面没有高亮度白色点缀衬托，使得纯度的彩度不够确切，很容易造成页面纯度较低的错觉。页面最亮的颜色除“书本”最亮色浅黄色外，就是点睛色黄色。黄色是所有彩度色中明度最高的颜色，不同明度纯度的黄色系让整个页面明亮了不少，它是整个页面明度色阶的最高调。黄绿色的出现，让本只有邻近色的橙色系多些内容，页面配色丰富不少、视觉节奏多些变化。 结论：这类颜色的组合随着不同色阶明度的变暗，页面没有白色衬托，制造出另外一种古典的环境氛围，有如娓娓道来的故事场景，也是一种不错的主题配色方法。 本页面的配色设计亮点是无白色设计。橙色系高纯度高对比度（橙红色+绿色） 橙色系高纯度高对比度（橙红色+绿色）分析：与上组的橙色绿色相比，这组颜色强烈而刺激，色彩倾向无疑明确很多。主色调橙红色往红色倾向，而红色的对比色是绿色，因此整组颜色有强烈的对比效果。HSB数值H上看，除蓝色外，其余几种颜色纯度都非常高，加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。黄色是中间色，起到过渡对比色作用，在这组色里属于调和色。蓝色出现在产品图案上，引导主次关系，增强视觉的注目点。结论：橙色是注目容易引起食欲的颜色，在这里得到较充分的应用。非色彩的白色和黑色在这里起到非常重要的作用，拉大色彩色阶空间的距离。白色让整个色调组合更加明快，而黑色增添色彩的厚重质感强烈中的强烈，增强对产品的视觉刺激。 本部分小节： 橙色HSB的H30，正橙色。橙色是非常响亮注目的颜色。橙色的对比色是蓝色，当这两种颜色彩度倾向越明确，对比强度就越大。但我们也看到，除正宗的对比色橙蓝色外，橙色和绿色随着纯度的升高，达到的对比效果也很强烈。 在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试，会有意想不到的收获。 白色是所有网页设计中较通用的颜色，它容易突出彩度的特性，明快整个页面，当页面设计没有使用白色时，空间感觉减弱，容易造成彩度不够明确、页面有些沉闷等反应，然而又相对来说增添页面的厚重感觉，制造另外一种环境气氛。黑色在色调组合的辅助角色里容易制造出厚重的色彩效果。又一次感受到色彩的相对性，没有绝对的配色组合，根据搭配不同的色彩组合或强或弱的表现出什么样的特性。 同类色、邻近色的组合，是非常调和的色彩组合，即使减少色相的数量，一样也可以调配出很多不同的调和色彩。对于初学者来说，这是一个非常实用的配色方法。网页设计配色应用实例剖析黄色系黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉。象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。它的亮度最高，和其他颜色配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个性。黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。浅黄色系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。中黄色有崇高，尊贵，辉煌、注意、扩张的心理感受。深黄色给人高贵、温和、内敛、稳重的心理感受。 下面根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。黄色系网页例图 黄色系分析：黄色是所有彩色中明度最高的颜色。上图HSB的H是60，是正黄色，RGB中B51，降低了HSB的饱和度S80，但是大面积的黄色仍使