网页设计中的灰色调配色技巧
 

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

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

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

  从色彩学上来说,灰色调又泛指所有含灰色度的复合色,而复合色又是三种以上颜色的调和色。色彩可以有红灰、黄灰、蓝灰等上万种彩色灰,这都是灰色调,而并不单指纯正的灰色。
  
  下面我们根据灰色搭配不同的颜色所表现出的视觉特性,做一些不同的举例分析。
  
  → 灰色网页(明度浅灰色)例图:
  
  
  
  灰色系分析:(明度浅灰色)
  从页面所呈现的明度色调来看,整个页面偏浅灰色调,柔美高雅的灰调子。
  主色调及背景色是接近于明度白色且非常浅的灰调,辅色调的灰调子明度上较主色调稍深些,另一辅色调为白色。
  RGB模式显示点睛色红色R217及G9来看不是正红色,在如此灰调子的页面来看,如果不参考RGB模式肉眼几乎看不出来。如果没有点睛色的加入整个页面呈毫无生气的灰色系,略有些脏的感觉,平淡且乏味,没能使大家对它产生过多的印象。红色的特性把以上的这些平淡的感受打破了,让人愿意细品灰色所带来的悠长韵味。
  HSB模式的B也能看出浅灰色在明度上较高,部分渐变的深灰色在页面上所占用的面积也不少,另一点睛色黑色的作用就是使明度色阶跨度加深、明确,整个页面呈现灰蒙蒙的感觉得以减弱。
  
  结论:
  该页面整个看起来也可以说只有两种色彩搭配,即非色彩系黑白灰和色彩系红色,页面显得非常简洁而含蓄。点睛色的加入减少了非色调浅灰色有可能产生的单调感觉。

  → 灰色网页(同类灰色系:灰色+橙色)例图:
  
  
  
  灰色系分析:(同类灰色系:灰色+橙色)
  该页面主要以大面积的灰色系列为主,主色调为背景色非常明确。部分灰色只在明度上加深了,增强灰色的空间感。
  从RGB所呈现的均衡数值及HSB模式的HS都为零来看,主色调的浅灰色属于非常纯净的非色彩,没有掺杂其他色系进去。而辅色调的两个模式上就有些差异,HSB模式的H显示180度色相上偏青蓝色,有及其微弱的饱和度,明度也较低。点睛色壬獺SB显示为正桔红色且饱和度和明度都为100%,应该是及其耀眼的颜色,然而在大面积背景主色调下,此种耀眼的颜色得到缓解,这正是与灰色的配色后显示出灰色最强烈的特性--削弱缓和刺激耀眼的颜色。
  点睛色橙色和白色点缀下打破了平面平淡的配色格局,眼前顿时一亮的感觉。 
  
  结论:
  灰色调非色彩所构成的页面颇具有独特的魅力,整个页面呈现出平稳缓和的气质。两个点睛色橙色和白色起到调动配色页面的作用。

   → 灰色应用(同类灰色+多种颜色)网页例图: 
  
  
  
  灰色系分析:(同类灰色+多种颜色)
  这是一个灰色阶变化较多的页面,形成较有节奏块面分明的韵律美感。这一变化改善了灰色容易形成的呆板单调特性。
  从HSB模式数值来看,主色调辅色调都是非色彩的正灰色,没有掺杂其他色彩进去。点睛色黄色、绿色H数值上显示有些色相偏移都略向暖色色环靠拢,这两颜色的特性是属于较显眼的颜色。另外两点睛色粉红和粉蓝色在色相上已经较接近于正色系,明度较高饱和度降低。这四种颜色尽管所使用的面积非常少,但结合了面积上相对使用较多的非色彩白色,让整个页面配色雅致的同时不乏生动活跃。
  
  结论:
  不同灰色背景的变化,前景使用面积较少的纯净色点缀,这几种颜色还同样出现在右上角产生平衡色彩的呼应作用,整个页面产生雅致和谐的视觉美感。

 → 灰色配色(灰色+对比色)网页例图:
  
  
  
  灰色系分析:(灰色+对比色)
  从RGB和HSB模式上可看出主色调不是纯正的非色系,里面掺杂了其他色彩,肉眼识别及H色相为32范围上都能看出含有微弱的黄色调在里面,S13%B46%分别显示该种颜色含浓重的灰色,有少量的黄色加入结合整个页面的配色是比较调和的搭配。辅色调则是运用了比较正的浅灰色。
  点睛色主要是一组橙色、蓝色对比色构成,从双方的H色相上也能看出来。RGB模式上看到这两种颜色都或多或少的掺杂了其他的颜色在里面,所以明度纯度上呈灰色阶倾向。另一点睛色浅黄色相上呈现正黄色,但由于明度非常高因此色彩呈不饱和状态,尽管如此在主色调灰色的背景下还是比较突出的。 
  
  结论:
  该页面依旧以灰色为主导位置,虽然主色调灰色少量掺杂了黄色,与页面其他黄色色彩元素较统一调和。点睛色主要是以两对比色做主导,相对其他颜色饱和度较高且面积使用得不少,较响亮和突出产品目的。在主色调灰黄色特性掌控下却也到达醒目又和谐的目的。

  → 灰色配色(灰色+青蓝色)应用网页例图:
  
  
  
  灰色系分析:(灰色+青蓝色)
  肉眼看上去已经能识别到了深灰色主色调有青蓝色倾向,从HSB模式上能够看到色相为180度,该深灰色饱和度和明度都比较低。
  点睛色是浅青蓝色,HSB模式H色相所呈现的色相与主色调的数值一致,属高明度低饱和度色系。
  主色调是明度较低的深灰色,是属于较沉闷的颜色;而点睛色是浅青蓝色,在深灰色的背景下略呈现有些暗淡,并没有改善和带来明快的感觉,辅助色是白色大面积的介入而因此使得整个页面得到一定的透亮缓解,这是该页面至关重要的一色。
  
  结论:
  该页面用色不多,深灰、浅青蓝、白,但合理的运用这三种颜色的配色角色,能使页面焕发与众不同的气质魅力。

  → 灰色配色(灰色+棕黄色)应用网页例图:
  
  
  
  灰色系分析:(灰色+棕黄色)
  主色调是由两种明度较接近的灰色构成。从RGB和HSB模式上能看到这两种灰色属于纯正的非色彩,没有其他的颜色掺杂进去。
  辅助色为复色,我们知道复色是由两种间色或者原色和间色混合产生,通常所混合产生的颜色色相不明显,当某种颜色所占的比重大时,该颜色的色相才相较突出。从H色相上看颜色稍偏黄色,由于混合其他颜色且明度较低,因此呈棕黄色。复色棕黄色在背景深灰的衬托下低调不张扬,能很好的与之融为一体。
  点睛色H显示120度是正绿色。该绿色选择了明度适中纯度不高的配色,既表达了主题又能与整个页面灰调子很好的调和一起。另一点睛色白色让所有的颜色的特性都得以很好的发挥并起到拉开色阶层次的作用。 
  
  结论:
  深灰色具有谦虚、平凡、沉默、中庸、寂寞、忧郁、消极的心理感受。
  主色调主要集中在背景的运用和变化上,增强页面的空间感,视觉元素颇有时尚现代的气息,与前景的色彩明度纯度稍有变化又在视觉上达到风格统一。

  → 灰色配色(无彩色搭配)应用网页例图:
  
  
  
  灰色系分析:(无彩色搭配)
  就像回到了古老的黑白照年代。初看该页面容易把背景的深灰色误认为是黑色,再仔细观看就感觉到了此种深灰色不凡的作用,假如背景色使用了黑色,页面的主体人物和空间感的相互作用就变得僵硬且呆板。
  从RGB和HSB模式上可知主色调深灰色为纯正的非色彩,明度很低。但与人物的毛发对比下就能看出它们明度之间的差异。
  辅助色这里取的是照片的肤色,也是纯正的浅灰色,该人物占据了该页面三分之一的面积,主次鲜明。
  尽管点睛色是明度最高的白色,但是由于只在小文字上的小面积使用,因此只起到了点缀一下页面细节突显主次关系的作用。
  
  结论:
  根据前面最初讲的网页应用部分的第一节色调,主色调、辅色调、点睛色所使用的面积比例来看,该页的例子得到了很好的诠释。
  由于该页面是非色彩黑白灰构成,页面配色分析就变得简单化了不少,因此在其他页面实例里出现的主色调、辅色调、点睛色不同的色彩内敛与张扬的特性在这里也就涉及不到了。

  本部分小节:

  
  ● 灰色谦和内敛的特性决定了不同明度的灰色扮演的是辅佐陪衬的角色。
  ● 非色彩就是没有彩度的颜色,而灰色相对黑色、白色要多些变化,因为它能的通过明度来表达不同的性格特征。
  ● 灰色与其他彩度色彩搭配时能降低张扬耀眼的颜色,调和色彩的方法之一。两种或两种以上的色彩混合,如能配上灰色,这两个色调本身必能相互调和。
  ● 以上的例子中不难看出,都是非色彩系灰色为主色调点缀极少面积的色彩系,色彩运用的面积反差越大,页面所呈现的独特魅力也就越强烈。灰色的特性在于能把刺激耀眼的颜色柔和化,这将是调和多个页面配色的利器,但要也要注意不同明度灰色所起到的配色作用,不同明度的灰色搭配不同的彩度颜色时,所得到的结果差别是很大,根据整体页面配色应在灰色明度上要反复的调整。
  ● 无彩度的黑白灰不同面积的使用,相对彩度色系来说是比较容易的颜色搭配,且能包容所有的彩度颜色。

