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

纯白色数值为R255,G255,B255 纯白色数值为
纯黑色数值为R0,G0,B0 纯黑色数值为
红色数值为R255,G0,B0 红色数值为
绿色数值为R0,G255,B0 绿色数值为
蓝色数值为R0,G0,B255 蓝色数值为
黄色数值为R255,G255,B0 黄色数值为
RGB模式是显示器的物理色彩模式。这就意味着无 论在软件中使用何种色彩模式，只要是在显示器上 显示的，图像最终就是以RGB方式出现。
黑色网页例图：http://www.chanel.com
黑色系分析：（明度对比：黑色+白色） 从RGB和HBS模式可以看出，三组数字显示没有 掺杂任何的数字，都统一到最高级0到255，即纯 黑和纯白。 黑色白色属于没有色相和饱和度、只在明度两极 的非色彩。两种极端强烈对比的只在明度上有区 别的颜色，与前面我们所说的三原色、对比色的 对比还是有较大区别的。 该页面只有两种非色彩搭配，即黑色白色，衬映 得该页面的设计元素也非常干净简练，旁边点缀 大小得当的文字元素减小该页面有可能因此产生 的单调感觉。
HSB 是颜色分为色相、饱和度、明度三个 因素。英文为H(Hue)、S（Saturation）B （Brightness)饱和度高色彩较艳丽。饱和 度低色彩就接近灰色。亮度高色彩明亮， 亮度低色彩暗淡，亮度最高得到纯白，最 低得到纯黑。一般浅色的饱和度较低，亮 度较高，而深色的饱和度高而亮度低。
点睛色橙色和白色点缀下打破了平面平淡 的配色格局，眼前顿时一亮的感觉。 结论： 灰色调非色彩所构成的页面颇具有独 特的魅力，整个页面呈现出平稳缓和的气 质。两个点睛色橙色和白色起到调动配色 页面的作用。
灰色应用（同类灰色＋多种颜色）网页例图： http://www.kimbyungjin.com
从色彩学上来说，灰色调又泛指所有含灰 色度的复合色，而复合色又是三种以上颜 色的调和色。色彩可以有红灰、黄灰、蓝 灰等上万种彩色灰，这都是灰色调，而并 不单指纯正的灰色。 下面我们根据灰色搭配不同的颜色所表现 出的视觉特性，做一些不同的举例分析。
灰色网页（明度浅灰色）例图：http://www.canubia.com
蓝色浅蓝色网页例图：http://www.voeslauer.com/start.html
蓝色系分析： (同类色：浅蓝色) 主色调HSB数值H显示200度，色轮度稍向绿色方位倾斜， 但是由于从180度到270度基本上给人的视觉呈现还是蓝 色范畴，因此与视觉上广义的蓝色差别不大。 该页面中间色较多，主要是在蓝色范畴内做明度的变化， 所以色度差非常缓和，以致于页面的色彩呈现非常柔和， 甚至稍有些发灰的感觉，好在该页面还有些较大色块的浅 蓝色及白色，拉大了页面的色阶，使得这种灰的感觉减弱 不少。 点睛色的HSB数值是258，色轮趋势是向暖色紫色(相对冷 暖色)倾向，变化微妙，是本页面最温暖的颜色。蓝紫色 在色相环中位于蓝色和紫色之间，所以它也蕴含着紫色的 一些神秘感，加上浅蓝色的雅致，所以亮度较高的蓝紫色 显得非常高雅。在网页中，蓝紫色通常与蓝色一起搭配使 用。
蓝色表达着深远、永恒、沉静、无限、理 智、诚实、寒冷的多种感觉。蓝色会给人 很强烈的安稳感，同时蓝色还能够表现出 和平、淡雅、洁净、可靠等。 下面我们根据蓝色系不同属性的同类色、 邻近色、高纯度对比、相对对比色等色彩 搭配做不同的举例分析。
蓝色高纯度对比网页例图：http://wFra Baidu bibliotekw.toysdesign.com
灰色系
灰色介于灰色和白色之间，中性色、中等明度、 无色彩、极低色彩的颜色。灰色能够吸收其他色 彩的活力，削弱色彩的对立面，而制造出融合的 作用。 灰色是一种中立色，具有中庸、平凡、温和、谦 让、中立和高雅的心理感受，也被称为高级灰， 是经久不衰、最经看的颜色。 任何色彩加入灰色都能显得含蓄而柔和。但是灰 色在给人高品味、含蓄、精致、雅致耐人寻味的 同时，也容易给人颓废、苍凉、消极、沮丧、沉 闷的感受，如果搭配不好页面容易显得灰暗、脏。
蓝色深蓝色网页例图： http://www.ro-audio.com
蓝色系分析：(深蓝色) HSB数值显示主色调和辅色调的H色相接近，饱 和度为最高，都为100%，两者只在明度上有区别， 分别是35%和65%。三维厚重的设计风格，用调 和法之一的渐变手法，把主色调和辅色调进行了 缓缓的过渡，增强了层次感，体现个性魅力，符 合该页面视音频风格网站的主题。 虽然是被誉为点睛色，但从整个页面来看由于面 积关系，点睛色在这里所起的作用不大，仅仅就 蜻蜓点水而已。相反的辅助色在这里却起到了较 为突显的作用——让整个沉闷的本只起烘托作用 的深蓝色得到充分的展示。另一辅色调灰色令白 色与深蓝色反差不易过大，起到调和的目的。白 色增强了整个页面的视觉感，使之更醒目。
HSB模式的B也能看出浅灰色在明度上较高，部 分渐变的深灰色在页面上所占用的面积也不少， 另一点睛色黑色的作用就是使明度色阶跨度加深、 明确，整个页面呈现灰蒙蒙的感觉得以减弱。 结论： 该页面整个看起来也可以说只有两种色彩搭 配，即非色彩系黑白灰和色彩系红色，页面显得 非常简洁而含蓄。点睛色的加入减少了非色调浅 灰色有可能产生的单调感觉。
灰色网页（同类灰色系：灰色＋橙色）例图：http://www.hcreativos.com
灰色系分析：（同类灰色系：灰色＋橙色） 该页面主要以大面积的灰色系列为主，主色调为 背景色非常明确。部分灰色只在明度上加深了， 增强灰色的空间感。 从RGB所呈现的均衡数值及HSB模式的HS都为零 来看，主色调的浅灰色属于非常纯净的非色彩， 没有掺杂其他色系进去。而辅色调的两个模式上 就有些差异，HSB模式的H显示180度色相上偏青 蓝色，有及其微弱的饱和度，明度也较低。点睛 色SB显示为正桔红色且饱和度和明度都为100％， 应该是及其耀眼的颜色，然而在大面积背景主色 调下，此种耀眼的颜色得到缓解，这正是与灰色 的配色后显示出灰色最强烈的特性--削弱缓和刺 激耀眼的颜色。
蓝色系分析：(高纯度对比：蓝色+玫瑰色) 蓝色的HSB数值H色相为240度时是正蓝色。上图 的HSB模式S数值显示，所有主要配色的饱和度 都是100%。从主色调、辅色调HSB模式的数值可 看出，这两种颜色在明度上有较大的区别，色相 上稍有轻度变化，饱和度相同。RGB模式上看， 主色调与辅色调R数值都为0，G绿色的数值和B 蓝色数值分量的变化，得到了不同蓝色的两结果。 点睛色仅是R红色与B蓝色两色调和而得没有掺杂 其他颜色，因此饱和度呈最高值100%。整个页面 配色的饱和度都为100%，页面整体配色看起来视 觉冲击力异常强烈。
网页设计配色应用实例剖析
色彩的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。
辅助色白色让页面上的颜色的特性发挥到极致， 是不可缺少的辅助配色。 结论：响亮、强烈刺激的词语似乎都适用于上图 页面，源于高纯度烘托、微妙的冷暖变化配色上， 体现出现代都市张扬时尚的气息。白色块面的线 型使得这种高纯度高强度的配色变得响亮却也缓 和。 辅色调蓝色的运用透露出设计师的大胆与魄力， 玫瑰色在色轮表里算是冷色系，但是与蓝色广义 上的对比来说是暖色，在这里与蓝色搭配算是绝 配了。整个页面无不体现出特色和个性。
结论： 黑白灰非色彩色调所构成的页面较具特色， 尤其灰色的加入更增添层次感。 结合黑白图形，营造出一段古典的故事场 景。契合该网站所体现的内容思想。
蓝色系
蓝色是色彩中比较沉静的颜色。象征着永恒与深 邃、高远与博大、壮阔与浩渺，是令人心境畅快 的颜色。 蓝色的朴实、稳重、内向性格，衬托那些性格活 跃、具有较强扩张力的色彩，运用对比手法，同 时也活跃页面。另一方面又有消极、冷淡、保守 等意味。蓝色与红、黄等色运用得当，能构成和 谐的对比调和关系。 蓝色是冷色调最典型的代表色，是网站设计中运 用得最多的颜色，也是许多人钟爱的颜色。
灰色系分析：（明度浅灰色） 从页面所呈现的明度色调来看，整个页面偏浅灰 色调，柔美高雅的灰调子。 主色调及背景色是接近于明度白色且非常浅的灰 调，辅色调的灰调子明度上较主色调稍深些，另 一辅色调为白色。 RGB模式显示点睛色红色R217及G9来看不是正 红色，在如此灰调子的页面来看，如果不参考 RGB模式肉眼几乎看不出来。如果没有点睛色的 加入整个页面呈毫无生气的灰色系，略有些脏的 感觉，平淡且乏味，没能使大家对它产生过多的 印象。红色的特性把以上的这些平淡的感受打破 了，让人愿意细品灰色所带来的悠长韵味。
结论： 深蓝色是沉稳的且较常用的色调。能给人稳 重、冷静、严谨、冷漠、深沉、成熟的心理感受。 它主要用于营造安稳、可靠、略带有神秘色彩的 氛围。 深蓝色明度偏暗，基于上面对深蓝色的特质 描述，在常规网站的设计里，可能不适合做太大 面积的使用。但根据不同网站主题的设计需要可 以做些不同的尝试。