电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
[组图]网页设计配色应用实例剖析——灰色系
网页设计配色应用实例剖析——灰色系
2007-8-10 9:41:26  文/转载未知   出处:天极Yesky   

灰色介于灰色和白色之间,中性色、中等明度、无色彩、极低色彩的颜色。灰色能够吸收其他色彩的活力,削弱色彩的对立面,而制造出融合的作用。

灰色是一种中立色,具有中庸、平凡、温和、谦让、中立和高雅的心理感受,也被称为高级灰,是经久不衰、最经看的颜色。

任何色彩加入灰色都能显得含蓄而柔和。但是灰色在给人高品味、含蓄、精致、雅致耐人寻味的同时,也容易给人颓废、苍凉、消极、沮丧、沉闷的感受,如果搭配不好页面容易显得灰暗、脏。

从色彩学上来说,灰色调又泛指所有含灰色度的复合色,而复合色又是三种以上颜色的调和色。色彩可以有红灰、黄灰、蓝灰等上万种彩色灰,这都是灰色调,而并不单指纯正的灰色。

下面我们根据灰色搭配不同的颜色所表现出的视觉特性,做一些不同的举例分析。

→ 灰色网页(明度浅灰色)例图:http://www.canubia.com

灰色系分析:(明度浅灰色)

从页面所呈现的明度色调来看,整个页面偏浅灰色调,柔美高雅的灰调子。

主色调及背景色是接近于明度白色且非常浅的灰调,辅色调的灰调子明度上较主色调稍深些,另一辅色调为白色。

RGB模式显示点睛色红色R217及G9来看不是正红色,在如此灰调子的页面来看,如果不参考RGB模式肉眼几乎看不出来。如果没有点睛色的加入整个页面呈毫无生气的灰色系,略有些脏的感觉,平淡且乏味,没能使大家对它产生过多的印象。红色的特性把以上的这些平淡的感受打破了,让人愿意细品灰色所带来的悠长韵味。

HSB模式的B也能看出浅灰色在明度上较高,部分渐变的深灰色在页面上所占用的面积也不少,另一点睛色黑色的作用就是使明度色阶跨度加深、明确,整个页面呈现灰蒙蒙的感觉得以减弱。

结论:

该页面整个看起来也可以说只有两种色彩搭配,即非色彩系黑白灰和色彩系红色,页面显得非常简洁而含蓄。点睛色的加入减少了非色调浅灰色有可能产生的单调感觉。

→ 灰色网页(同类灰色系:灰色+橙色)例图:http://www.hcreativos.com

灰色系分析:(同类灰色系:灰色+橙色)

该页面主要以大面积的灰色系列为主,主色调为背景色非常明确。部分灰色只在明度上加深了,增强灰色的空间感。

从RGB所呈现的均衡数值及HSB模式的HS都为零来看,主色调的浅灰色属于非常纯净的非色彩,没有掺杂其他色系进去。而辅色调的两个模式上就有些差异,HSB模式的H显示180度色相上偏青蓝色,有及其微弱的饱和度,明度也较低。点睛色壬獺SB显示为正桔红色且饱和度和明度都为100%,应该是及其耀眼的颜色,然而在大面积背景主色调下,此种耀眼的颜色得到缓解,这正是与灰色的配色后显示出灰色最强烈的特性--削弱缓和刺激耀眼的颜色。

点睛色橙色和白色点缀下打破了平面平淡的配色格局,眼前顿时一亮的感觉。

结论:

灰色调非色彩所构成的页面颇具有独特的魅力,整个页面呈现出平稳缓和的气质。两个点睛色橙色和白色起到调动配色页面的作用。

→ 灰色应用(同类灰色+多种颜色)网页例图: http://www.kimbyungjin.com

灰色系分析:(同类灰色+多种颜色)

这是一个灰色阶变化较多的页面,形成较有节奏块面分明的韵律美感。这一变化改善了灰色容易形成的呆板单调特性。

从HSB模式数值来看,主色调辅色调都是非色彩的正灰色,没有掺杂其他色彩进去。点睛色黄色、绿色H数值上显示有些色相偏移都略向暖色色环靠拢,这两颜色的特性是属于较显眼的颜色。另外两点睛色粉红和粉蓝色在色相上已经较接近于正色系,明度较高饱和度降低。这四种颜色尽管所使用的面积非常少,但结合了面积上相对使用较多的非色彩白色,让整个页面配色雅致的同时不乏生动活跃。

结论:

不同灰色背景的变化,前景使用面积较少的纯净色点缀,这几种颜色还同样出现在右上角产生平衡色彩的呼应作用,整个页面产生雅致和谐的视觉美感。

→ 灰色配色(灰色+对比色)网页例图:http://www.fantasy-interactive.com

灰色系分析:(灰色+对比色)

从RGB和HSB模式上可看出主色调不是纯正的非色系,里面掺杂了其他色彩,肉眼识别及H色相为32范围上都能看出含有微弱的黄色调在里面,S13%B46%分别显示该种颜色含浓重的灰色,有少量的黄色加入结合整个页面的配色是比较调和的搭配。辅色调则是运用了比较正的浅灰色。

点睛色主要是一组橙色、蓝色对比色构成,从双方的H色相上也能看出来。RGB模式上看到这两种颜色都或多或少的掺杂了其他的颜色在里面,所以明度纯度上呈灰色阶倾向。另一点睛色浅黄色相上呈现正黄色,但由于明度非常高因此色彩呈不饱和状态,尽管如此在主色调灰色的背景下还是比较突出的。

结论:

该页面依旧以灰色为主导位置,虽然主色调灰色少量掺杂了黄色,与页面其他黄色色彩元素较统一调和。点睛色主要是以两对比色做主导,相对其他颜色饱和度较高且面积使用得不少,较响亮和突出产品目的。在主色调灰黄色特性掌控下却也到达醒目又和谐的目的。

[1] [2] 下一页

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号