网页设计中的灰色调配色技巧相关推荐

  1. 转: 网页设计中的一些色彩搭配技巧

    在网页设计中色彩搭配是一件很重要的事情,要是色彩搭配好了,能让整个网站看起来清新悦目,眼前一 亮的感觉.要是色彩搭配混乱,会让人看着很吃力或者整个网站没有亮点.不吸引人.下面我说说自己在 网页设计中积 ...

  2. 不会配色?来看看网页设计中怎样使用柔和色调

    网页中的柔和色调的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果. 当你听到"柔和"一词,想到的可能是淡粉色.淡蓝色.淡黄色,不过这种配色远不止这 ...

  3. 网页设计中 透明效果的使用技巧

    运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在 ...

  4. HTML5网页设计图片如何,网页设计中优化图片的6个技巧

    本文转载自[微信公众号:阿门教你PS,ID:meitian_PS]经微信公众号授权转载,如需转载与原文作者联系 平面设计和网页设计是两个截然不同的领域,这两个领域有不同的设计需求.设计实践和设计方法. ...

  5. 网页设计中的图片技巧

    图片是网页设计中的最为重要的元素,文字表达信息,图片提示视觉效果,相比于文字描述人们更喜欢图片所表达出来的效果,在一些优秀的网页设计中,图片所占的比率可以达到80%甚至更高,一张好的图片所表达的信息更 ...

  6. 如何在网页设计中正确应用色彩?

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 如何在网页设计中正确应用色彩? 在网页设计中正确应用色彩从来都不是一件容易的事情!当网页上的产品介绍.推 ...

  7. 10个美丽的例子,插图在网页设计中的应用

    网页设计趋势很多都是过眼云烟,但插画始终保持着一定的地位,是给你的网站创造出独特的外观和风格的好方法.今天,这篇文章中收集了10个美丽的例子,插图在网页设计中的应用.从小型和微妙的细节插画到全屏的插画 ...

  8. 网页设计框架布局代码_网页设计中的分屏切割布局法

    今天和大家聊的是一种关于网页设计中的视觉呈现方法,一般我们称之为"分屏布局",是一种常见的网页设计排版方式,将页面分割为均等或者不均等的两部分,这种方式的好处就是可以将文字信息和图 ...

  9. 浅谈网页设计中的构图

    网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外 墙,但我想你一定记得起它们的什么样的形状.同样,网页设计中的构 ...

