您当前的位置: 首页 » HTML/XHTML/XML编程 » 网页设计配色应用实例剖析
网页设计配色应用实例剖析
论坛链接
网页设计配色应用实例剖析——橙色系
橙色具有轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。
在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。
在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。
下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。
橙色
→ 橙色网页例图：http:// www.wastelink.co.uk
橙色系分析：
主色调橙色HSB数值的H表示色相，显示的是30度，而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值，因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色，使页面生动的同时又运用于导航位置，从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低，与明度纯度较高的背景正橙色形成鲜明的对比。
通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时，又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
结论：
饱和度与纯度很高特性明显的颜色，在达到视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而削弱视觉的疲劳度。
深橙红色系
→ 深橙红色网页例图：http:// www.matisserestaurant.ca
深橙红色系分析：
从色相度中可以知道0度为正红色，30度为正橙色，而主色调的HSB数值H显示22度可知，该深橙红色是橙色基础上加入少许邻近色红色，整体上降低了明度而得，因为红色本身较橙色明度低，因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色，前面两种饱和度都较高，最后一种灰蓝色由于明度较高因此饱和度降低，是主色调与前面两种辅助色的协调色。
这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而得，使得明度稍暗。
数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB数值显示，添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入和提亮，使页面视觉效果得到强化。
结论：
前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时，形成的是另外一种柔和统一的效果。
浅橙色同类色
→ 浅橙色同类色网页例图： http:// www.talentic.com
浅橙色同类色分析：
从主色调和辅色调在HSB数值H显示的数值是36可以看出，该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色，明度越高饱和度越低，页面上减弱了饱和度较高的橙色特性，整个网页呈现出柔和自然稍有些发灰的调子。
该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化，属于单色调，配色非常的单纯。色阶平稳，同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离，增强辅色调橙色的特性，使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩，只在明度上呈最高数值而无彩度，不能给页面带来彩度所具有的鲜活靓丽的感觉，另一方面却也呈现出质朴的感受。
结论：
前面我们提到过同类色是在同一色相中不同的明度颜色变化。因此这类颜色相对其他类别颜色来说明净而单纯，配色上较容易达到协调统一，但也容易显得单调。
初看该页面配色协调舒服，但看多了的确有些单调乏味的感觉，这也是同类色搭配的特性。同时由于运用了渐变色这一调和方法，该页面同时占有了前面我们提到的4种色彩中的调和方法的2种，整个页面呈现出调和中的调和是勿庸置疑的，但也同时显得有些单调，没有色彩亮点。
橙色具有轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。
在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。
在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。
下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。
橙色
→ 橙色网页例图：http:// www.wastelink.co.uk
橙色系分析：
主色调橙色HSB数值的H表示色相，显示的是30度，而30度正是橙色显示特征最标准的颜色——正橙色。饱和度和亮度同时达到最高值，因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色，使页面生动的同时又运用于导航位置，从而达到突出主题的效果。从HSB数值上看它们的明度纯度相对较低，与明度纯度较高的背景正橙色形成鲜明的对比。
通过范围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时，又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
结论：
饱和度与纯度很高特性明显的颜色，在达到视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而削弱视觉的疲劳度。
深橙红色系
→ 深橙红色网页例图：http:// www.matisserestaurant.ca
深橙红色系分析：
从色相度中可以知道0度为正红色，30度为正橙色，而主色调的HSB数值H显示22度可知，该深橙红色是橙色基础上加入少许邻近色红色，整体上降低了明度而得，因为红色本身较橙色明度低，因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色，前面两种饱和度都较高，最后一种灰蓝色由于明度较高因此饱和度降低，是主色调与前面两种辅助色的协调色。
这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而得，使得明度稍暗。
数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB数值显示，添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入和提亮，使页面视觉效果得到强化。
结论：
前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时，形成的是另外一种柔和统一的效果。
浅橙色同类色
→ 浅橙色同类色网页例图： http:// www.talentic.com
浅橙色同类色分析：
从主色调和辅色调在HSB数值H显示的数值是36可以看出，该页面色调是在同一种橙色的基础上只在明度上发生了变化。由于主要色调是浅橙色，明度越高饱和度越低，页面上减弱了饱和度较高的橙色特性，整个网页呈现出柔和自然稍有些发灰的调子。
该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化，属于单色调，配色非常的单纯。色阶平稳，同时存在着不够醒目的状态。白色在这里是起到了拉开主色调和辅色调空间距离，增强辅色调橙色的特性，使整个稍许有些发灰的页面明快了不少。但也由于白色属于非色彩，只在明度上呈最高数值而无彩度，不能给页面带来彩度所具有的鲜活靓丽的感觉，另一方面却也呈现出质朴的感受。
结论：
前面我们提到过同类色是在同一色相中不同的明度颜色变化。因此这类颜色相对其他类别颜色来说明净而单纯，配色上较容易达到协调统一，但也容易显得单调。
初看该页面配色协调舒服，但看多了的确有些单调乏味的感觉，这也是同类色搭配的特性。同时由于运用了渐变色这一调和方法，该页面同时占有了前面我们提到的4种色彩中的调和方法的2种，整个页面呈现出调和中的调和是勿庸置疑的，但也同时显得有些单调，没有色彩亮点。
#2楼发布者：webptr时间：2007-09-11 14:32:58
邻近色橙色网页例图：http:// www.tide.com
橙色系邻近色（黄色+橙色＋橙红色）分析：
虽然第一眼看上去似乎色调上变化很多，但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的，通过不同的明度和纯度的变化而得到更为丰富的色阶，它们是浅黄色、黄色、橙色、橙红通过不同的形状面积，位置变化而得。从HSB数值中的H可以看出属于暖色范畴，三个色相的倾向不是很明显，以至于色彩呈现较规律、缓和。由于不同数值的明度表达，纯度也做出了不同的数值变化。
浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感，增强整个页面彩度的作用。
结论：
橙色与邻近色黄、红暖色调的搭配组合，这是一种简单又安全的方法，视觉韵律上处理得井然有序。整个页面看起来艳泽华丽、新鲜充满活力的感觉，符合Tide这一主题所要表达的目的。
橙色系对比色（橙色＋蓝色）
→ 对比色橙红色应用网页例图：www.rastifilms.com.ar
橙色系对比色（橙色＋蓝色）分析
HSB数值中的H色相显示主色调橙红色为26，我们知道正红色的H为0，正橙H为30，主色调橙红色是往0偏移而得。正蓝色是240，而该点睛色蓝色为 192，往绿度偏移，在RGB中的数值G160也能看出来，因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值，因此尽管蓝色不是正蓝，但它的特性得到了很大程度的发挥。
此种橙蓝对比色中的蓝色调配，比较少见，让人很容易记住它。而橙红色的饱和度明度都非常高，刺激度强，属于让人不可久视的颜色。
介于橙红色和蓝色之间，与蓝色面积相当的白色，起到调和对比色橙红与蓝色之间关系的作用。
结论：
这组对比色通过使用的面积位置的不同来反映主次之间的关系。对比色能相互强烈的突出色彩特性。这组对比色属于是非常能突显个性的颜色。
→ 橙色低对比应用网页例图：http:// www.colourpixel.com
橙色系低对比度（橙色+绿色）分析：
如果不看数值参数，刚一开始看会以为这是一组纯度较低的颜色。HSB数值H显示主色调为正橙色，而黄绿色的明度较低且色相倾向不够明确，加之背景有少许的暗橙色纹样，整个页面没有高亮度白色点缀衬托，使得纯度的彩度不够确切，就很容易造成了该页面纯度较低的错觉。
整个页面最亮的颜色除了“书本”最亮色浅黄色外，就是点睛色黄色了。我们知道黄色是所有彩度色中明度最高的颜色，不同明度纯度的黄色系让整个页面明亮了不少，它是整个页面明度色阶的最高调。
黄绿色的出现，让本只有邻近色的橙色系列多了些内容，页面配色丰富不少、视觉节奏多了些变化。
结论：
这类颜色的组合随着不同色阶明度的变暗，整个页面没有白色衬托，制造出另外一种古典的环境氛围，有如娓娓道来的故事场景，也是一种不错的主题配色方法。
橙色系邻近色（黄色+橙色＋橙红色）分析：
虽然第一眼看上去似乎色调上变化很多，但该网页的色彩构成主要是由黄色和橙色这两种邻近色构成的，通过不同的明度和纯度的变化而得到更为丰富的色阶，它们是浅黄色、黄色、橙色、橙红通过不同的形状面积，位置变化而得。从HSB数值中的H可以看出属于暖色范畴，三个色相的倾向不是很明显，以至于色彩呈现较规律、缓和。由于不同数值的明度表达，纯度也做出了不同的数值变化。
浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用。点睛色在这里起到强调整个页面的华丽感，增强整个页面彩度的作用。
结论：
橙色与邻近色黄、红暖色调的搭配组合，这是一种简单又安全的方法，视觉韵律上处理得井然有序。整个页面看起来艳泽华丽、新鲜充满活力的感觉，符合Tide这一主题所要表达的目的。
橙色系对比色（橙色＋蓝色）
→ 对比色橙红色应用网页例图：www.rastifilms.com.ar
橙色系对比色（橙色＋蓝色）分析
HSB数值中的H色相显示主色调橙红色为26，我们知道正红色的H为0，正橙H为30，主色调橙红色是往0偏移而得。正蓝色是240，而该点睛色蓝色为 192，往绿度偏移，在RGB中的数值G160也能看出来，因此蓝色的特性不是很强。但由于橙红色的明度饱和度达到最高值，因此尽管蓝色不是正蓝，但它的特性得到了很大程度的发挥。
此种橙蓝对比色中的蓝色调配，比较少见，让人很容易记住它。而橙红色的饱和度明度都非常高，刺激度强，属于让人不可久视的颜色。
介于橙红色和蓝色之间，与蓝色面积相当的白色，起到调和对比色橙红与蓝色之间关系的作用。
结论：
这组对比色通过使用的面积位置的不同来反映主次之间的关系。对比色能相互强烈的突出色彩特性。这组对比色属于是非常能突显个性的颜色。
→ 橙色低对比应用网页例图：http:// www.colourpixel.com
橙色系低对比度（橙色+绿色）分析：
如果不看数值参数，刚一开始看会以为这是一组纯度较低的颜色。HSB数值H显示主色调为正橙色，而黄绿色的明度较低且色相倾向不够明确，加之背景有少许的暗橙色纹样，整个页面没有高亮度白色点缀衬托，使得纯度的彩度不够确切，就很容易造成了该页面纯度较低的错觉。
整个页面最亮的颜色除了“书本”最亮色浅黄色外，就是点睛色黄色了。我们知道黄色是所有彩度色中明度最高的颜色，不同明度纯度的黄色系让整个页面明亮了不少，它是整个页面明度色阶的最高调。
黄绿色的出现，让本只有邻近色的橙色系列多了些内容，页面配色丰富不少、视觉节奏多了些变化。
结论：
这类颜色的组合随着不同色阶明度的变暗，整个页面没有白色衬托，制造出另外一种古典的环境氛围，有如娓娓道来的故事场景，也是一种不错的主题配色方法。
#3楼发布者：webptr时间：2007-09-11 14:35:34
本页面的配色设计亮点是——无白色设计。
橙色系高纯度高对比度（橙红色+绿色）
→ 橙色高纯度对比应用网页例图： www.aliveis.com
橙色系高纯度高对比度（橙红色+绿色）分析：
与上组的橙色绿色相比，这组颜色强烈而刺激，色彩倾向无疑明确了很多。主色调橙红色往红色倾向，而红色的对比色是绿色，因此整组颜色有强烈的对比效果。从HSB数值H上看，除了蓝色外，其余几种颜色纯度都非常高，加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。
黄色是中间色，起到过渡对比色作用，在这组色里属于调和色。蓝色出现在产品图案上，引导主次关系，增强视觉的注目点。
结论：
橙色是注目容易引起食欲的颜色，在这里得到了较充分的应用。
非色彩的白色和黑色在这里起到了非常重要的作用，拉大了色彩色阶空间的距离。白色让整个色调组合更加明快，而黑色增添色彩的厚重质感——强烈中的强烈，增强对产品的视觉刺激。
本部分小节：
● 橙色在HSB数值的H中为30度，是正橙色。橙色是一个非常响亮注目的颜色。橙色的对比色是蓝色，当这两种颜色彩度倾向越明确，对比强度就越大。但我们也看到，除了正宗的对比色橙蓝色外，橙色和绿色随着纯度的升高，达到的对比效果也很强烈。
在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试，会有意想不到的收获。
● 白色是所有网页设计中属于较通用的颜色，它容易突出彩度的特性，明快于整个页面，当一个页面设计没有使用白色时，空间感觉减弱，容易造成彩度不够明确、页面有些沉闷等反应，然而又相对来说增添页面的厚重感觉，制造另外一种环境气氛。黑色在色调组合的辅助角色里容易制造出厚重的色彩效果。
从这里我们又一次感受到色彩的相对性，即没有绝对的配色组合，它们总是根据搭配不同的色彩组合或强或弱的表现出什么样的特性。
● 同类色、邻近色的组合，是非常调和的色彩组合，即使减少了色相的数量，一样也可以调配出很多不同的调和色彩。对于初学者来说，这是一个非常实用的配色方法。
网页设计配色应用实例剖析——红色系
红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。
在众多颜色里，红色是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。
红色在不同的明度、纯度的状态（粉红、鲜红、深红）里，给人表达的情感是不一样的。
在网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。通常都配以其他颜色调和。
红色相对于其他颜色，视觉传递速度最快。由于以上的这些红色传达出的特性，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。
为了让大家对红色的理解做更好的区别，下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。
朱红色
→ 朱红色网页例图：http://www.muchvibe.ca
朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。在色环表中，纯红色在HSB里为0度，往360度方向呈现的是冷红色系，0度方向为黄色系。
整个页面里，主色调朱红色面积非常大、确定明显，辅助色主要由黑色、深红构成，（数值上选取的是深红色做标示）。主色调的R呈现出255最高数值，S中100%，充分标明了红色最高特性。辅助色的深红R为222，B87%，显示其充当辅助角色的这一特性。
结论：
背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。
这类颜色的组合比较容易使人提升兴奋度，红色特性明显，这一醒目的特殊属性，比较被广泛的应用于食品、时尚休闲等等类型的网站。
深红色
→ 深红色网页例图：http:// www.sisley.com
深红色在原有的红色基础上降低了明度而得，是红色系中的明度变化。通过上图的数值显示看出明度较低。
这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。
这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而的，使得明度稍暗。
数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入提亮，页面视觉效果强化。
结论：
前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。
橙色系高纯度高对比度（橙红色+绿色）
→ 橙色高纯度对比应用网页例图： www.aliveis.com
橙色系高纯度高对比度（橙红色+绿色）分析：
与上组的橙色绿色相比，这组颜色强烈而刺激，色彩倾向无疑明确了很多。主色调橙红色往红色倾向，而红色的对比色是绿色，因此整组颜色有强烈的对比效果。从HSB数值H上看，除了蓝色外，其余几种颜色纯度都非常高，加上又是近于红绿对比色。页面的刺激强度是可想而知的强烈。
黄色是中间色，起到过渡对比色作用，在这组色里属于调和色。蓝色出现在产品图案上，引导主次关系，增强视觉的注目点。
结论：
橙色是注目容易引起食欲的颜色，在这里得到了较充分的应用。
非色彩的白色和黑色在这里起到了非常重要的作用，拉大了色彩色阶空间的距离。白色让整个色调组合更加明快，而黑色增添色彩的厚重质感——强烈中的强烈，增强对产品的视觉刺激。
本部分小节：
● 橙色在HSB数值的H中为30度，是正橙色。橙色是一个非常响亮注目的颜色。橙色的对比色是蓝色，当这两种颜色彩度倾向越明确，对比强度就越大。但我们也看到，除了正宗的对比色橙蓝色外，橙色和绿色随着纯度的升高，达到的对比效果也很强烈。
在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试，会有意想不到的收获。
● 白色是所有网页设计中属于较通用的颜色，它容易突出彩度的特性，明快于整个页面，当一个页面设计没有使用白色时，空间感觉减弱，容易造成彩度不够明确、页面有些沉闷等反应，然而又相对来说增添页面的厚重感觉，制造另外一种环境气氛。黑色在色调组合的辅助角色里容易制造出厚重的色彩效果。
从这里我们又一次感受到色彩的相对性，即没有绝对的配色组合，它们总是根据搭配不同的色彩组合或强或弱的表现出什么样的特性。
● 同类色、邻近色的组合，是非常调和的色彩组合，即使减少了色相的数量，一样也可以调配出很多不同的调和色彩。对于初学者来说，这是一个非常实用的配色方法。
网页设计配色应用实例剖析——红色系
红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。
在众多颜色里，红色是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。
红色在不同的明度、纯度的状态（粉红、鲜红、深红）里，给人表达的情感是不一样的。
在网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。通常都配以其他颜色调和。
红色相对于其他颜色，视觉传递速度最快。由于以上的这些红色传达出的特性，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。
为了让大家对红色的理解做更好的区别，下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。
朱红色
→ 朱红色网页例图：http://www.muchvibe.ca
朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。在色环表中，纯红色在HSB里为0度，往360度方向呈现的是冷红色系，0度方向为黄色系。
整个页面里，主色调朱红色面积非常大、确定明显，辅助色主要由黑色、深红构成，（数值上选取的是深红色做标示）。主色调的R呈现出255最高数值，S中100%，充分标明了红色最高特性。辅助色的深红R为222，B87%，显示其充当辅助角色的这一特性。
结论：
背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。
这类颜色的组合比较容易使人提升兴奋度，红色特性明显，这一醒目的特殊属性，比较被广泛的应用于食品、时尚休闲等等类型的网站。
深红色
→ 深红色网页例图：http:// www.sisley.com
深红色在原有的红色基础上降低了明度而得，是红色系中的明度变化。通过上图的数值显示看出明度较低。
这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。
这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而的，使得明度稍暗。
数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。点睛色的加入提亮，页面视觉效果强化。
结论：
前景色通常要较明显的区别于背景色，达到台前的宣传目的。当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。
#4楼发布者：webptr时间：2007-09-11 14:36:57
玫瑰红色
→ 玫瑰红色网页例图：http://www.gentverwent.be
玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。
这个页面主要由两种不同明度、纯度的玫瑰色调组成。两色数值显示，我们看到RGB数值中R呈现的数值最高，红色特性较明显。辅助色调的玫瑰色，加入少许 G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。
数值上看，由于背景色和前景色的明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。
结论：
背景色和前景色的明度较接近，颜色给人的视觉表象较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。
这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。
明度粉红色
→ 明度粉红色网页例图：http:// www.enjo.com.au
粉红色主要是红色系中的明度的高亮度的变化。是红色系里的冷色系。RGB数值显示明度较高，因此HSB中S纯度下降，几乎呈最低值。
主色调和辅助色调数值对比可知：主色调混合的G的份量较多且明度较高，因此纯度较低，色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。辅助色R数值比主色调的R数值稍高，红色性稍明显，加入的G相对少，B明度稍低，因此相对纯度要高，辅色位置应用在框架区域的导航位置，起到突出导航作用。点睛色突出标志及购物主体的作用。
背景白色除了突出前面粉红色主体的作用，在前景也有出现，背景色与前景色的相互牵制，减少空间距离的效果。
结论：
RGB数值中，数值同时呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。这里以粉红色为主色调的页面，女性主题内容特征倾向明显。这组粉红色页面里，由于纯度都较低，任何一个纯度高小面积使用的颜色都能起到点睛的效果。
这类颜色的组合多用于女性主题，例如：化妆品、服装等，鲜嫩而充满诱惑，传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。
对比色：橙红色+蓝色
→ 对比色橙红色应用网页例图：http://www. tostitos.com
严格上来说，橙色是蓝色的对比色，这组对比色中的橙红色倾向于红色。
该页面的背景色使用纹理图形由深至浅的制造空间范围，模拟真实环境。这里的数值选取其中间色值来分析，由于背景蓝色B的明度较低，又由于冷色比暖色视觉传递速度慢的特点，很适合作为辅助角色突出前景的应用。主色调橙红色R的数值达到最高值255，SB都达到了最高值100%，视觉刺激非常强烈，运用大面积高纯度来突出蓝色产品主体物，又形成了一次页面上的视觉对比--背景蓝色与前景橙红色，前景橙红色与产品主体物蓝色的二次对比。
点睛色白色，使这组对比色在页面中表现得更协调，调和的作用。
结论：
颜色的深浅除了能营造空间感的效果，也能辅助性的制造主次效果。颜色除了性能对比，面积对比、位置安排也是制造主次效果的关键。
这组橙色蓝色对比色在网页上比其他两组对比色红色绿色，黄色紫色应用得多，能迅速的传达网站主题内容、网页主体，容易增添强烈的兴奋度，多用于食品、休闲娱乐、产品等，但却又是跨越于各行业的主题网站，适用的范围非常大。
→ 玫瑰红色网页例图：http://www.gentverwent.be
玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。
这个页面主要由两种不同明度、纯度的玫瑰色调组成。两色数值显示，我们看到RGB数值中R呈现的数值最高，红色特性较明显。辅助色调的玫瑰色，加入少许 G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。
数值上看，由于背景色和前景色的明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。
结论：
背景色和前景色的明度较接近，颜色给人的视觉表象较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。
这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。
明度粉红色
→ 明度粉红色网页例图：http:// www.enjo.com.au
粉红色主要是红色系中的明度的高亮度的变化。是红色系里的冷色系。RGB数值显示明度较高，因此HSB中S纯度下降，几乎呈最低值。
主色调和辅助色调数值对比可知：主色调混合的G的份量较多且明度较高，因此纯度较低，色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。辅助色R数值比主色调的R数值稍高，红色性稍明显，加入的G相对少，B明度稍低，因此相对纯度要高，辅色位置应用在框架区域的导航位置，起到突出导航作用。点睛色突出标志及购物主体的作用。
背景白色除了突出前面粉红色主体的作用，在前景也有出现，背景色与前景色的相互牵制，减少空间距离的效果。
结论：
RGB数值中，数值同时呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。这里以粉红色为主色调的页面，女性主题内容特征倾向明显。这组粉红色页面里，由于纯度都较低，任何一个纯度高小面积使用的颜色都能起到点睛的效果。
这类颜色的组合多用于女性主题，例如：化妆品、服装等，鲜嫩而充满诱惑，传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。
对比色：橙红色+蓝色
→ 对比色橙红色应用网页例图：http://www. tostitos.com
严格上来说，橙色是蓝色的对比色，这组对比色中的橙红色倾向于红色。
该页面的背景色使用纹理图形由深至浅的制造空间范围，模拟真实环境。这里的数值选取其中间色值来分析，由于背景蓝色B的明度较低，又由于冷色比暖色视觉传递速度慢的特点，很适合作为辅助角色突出前景的应用。主色调橙红色R的数值达到最高值255，SB都达到了最高值100%，视觉刺激非常强烈，运用大面积高纯度来突出蓝色产品主体物，又形成了一次页面上的视觉对比--背景蓝色与前景橙红色，前景橙红色与产品主体物蓝色的二次对比。
点睛色白色，使这组对比色在页面中表现得更协调，调和的作用。
结论：
颜色的深浅除了能营造空间感的效果，也能辅助性的制造主次效果。颜色除了性能对比，面积对比、位置安排也是制造主次效果的关键。
这组橙色蓝色对比色在网页上比其他两组对比色红色绿色，黄色紫色应用得多，能迅速的传达网站主题内容、网页主体，容易增添强烈的兴奋度，多用于食品、休闲娱乐、产品等，但却又是跨越于各行业的主题网站，适用的范围非常大。
#5楼发布者：webptr时间：2007-09-11 14:37:21
配色：红色+黑色
→ 红色配色应用网页例图：http:// www.pleasuredome.it
红色与黑色的搭配在商业设计中，被誉为商业成功色，鲜亮的红色多用于小面积的点缀色。
从数值上看，红色添加了G和B饱和度稍降低，因此该红色大面积使用不会觉得刺激或不舒服，这也与背景色蓝色加入了适量渐变的技法，使得页面的节奏呈现缓和。辅助色黑色的加入，与深红色在明度拉大，页面色彩元素相对活跃不少。
点睛色白色，所放的位置和面积，起到平衡黑色位置面积的作用，当然也达到醒目的效果。
结论：
这里颜色位置的摆放，起到平衡页面视觉，突出主题效果。背景色加了渐变效果、整体与前景人物黑色对比呈浅色，前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系，构成空间环境的视觉效果。
这组配色中，红色是降低了明度的深红色，为主色调和背景色的大面积使用。红黑搭配色，常用于较前卫时尚、娱乐休闲、电子商务等等要求个性的网页设计配色里，也又有用于部分政治、新闻的页面。
配色：红色+黑色+灰色
→ 红色配色应用网页例图：http:// www.enjo.com.au
这组配色，达到最高纯度的红色做小面积的使用。虽然这里选取了红色做为辅助色，但从整个页面的功能和所表达的主题来看，红色可以作为该页面的点睛色，强烈的突出了主题。
红色的数值显示，HBS中的H为0度，达到红色特性的最高值，S为最高饱和度100%，在明度最低的黑色背景的衬托下，其特性发挥到极致，页面醒目而响亮。
红色与黑色本是对比强烈的配色，但由于背景灰色的作用，缓和整个页面的视觉刺激度。背景色灰色RGB数值变化不大，因此颜色纯度较低、趋于平稳柔和，辅助前景内容的呈现。
白色让前景和背景的划分更明显，活跃页面中的色彩元素。
结论：
使用面积小的纯度高的颜色在非色彩的黑色和灰色上，是产生变化页面的颜色，达到容易突出主题的目的。
本部分小节：
● 红色在RGB数值的R为255左右，HSB数值的H中为0度左右，达到红色最高值。随着纯度的提高、亮度的适度增加，它易于迅速的传达、醒目性的特征发挥得越明显。和其他颜色一样，颜色相互混合的越多，明度越低，饱和度越低，视觉冲击力越弱。
● 颜色的对比：对比色红色绿色的搭配，红色的特性发挥得越明显。绿叶衬红花的效果。另外红与黑的搭配，也较能展现红色的魅力。
● 根据主题的需要，除了对比色的应用，还有面积上、位置上的对比应用，也能很好的配合达到突出主题产品主体物的目的。
→ 红色配色应用网页例图：http:// www.pleasuredome.it
红色与黑色的搭配在商业设计中，被誉为商业成功色，鲜亮的红色多用于小面积的点缀色。
从数值上看，红色添加了G和B饱和度稍降低，因此该红色大面积使用不会觉得刺激或不舒服，这也与背景色蓝色加入了适量渐变的技法，使得页面的节奏呈现缓和。辅助色黑色的加入，与深红色在明度拉大，页面色彩元素相对活跃不少。
点睛色白色，所放的位置和面积，起到平衡黑色位置面积的作用，当然也达到醒目的效果。
结论：
这里颜色位置的摆放，起到平衡页面视觉，突出主题效果。背景色加了渐变效果、整体与前景人物黑色对比呈浅色，前景人物黑色与背景深红色、背景深红与前景白色文字相互之间的关系，构成空间环境的视觉效果。
这组配色中，红色是降低了明度的深红色，为主色调和背景色的大面积使用。红黑搭配色，常用于较前卫时尚、娱乐休闲、电子商务等等要求个性的网页设计配色里，也又有用于部分政治、新闻的页面。
配色：红色+黑色+灰色
→ 红色配色应用网页例图：http:// www.enjo.com.au
这组配色，达到最高纯度的红色做小面积的使用。虽然这里选取了红色做为辅助色，但从整个页面的功能和所表达的主题来看，红色可以作为该页面的点睛色，强烈的突出了主题。
红色的数值显示，HBS中的H为0度，达到红色特性的最高值，S为最高饱和度100%，在明度最低的黑色背景的衬托下，其特性发挥到极致，页面醒目而响亮。
红色与黑色本是对比强烈的配色，但由于背景灰色的作用，缓和整个页面的视觉刺激度。背景色灰色RGB数值变化不大，因此颜色纯度较低、趋于平稳柔和，辅助前景内容的呈现。
白色让前景和背景的划分更明显，活跃页面中的色彩元素。
结论：
使用面积小的纯度高的颜色在非色彩的黑色和灰色上，是产生变化页面的颜色，达到容易突出主题的目的。
本部分小节：
● 红色在RGB数值的R为255左右，HSB数值的H中为0度左右，达到红色最高值。随着纯度的提高、亮度的适度增加，它易于迅速的传达、醒目性的特征发挥得越明显。和其他颜色一样，颜色相互混合的越多，明度越低，饱和度越低，视觉冲击力越弱。
● 颜色的对比：对比色红色绿色的搭配，红色的特性发挥得越明显。绿叶衬红花的效果。另外红与黑的搭配，也较能展现红色的魅力。
● 根据主题的需要，除了对比色的应用，还有面积上、位置上的对比应用，也能很好的配合达到突出主题产品主体物的目的。