网页页面中总是由具有某种内在联系的各种色彩,组成一个完整统一的整体,形成画面色彩总的趋向,称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围,是影响配色视觉效果的决定因素。

  两种或两种以上的色彩合理搭配,产生统一谐调的效果,称为色彩调和。色彩调和是求得视觉统一,达到人们心理平衡的重要手段。

  调和就是统一,下面介绍的四种方法能够达到调和页面色彩的目的。

  ■ 同种色的调和
  
相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进,在明度、纯度的变化上,弥补同种色相的单调感。

  → 同种色的调和网页例图:http://www. solar1.org 
  
  

  同种色的调和分析:

  同种色给人的感觉是相当协调的。它们通常在同一个色相里,通过明度的黑白灰或者纯度的不同来稍微加以区别的,产生了及其微妙的韵律美。为了不至于让整个页面呈现过于单调平淡,有些页面则是加入极其小的其他颜色做点缀。该页面使用了同种色的黄色系,淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。
  结论
  同种色被称为最稳妥的色彩搭配方法。

  ■ 类似色的调和
  
在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。

→ 类似色的调和网页例图:http://www. solar1.org

  类似色的调和分析:

  类似色相较于同类色色彩之间的可搭配度要大些,颜色丰富、富于变化。
  以上页面主要取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。虽然主色调的米黄色在页面中使用面积最大,但是我们看到由于它的明度非常高,饱和度就降低了,因此在页面中处在不明显的角色。而绿色的纯度最高,且使用面积次之,页面显示较显眼,因此用于次级导航位置上。整个页面主次的视觉引导分明。
  结论
  不是每种主色调都是极其显眼的位置,通常多扮演着用于突出主体的辅助性配角。而重要角色往往在页面中用的份量极少,却又起到突出主体的作用。

 ■ 对比色的调和
 
 调和方法有:
  1、提高或降低对比色的纯度;
  2、在对比色之间插入分割色(金、银、黑、白、灰等);
  3、采用双方面积大小不同的处理方法;
  4、对比色之间加入相近的类似色。

  → 对比色的调和网页例图:http:// www.snapple.com 
  
   
  
  对比色的调和分析:

  基本上可以说是黄色和紫色的对比色做页面的主要色调。黄色紫色组合在网页中使用率较低,原因是这组颜色适用范围相对其他两组对比色要小很多,配色难度也较两组大。
  这里黄色加入了红色呈中黄色,紫色加入了红色,偏玫瑰色,所以这组颜色不是严格意义上的对比色,也因此使这组颜色看起来协调、舒服。这个页面都调低了亮度使整体降低了纯度,缓和视觉刺激。白色是这组对比色里加入的协调色。

  结论:
  从上面的分析我们可以知道,通过上面的这些色值调配--当需要使用这组对比色配色时候该如何达到协调的目的。
  不是对比色为主色调的页面就一定会有不舒服的感觉的,主要可以通过调低亮度、降低饱和度、加入少许白色来调和。

  ■ 渐变色的调和

  渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色,可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。

→ 渐变色的调和网页例图:http:// www.macromedia.com

  渐变色的调和分析:

  该页面背景使用了渐变的效果,增加了视觉空间感。在导航栏、广告区域、产品技术的大标题块,都使用了渐变的技术手法来表达,产生三维的视觉效果,统一了整个页面的设计语言,也是区别于其他网站页面的个性体现,达到让人印象深刻的目的。
  结论:
  渐变色能够柔和视觉,增强空间感,体现节奏和韵律美感,统一整个页面的目的。
  除了统一当然也可以起到变化页面视觉形式的作用。该设计语言可做需要的时候适当的使用。 
  
  
  本部分小结:

  
  本节主要对色彩的对比与调和做了实例分析。例如当页面平淡单调,需要用对比手法做些变化来丰富页面的色彩设计;当页面变化过多,显得刺眼、凌乱,可以通过以上介绍的调和方法进行调整,使得页面看起来更统一协调。
  
  ● 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。
  ● 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。
  ● 对比色的搭配并不是就是说是绝对值的红或者绿,蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大,也就是说越难调和;反之,倾向越不明显的对比色越容易调和。请参照刚才对比色调和页面分析例子方法。
  ● 不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色,主要是根据色彩相互之间的搭配关系来体现的。
  ● 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配,容易产生个性效果,那叫玩色彩了,限于色彩运用得非常熟练的朋友,但不推荐初学者使用。