最新文章

  1. 如何防止无线网络被破解
  2. larvel mysql count,php – 模型中的Laravel计数函数,然后sortBy count()
  3. Springboot配置拦截器出现“No mapping for GET“静态资源的情况
  4. QT学习:模型/视图基本概念
  5. 谈谈我对MVC的View层实现的理解
  6. Scrapy从理论到爬图
  7. Qt样式表之一:Qt样式表和盒子模型介绍
  8. 用原生js封装get方法
  9. Adaboost原理和实例
  10. 闲 鱼,进阶技巧,如何提高你的曝光量?
  11. 惠普服务器装Linux7系统,如何安装惠普服务器操作系统
  12. 有道云词典--翻译/屏幕取词翻译
  13. 网易轻舟服务网格数据面性能优化实践
  14. abp框架 mysql_ABP框架使用Mysql数据库
  15. 一文搞懂HTTP协议(带图文)
  16. 成功背后(敬所有IT人)
  17. C++ OpenCV遍历并处理一个文件夹中的所有图片
  18. 极虎病毒创造的四个最
  19. 2010年度CSDN十大博客文章
  20. Swift: App审核基本要点

热门文章

  1. mysql员工星期排班表设计_vue+element项目做员工排班表
  2. 韦东山70天驱动笔记(1)
  3. kettle连接sap出现错误报错信息(127) JCO_ERROR_FIELD_NOT_FOUND : Field DATUM not a member of INPUT
  4. OBS/直播姬获取显示器黑屏解决方法
  5. 你觉得iPhone 13能成为下一个iPhone 6s吗?
  6. 【历史上的今天】9 月 2 日:互联网的“诞生日”;三星逐步跌落神坛;世界上第一个ATM自动取款机
  7. 关于宏的bypass学习
  8. Python+Vue计算机毕业设计教师绩效工资管理l1v8p(源码+程序+LW+部署)
  9. vb读取计算机mac地址,Re:在VB中如何取得网卡的mac地址?
  10. 【CCF 201712-4】行车路线(Dijkstra 80分)