网站风格制作典型配色方案

蓝雨

　　黄色系分析：

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

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

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

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

　　

蓝雨

　　黄色同类色分析

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

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

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

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

　　

蓝雨

　　中黄色系分析：

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

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

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

　　

蓝雨

　　黄绿色调分析：

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

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

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

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

　　

蓝雨

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

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

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

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

　　

蓝雨

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

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

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

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

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

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

　　

蓝雨

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

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

　　主色调的中黄色，从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度正黄色时，它的特性越明显。由于黄色的特性，在页面配色的时候可适当添加明度较深的颜色，色阶层拉开，并起到协调刺眼的艳度作用。黄色饱和度、明度的不同变化传达不同的意义和作用。

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

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

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

　　

　　

蓝雨

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

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

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

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

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

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

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

　　

蓝雨

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

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

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

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

　　

蓝雨

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

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

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