→ 同类绿色+多种点睛色例图 :http://www. girlshop.com

网页设计配色应用实例之绿色系


  绿色系分析:(绿色配色:同类绿色+多种点睛色)
  主要色调HSB模式H数值显示75度,依旧是色轮表里倾向于黄色区域方位边缘的绿色,呈现出的黄绿色调。辅色调在明度上有些提亮,与主色调形成较强的对比。
  点睛色里所使用的对比色组合有两组,红色与绿色,蓝色与橙黄色,其中黄色是介于暖色(橙黄、红色)和冷色(绿色、蓝色)的过渡色也是调和色。

  结论:
  通过上面的分析大家可以看到,该网页的配色不少,而且还有两组对比色在内,但是页面配色也很协调。原因之一,从下面抽取的色块可以看出来,是一个过渡柔和的色轮表:以黄色为中界一边是较浅的黄绿到绿色再到蓝色,另一边是橙黄再到红色。原因之二,点睛色毕竟是扮演着点睛色的角色,有主色调和辅色调大面积的控制,即便再多些点睛色也不至于很快干扰到页面的整体配色。
  整个页面保证了协调、不凌乱的步调,但是又能把商业网站的热闹氛围体现得很好的渲染。此种配色方法值得我们学习借鉴。

  → 绿色邻近色应用网页例图 :http://www. codcefngwlad.org.uk

网页设计配色应用实例之绿色系


  绿色系分析:(邻近色配色:绿色+蓝色)
  全页使用的主要色调基本上是属于明度较高饱和度较低的颜色,其中还使用了渐变色缓和的过渡,因此页面看起来舒服协调。
  主色调是饱和度较高的翠绿色运用于背景色,几乎是调节于整个页面的关键色。如果没有这一背景色块,整个页面容易发灰。还有右边的粉绿大块面积稍多,有些灰的感觉,好在前景的文章使用了色度明度稍深的蓝色压住,稍显好些,关键还是有白色的箭头很好的把粉绿和蓝色文字的色阶拉开了距离。左边的照片清晰且纯度较高也对整个页面配色起到一定的调节作用。
  点睛色主要是标志的颜色,如果可以忽略不计,页面配色更趋于平淡。

  结论:
  明度较高饱和度较低的颜色,如果没有明度较深饱和度较高的颜色进行勾勒或者点缀,这个页面配色看起来容易发灰。

  → 绿色对比色网页例图:http://www. fitintercambio.com.br

网页设计配色应用实例之绿色系


  绿色系分析:(对比色配色:绿色+红色)
  主色调是有点黄色倾向的绿色,从HSB数值上可以看到H为98度,绿色特性较明显了。
  辅助色则是三个浅色系,起到调和整个页面色彩的作用。粉红和粉绿色分别取的是页面绿色红色通过提高明度而得,因此整个页面色彩前后呼应、配色调和。
  点睛色红色的HBS模式H数值351度,在色轮表上偏向于紫色方位,因此倾向于冷红色,色度上稍有些刺目和艳丽。
  主色调绿色和点睛色红色所放置的位置,让页面导航区域和内容区域视觉引导较为分明:主色调绿色的设计亮点既用于导航又很流畅自然的融合到背景,浑然一体;这里尤其是点睛色红色放置于背景的处理很独到,烘托突出于前景内容,在众多网页设计中并不多见。

  结论:
  整个页面的配色取色于标志色,量身定做的感觉。
  适当的运用对比色有强调的感觉,但页面配色处理上并不强烈、耀眼,因为使用了白色及其相应的提高明度的粉色做视觉的缓和处理。

  本部分小节:
  ● 绿色是缓和健康的颜色, HSB数值H色相为120度时是正绿色。大家通过以上的网页实例可以看到,偏向于黄色方位的绿色运用得最多,也就更受到大众的欢迎。纯正的正绿色在视觉感受上可能稍微显得有些色度较低的生硬,配色难度稍大。不同的黄绿色饱和度、明度的不同变化可以表达不同主题的页面效果。
  ● 点睛色可以是几种,也可以是不同对比色的组合,有的起到丰富并活跃页面配色的视觉节奏,有的起到调和整体页面配色的作用。
  辅助色通常是同类色系或者邻近色系,起到辅助并烘托主色调的作用。辅色调和主色调分别在不同的页面做为唯一高纯度色的时候,能够起到挽救于整个页面发灰的作用。
  ● 当整个页面配色明度太高色度降低时候,页面容易呈现发灰的感觉,可以适当的使用少许纯度较高或者明度较低的色系来加以改善。

随机推荐