《网页设计配色应用实例剖析-灰色系》由会员分享，可在线阅读，更多相关《网页设计配色应用实例剖析-灰色系（8页珍藏版）》请在金锄头文库上搜索。
1、网页设计配色应用实例剖析之灰色系网页设计配色应用实例剖析之灰色系灰灰色介于黑色和白色之间，中性色、中等明度、无色彩、极低色彩的颜色。灰色能够吸收其他色彩的活力，削弱色彩的对立面，而制造出融合的作用。灰色是一种中立色，具有中庸、平凡、温和、谦让、中立和高雅的心理感 受，也被称为高级灰，是经久不衰、最经看的颜色。任何色彩加入灰色都能显得含蓄而柔和。但是灰色在给人高品味、含蓄、 精致、雅致耐人寻味的同时，也容易给人颓废、苍凉、消极、沮丧、沉闷的感 受，如果搭配不好页面容易显得灰暗、脏。从色彩学上来说，灰色调又泛指所有含灰色度的复合色，而复合色又是三 种以上颜色的调和色。色彩可以有红灰、黄灰、蓝灰等上
2、万种彩色灰，这都是 灰色调，而并不单指纯正的灰色。下面我们根据灰色搭配不同的颜色所表现出的视觉特性，做一些不同的举 例分析。 灰色网页（明度浅灰色）例图：灰色网页（明度浅灰色）例图：http:/明度浅灰色灰色系分析：（明度浅灰色）灰色系分析：（明度浅灰色）从页面所呈现的明度色调来看，整个页面偏浅灰色调，柔美高雅的灰调子。主色调及背景色是接近于明度白色且非常浅的灰调，辅色调的灰调子明度 上较主色调稍深些，另一辅色调为白色。RGB 模式显示点睛色红色 R217 及 G9 来看不是正红色，在如此灰调子的页 面来看，如果不参考 RGB 模式肉眼几乎看不出来。如果没有点睛色的加入整个 页 面呈毫无生气的
3、灰色系，略有些脏的感觉，平淡且乏味，没能使大家对它产 生过多的印象。红色的特性把以上的这些平淡的感受打破了，让人愿意细品灰 色所带来的 悠长韵味。HSB 模式的 B 也能看出浅灰色在明度上较高，部分渐变的深灰色在页面上 所占用的面积也不少，另一点睛色黑色的作用就是使明度色阶跨度加深、明确， 整个页面呈现灰蒙蒙的感觉得以减弱。结论：结论：该页面整个看起来也可以说只有两种色彩搭配，即非色彩系黑白灰和色彩 系红色，页面显得非常简洁而含蓄。点睛色的加入减少了非色调浅灰色有可能 产生的单调感觉。灰色网页（同类灰色系：灰色橙色）例图：灰色网页（同类灰色系：灰色橙色）例图：http:/ 同类灰色系：灰色橙色
4、灰色系分析：（同类灰色系：灰色橙色）灰色系分析：（同类灰色系：灰色橙色）该页面主要以大面积的灰色系列为主，主色调为背景色非常明确。部分灰 色只在明度上加深了，增强灰色的空间感。从 RGB 所呈现的均衡数值及 HSB 模式的 HS 都为零来看，主色调的浅灰色 属于非常纯净的非色彩，没有掺杂其他色系进去。而辅色调的两个模式上就有 些差 异，HSB 模式的 H 显示 180 度色相上偏青蓝色，有及其微弱的饱和度，明 度也较低。点睛色壬獺 SB 显示为正桔红色且饱和度和明度都为 100，应该是 及其 耀眼的颜色，然而在大面积背景主色调下，此种耀眼的颜色得到缓解，这 正是与灰色的配色后显示出灰色最强烈的
5、特性-削弱缓和刺激耀眼的颜色。点睛色橙色和白色点缀下打破了平面平淡的配色格局，眼前顿时一亮的感 觉。 结论：结论：灰色调非色彩所构成的页面颇具有独特的魅力，整个页面呈现出平稳缓和 的气质。两个点睛色橙色和白色起到调动配色页面的作用。灰色应用（同类灰色多种颜色）网页例图：灰色应用（同类灰色多种颜色）网页例图： http:/ 同类灰色多种颜色灰色系分析：（同类灰色多种颜色）灰色系分析：（同类灰色多种颜色）这是一个灰色阶变化较多的页面，形成较有节奏块面分明的韵律美感。这 一变化改善了灰色容易形成的呆板单调特性。从 HSB 模式数值来看，主色调辅色调都是非色彩的正灰色，没有掺杂其他 色彩进去。点睛色黄
6、色、绿色 H 数值上显示有些色相偏移都略向暖色色环靠拢， 这两颜 色的特性是属于较显眼的颜色。另外两点睛色粉红和粉蓝色在色相上已 经较接近于正色系，明度较高饱和度降低。这四种颜色尽管所使用的面积非常 少，但结合了面 积上相对使用较多的非色彩白色，让整个页面配色雅致的同时 不乏生动活跃。结论：结论：不同灰色背景的变化，前景使用面积较少的纯色点缀，这几种颜色还同样 出现在右上角产生平衡色彩的呼应作用，整个页面产生雅致和谐的视觉美感。灰色配色（灰色对比色）网页例图：灰色配色（灰色对比色）网页例图：http:/www.fantasy- 灰色对比色灰色系分析：（灰色对比色）灰色系分析：（灰色对比色）从
7、RGB 和 HSB 模式上可看出主色调不是纯正的非色系，里面掺杂 了其他色 彩，肉眼识别及 H 色相为 32 范围上都能看出含有微弱的黄色调在里面，S13%B46%分别显示该种颜色含浓重的灰色，有少量的黄色加入结合整个页 面的 配色是比较调和的搭配。辅色调则是运用了比较正的浅灰色。点睛色主要是一组橙色、蓝色对比色构成，从双方的 H 色相上也能看出来。 RGB 模 式上看到这两种颜色都或多或少的掺杂了其他的颜色在里面，所以明度 纯度上呈灰色阶倾向。另一点睛色浅黄色相上呈现正黄色，但由于明度非常高 因此色彩呈不饱 和状态，尽管如此在主色调灰色的背景下还是比较突出的。 结论：结论：该页面依旧以灰色为
8、主导位置，虽然主色调灰色少量掺杂了黄色，与页面 其他黄色色彩元素较统一调和。点睛色主要是以两对比色做主导，相对其他颜 色饱和度较高且面积使用得不少，较响亮和突出产品目的。在主色调灰黄色特 性掌控下却也到达醒目又和谐的目的。灰色配色（灰色灰色配色（灰色+ +青蓝色）应用网页例图：青蓝色）应用网页例图：http:/ 灰色青蓝色灰色系分析：（灰色灰色系分析：（灰色青蓝色）青蓝色）肉眼看上去已经能识别到了深灰色主色调有青蓝色倾向，从 HSB 模式上能 够看到色相为 180 度，该深灰色饱和度和明度都比较低。点睛色是浅青蓝色，HSB 模式 H 色相所呈现的色相与主色调的数值一致， 属高明度低饱和度色系。
9、主色调是明度较低的深灰色，是属于较沉闷的颜色；而点睛色是浅青蓝色， 在深灰色的背景下略呈现有些暗淡，并没有改善和带来明快的感觉，辅助色是 白色大面积的介入而因此使得整个页面得到一定的透亮缓解，这是该页面至关 重要的一色。结论：结论：该页面用色不多，深灰、浅青蓝、白，但合理的运用这三种颜色的配色角 色，能使页面焕发与众不同的气质魅力。灰色配色（灰色灰色配色（灰色+ +棕黄色）应用网页例图：棕黄色）应用网页例图：http:/ 灰色+棕黄色灰色系分析：（灰色灰色系分析：（灰色+ +棕黄色）棕黄色）主色调是由两种明度较接近的灰色构成。从 RGB 和 HSB 模式上能看到这两 种灰色属于纯正的非色彩，
10、没有其他的颜色掺杂进去。辅助色为复色，我们知道复色是由两种间色或者原色和间色混合产生，通 常所混合产生的颜色色相不明显，当某种颜色所占的比重大时，该颜色的色相 才相较突 出。从 H 色相上看颜色稍偏黄色，由于混合其他颜色且明度较低，因 此呈棕黄色。复色棕黄色在背景深灰的衬托下低调不张扬，能很好的与之融为 一体。点睛色 H 显示 120 度是正绿色。该绿色选择了明度适中纯度不高的配色，既表达了主题又能与整个页面灰调子很好的调和一起。另一点睛色白色让所有 的颜色的特性都得以很好的发挥并起到拉开色阶层次的作用。 结论：结论：深灰色具有谦虚、平凡、沉默、中庸、寂寞、忧郁、消极的心理感受。主色调主要集中
11、在背景的运用和变化上，增强页面的空间感，视觉元素颇 有时尚现代的气息，与前景的色彩明度纯度稍有变化又在视觉上达到风格统一。灰色配色（无彩色搭配）应用网页例图：灰色配色（无彩色搭配）应用网页例图：http:/无彩色搭配灰色系分析：（无彩色搭配）灰色系分析：（无彩色搭配）就像回到了古老的黑白照年代。初看该页面容易把背景的深灰色误认为是 黑色，再仔细观看就感觉到了此种深灰色不凡的作用，假如背景色使用了黑色， 页面的主体人物和空间感的相互作用就变得僵硬且呆板。从 RGB 和 HSB 模式上可知主色调深灰色为纯正的非色彩，明度很低。但与 人物的毛发对比下就能看出它们明度之间的差异。辅助色这里取的是照片的
12、肤色，也是纯正的浅灰色，该人物占据了该页面三分之一的面积，主次鲜明。尽管点睛色是明度最高的白色，但是由于只在小文字上的小面积使用，因 此只起到了点缀一下页面细节突显主次关系的作用。结论：结论：根据前面最初讲的网页应用部分的第一节色调，主色调、辅色调、点睛色 所使用的面积比例来看，该页的例子得到了很好的诠释。由于该页面是非色彩黑白灰构成，页面配色分析就变得简单化了不少，因 此在其他页面实例里出现的主色调、辅色调、点睛色不同的色彩内敛与张扬的 特性在这里也就涉及不到了。本部分小节：本部分小节： 灰色谦和内敛的特性决定了不同明度的灰色扮演的是辅佐陪衬的角色。 非色彩就是没有彩度的颜色，而灰色相对黑色
13、、白色要多些变化，因为 它能的通过明度来表达不同的性格特征。 灰色与其他彩度色彩搭配时能降低张扬耀眼的颜色，调和色彩的方法之 一。两种或两种以上的色彩混合，如能配上灰色，这两个色调本身必能相互调 和。 以上的例子中不难看出，都是非色彩系灰色为主色调点缀极少面积的 色彩系，色彩运用的面积反差越大，页面所呈现的独特魅力也就越强烈。灰色 的特性在于能把刺 激耀眼的颜色柔和化，这将是调和多个页面配色的利器，但 要也要注意不同明度灰色所起到的配色作用，不同明度的灰色搭配不同的彩度 颜色时，所得到的结果差别 是很大，根据整体页面配色应在灰色明度上要反复 的调整。 无彩度的黑白灰不同面积的使用，相对彩度色系来说是比较容易的颜色 搭配，且能包容所有的彩度颜色。