网页设计配色: 色彩的调和相关推荐

  1. 网页设计配色应用实例剖析——红色系

    红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的颜色.红色容易引起人的注意,也容易使人兴奋.激动.紧张.冲动.还是一种容易造成人视觉疲劳的颜色. 在众多颜色里,红色是最鲜明生动的.最热烈的颜色. ...

  2. 秒变配色高手!怎么都不会错的6条网页设计配色原则

    身为网页设计新手的你,是不是还在纠结于你制作的网页找不到一组完美的配色方案?在本教程中我们将与你分享6条肯定会火,并且"错不了"的指导方针,你可以按照这些原则把握最基本的色彩规律. ...

  3. 6条网页设计配色原则

    身为网页设计新手的你,是不是还在纠结于你制作的网页找不到一组完美的配色方案?在本教程中我们将与你分享6条肯定会火,并且"错不了"的指导方针,你可以按照这些原则把握最基本的色彩规律. ...

  4. 网页配色不用愁!6条网页设计配色原则

     身为网页设计新手的你,是不是还在纠结于你制作的网页找不到一组完美的配色方案?在本教程中我们将与你分享6条肯定会火,并且"错不了"的指导方针,你可以按照这些原则把握最基本的色彩 ...

  5. 2015年网页设计配色趋势预测

    原帖地址:http://www.58img.com/design/2015              2015年网页设计配色趋势预测 发布时间:Thursday, December 25, 2014 ...

  6. 2015年最重要的网页设计配色趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,AnyForWeb的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色预测分析,来看看有哪些亮点吧. 提前搞定201 ...

  7. html颜色趋势,跟上色彩潮流!带你展望2015年的网页设计配色趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色预测分析,来看看有哪些亮点吧. 提 ...

  8. 网页设计配色应用实例剖析——黄色系

    黄色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉.象征光明.希望.高贵.愉快.浅黄色表示柔弱,灰黄色表示病态.它的亮度最高,和其他颜色配合很活泼,有温暧感,具有快乐.希望.智慧和轻快的个性, ...

  9. 网页设计配色应用实例之黄色系

    黄 色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉.象征光明.希望.高贵.愉快.浅黄色表示柔弱,灰黄色表示病态.它的亮度最高,和其他颜色配合很活泼,有温暧感,具有快乐.希望.智慧和轻快的个性 ...

  10. html颜色趋势,预测2015年网页设计配色趋势(4)

    色彩搭配是设计界永恒的话题,而在网页设计中该如何掌控色彩似乎很少有标准和定论,只能一味的凭借设计师自己的经验和客户的偏好进行设计工作. AnyForWeb根据2015年的色彩大致趋势走向,并且结合相关 ...

最新文章

  1. MPB:甘肃省科学院祝英等-药用植物地下茎内生真菌的分离纯化及鉴定
  2. Codeforces Round #470 (rated, Div. 2 C. Producing Snow(思维)
  3. java学习(4)--oracle
  4. 铁乐学Python_day12_作业
  5. c++ char* 改变长度重新赋值_[C/C++] 2 :分析下列代码有什么问题?
  6. 大一计算机基础考试知识点,大学计算机基础考试知识点(完整版)
  7. 翻译www.djangobook.com之第一章:Django介绍
  8. 给大家推荐几个程序员必备网站
  9. 2021-2027全球与中国筒式过滤器外壳市场现状及未来发展趋势
  10. Deep Crossing: Web-Scale Modeling without Manually Crafted Combinatorial Features【论文记录】
  11. ASP+Access的安全隐患及对策(转)
  12. iOS下WebRTC音视频通话(一)
  13. 基于cocos2dx-lua,udp的局域网游戏
  14. apk反编译工具及使用步骤(详解)
  15. steponeplus软件需要java_StepOnePlus定量PCR仪之使用心得[心得点评]
  16. 李宏毅深度强化学习(国语)课程(2018) 笔记(八)Imitation Learning
  17. ios获取手机序列号_iOS-获取手机唯一标识符(获取苹果手机IMEI,获取苹果手机MAC)...
  18. 更多内容请关注今日头条
  19. 笔记本电脑如何开启关闭触摸板?
  20. 一文详解头层反绒皮和二层反绒皮的区别,别再傻傻分不清了!

热门文章

  1. Windows 回声消除 怎么外放音乐不让对方听到
  2. 关于word中的DDE如何查看
  3. 码云zheng项目介绍
  4. 中外合作办学硕士—社科院杜兰金融管理硕士,给23考研加一重保险
  5. LC053-最大子序和
  6. 谷歌统计Google Analytics使用入门
  7. Java 实现局域网聊天室功能(私聊,群聊)
  8. 软件测试之因果图分析法
  9. ftm模块linux驱动,飞思卡尔K60 FTM模块详解【二】
  10. thymeleaf引用图片_thymeleaf中img标签图片src路径问题