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

网页设计配色应用实例剖析黑色系——黑色系黑色是暗色，是纯度、色相、明度最低的非彩色。象征着力量，有时感觉沉默、虚空，有时感觉庄严肃穆，有时又意味着不吉祥和罪恶。自古以来，世界各族都公认黑色代表死亡、悲哀黑色具有能吸收光线的特性，别有一种变幻无常的感觉。 黑色能和许多色彩构成良好的对比调和关系，运用范围很广。 黑色给人深沉、神秘、寂静、悲哀、压抑的感受。 黑色是最有力的搭配色。 黑色也常用来表示英俊的男人。 下面我们根据黑色系搭配不同的颜色所表现出的特性做不同的举例分析。 黑色网页例图： 黑色系分析：（明度对比：黑色+白色） 从RGB和HBS模式可以看出，三组数字显示没有掺杂任何的数字，都统一到最高级0到255，即纯黑和纯白。 黑色白色属于没有色相和饱和度、只在明度两极的非色彩。两种极端强烈对比的只在明度上有区别的颜色，与前面我们所说的三原色、对比色的对比还是有较大区别的。 该页面只有两种非色彩搭配，即黑色白色，衬映得该页面的设计元素也非常干净简练，旁边点缀大小得当的文字元素减小该页面有可能因此产生的单调感觉。 结论： 黑白纯色在明度上反差非常大，视觉冲击强烈，主次分明，全站的贯穿运用，构成特色鲜明的设计风格，散发迷人的高品位的贵族气息。 黑白两种颜色的搭配使用通常可以表现出都市化的感觉，常用于现代派页面设计中。 黑色系分析：（非色彩系：黑白深灰色） 该页面与上页配色类似，只是多了一组辅助色——灰色，黑、灰、白这三种非色彩在该页面里都运用到了。大家从该页整体可以看到，多了辅助色灰色，令该页面层次感更丰富，过渡更柔和，空间感觉增强。左上部点睛色白色块面的运用，使得这种空间感差距拉大，增强视觉层次感，同时突出标志品牌、主题思想。另一作用在于突出文字的功能运用。 背景深灰色明度非常低，接近于黑色，稍不留心有可能会被忽略。结合辅助色灰色再整体上看该色配色，主要起到丰富视觉层次感，缓和主色调黑色有可能带来的僵硬感。 结论： 黑白灰非色彩色调所构成的页面较具特色，尤其灰色的加入更增添层次感。 结合黑白图形，营造出一段古典的故事场景。契合该网站所体现的内容思想。 黑色系分析：黑色背景 背景黑色下，除了白色，还有其他三种颜色绿色、紫色、红色分布在不同的位置。其中绿色和紫色虽然被称之为辅助色，但它们使用的面积仍然不多，只是相对于点睛色红色来说。绿色主要是用于文字方面，紫色用于图形方面，所指向的分工明确。从RGB模式RGB三个数值上看到紫色混合数值上较接近，因此纯度降低，相对于绿色红色来说为中间色，色彩性能上呈低调缓和状态。 HSB模式S数值来看，绿色虽然纯度上比红色稍低些，也许是因为使用面积较多的原因，看起来似乎比红色醒目些。红色在这里主要起到的是点明目前所属的状态这一功能性作用，在黑色的背景下尽管使用面积非常小，但依旧容易被浏览者注意到。 结论： 黑色的背景下所使用的颜色面积虽然不多，但由于黑色这一衬托放大的特性，其他颜色较容易引起浏览者的注意，充分发挥其设计意图。 黑色系分析：（黑白浅灰） 从RGB数值都是234来上看可知，255为白色，背景色234只是在明度上稍做变化得到的浅灰色。背景的浅灰色把前景的白黑对视觉的刺激力变得柔和协调很多。虽为背景灰色，实际在整个页面配色作用上起到了点睛之笔，使得页面焕发出另外一种神秘且特殊的气息。 该页面无论从设计上还是配色上都非常简洁，主要是以黑白文字为重点，背后的白黑色块面粗、白色边框线条无不是为了突出前景文字的作用。 结论： 该页面设计风格极其简约，除了方形块面边框，没有多余的图形修饰，主要是以文字的大小粗细、疏密间距排版为设计元素。 浅灰色的加入让本来具强烈冲突色的黑白变得素雅些了，也颇具高层次格调许多。 黑色系分析：黑色＋少量彩色 该页面基本上还是以黑色为主色调，虽然似乎多了不少颜色的加入，但是由于使用面积都较少，除了少许修饰外主要运用于功能文字方面的强调。 辅助色蓝色正蓝色的HSB模式的H应该是240，目前这显示的是215可看出色相上稍向绿色靠拢，S93％B43%来看纯度和明度都不高，因此该蓝色在黑色上显示不明显。 这里的点睛色主要都运用在文字功能上，红色几乎是正红，由于降低了纯度和明度，该颜色不明显。绿色H数值为149，正绿色为120，色相上稍向蓝色倾斜，纯度和明度不高，因此该颜色也不明显。 结论： 低纯度低饱和度的色彩在黑色背景下，较易使整体色彩达到统一的目的，颜色变得柔和而含蓄。 黑色系分析：（黑色配色：黑色+橙色） 橙色的HSB模式H色值显示是25，而正橙色是30可以知道，该橙色色相上稍往黄色倾斜。我们通过前面的学习可以知道橙色适用于视觉要求较高的时尚网站，运用于该网站主题设计再适合不过了。另一点睛橙色在色相上稍偏橙红色，是基于橙色的一个过渡或者说是增加视觉节奏感的一个小方法。右边文字