分享

颜色提高篇,设计师需要掌握颜色色相的对比知识

 聋叟 2018-08-15

在前篇的颜色文章中,以风趣的语言介绍了颜色的三个DNA,分别是色相、明度、纯度(饱和度)。但是设计师光是了解还不够的,往往是需要运用它的,那么今天就讲解一下关于色彩对比的知识。

颜色提高篇,设计师需要掌握颜色色相的对比知识

在讲之前,请看一幅图。上图估计是很多人童年中的噩梦,父母总是喜欢将我们和隔壁家的孩子进行比较,俗话说没有对比就没有伤害,每次我们都被暴击击中,而这就是今天所讲的对比知识。要知道,我们自古就生活在一个对比的世界里,不可能没有对比,所以我们要坦然面对,去接受他,并研究他。同理,我们颜色的世界也存在着对比,颜色每次考的分数也存在着分数的高低,作为父母的我们当然要将他们比一比了,毕竟他们都是我们设计师的孩子。

色相的对比就是将红色跟黄的、绿的、蓝的、紫的等等同学期末考试的分数进行对比(关于什么是色相、明度、纯度、色环等请看上一篇,这里就不重复讲解了),就好比父母把我们的分数跟隔壁家的胖虎、二蛋、小豪、小美等同学进行对比。好了,那我们就看看是什么个对比法。色相的对比主要分为同类色的对比、邻近色的对比、对比色的对比、互补色的对比。


同类色的对比 (距离15°)

颜色提高篇,设计师需要掌握颜色色相的对比知识

同类色是指在色环上相距离15°的颜色进行对比比较(在这里讲的15°,45°,90°的度数并不是绝对的,只是一个范围,以15°的为例子,0-15°,或者是16°的颜色都可以算是同类色),他们的颜色很统一,看起来很单调,基本觉得没什么对比。举个例子:我期末考了个20分,隔壁的胖虎考了18分,我们可以算是同一战线的人了,因为半斤对八两,你觉得父母会拿我们进行对比吗,他们只会认为我们都是同类人,没什么好比的。所以15°距离的颜色对比就叫同类色,同类色的特点非常统一、稳定。设计中常用同类色会使得画面变得统一,但也会出现呆板,单调乏味的现象。


邻近色的对比(距离45°)

颜色提高篇,设计师需要掌握颜色色相的对比知识

邻近色是指色环上距离45°的颜色进行对比,他们的颜色看起来统一而又缓和,但又有变化,变化似乎又不大。举个例子:隔壁的二蛋分数考了58分,父母又拿我们进行对比,一看二蛋的分数不错,比我高不少啊,估计父母又会哆嗦我,但是二蛋也没过60分及格线啊,仔细一想我们还是一路货色。所以45°距离的颜色叫邻近色是因为我们虽然有点不一样,但是还是相邻在了一起,邻近色的特点稍显活泼,但是对比的视觉冲击力还是比较弱,看起来比较舒缓。设计师常用邻近色使画面变得统一而又缓和,但是缺点还是很明显,视觉的对比效果还是太弱了(因为我们都是不及格)。


对比色的对比(距离90°)

颜色提高篇,设计师需要掌握颜色色相的对比知识

对比色是指色环上距离90°的颜色进行对比,他们的颜色看起来生动而又活泼(额,相对来说,这是设计师最常用的对比颜色了)。举个例子:隔壁的小豪考了80分,父母就喜欢拿我和他进行对比,要我向他学习学习,80分对我来说要求不是很高,努力努力我应该能达到。这种恰当好处的对比那就是父母想要的对比,所以就叫对比色了,90°的对比色特点就是使得颜色的对比很明显面,在设计中常用对比色使得画面变得明快而又生动。


互补色的对比(距离180°)

颜色提高篇,设计师需要掌握颜色色相的对比知识

互补色是指将色环上距离180°的颜色进行对比,这种颜色的对比会非常的强烈,刺激。举个例子:还是拿我的分数跟隔壁小美的分数进行对比,小美考了120分,天哪,总分只有100分,老师看她太优异了又给她加20分,这个对比,简直就是一万点暴击的伤害,非常的强烈和刺激,每次对比完我都快哭了。所以这种强烈的对比就叫互补色的对比,因为我根本不适合读书,小美正适合读书,我们结合在一起完全就是互补嘛。180°互补颜色的对比,会显得强烈刺激,显眼和特别,在设计中也就会使得设计的画面变得鲜明,活跃,但是设计处理的不好就会变得非常的乱,杂,过分的对比会显色非常生硬(我考20,小美120分,这对比落差也太大,显得太生硬了)。


设计实践:

颜色提高篇,设计师需要掌握颜色色相的对比知识

色相的对比讲完了,实际中如何实践呢,PS插件大法好,祭上神图PS插件Coolorus。妈妈再也不用担心我在配色过程中算度数了!coolorus将常用的色彩搭配的方案都给我们调好了,用的过程中我们只需要进行适当的微调就可以调出完美的配色方案了。

颜色提高篇,设计师需要掌握颜色色相的对比知识

接下来,我们仔细研究一下他的配色方案,如图一共给了6个对比配色方案,第一灰色的圈圈的度数一看,明显15°以内嘛,所以是同类色的对比配色方案。第二个灰色的圈圈,相差180°,那么就是互补色的对比方案。第五个,90°以内,既可以调出邻近色,又能调出对比色,真的是很方便啊!咦,再仔细一看,你会发现,第三个,第四个,和第六个怎么不是刚才说的几个度数,而且数量还变了?且听慢慢道来,在设计师配色的过程中,只使用两种颜色的对比的机会很少(譬如父母不会只那我和小豪对比,这不把我和隔壁家的孩子对比了个遍),所以配色上会用到2种以上的颜色,多得时候甚至五六种。而第三个灰色圈圈给了三种颜色的搭配,主色是最上面的,另外两个颜色给了互补色邻近的两个颜色,使得强烈的对比减弱了(就好比妈妈觉得小美120分太高了,就会拿小美旁边的分数,98分,95分进行对比,美其名曰:我也不希望你考个120分,对你太难了,你考个90多分也就够了,这总行了吧)。而第四个圈圈和第六个圈圈和第三个道理是一样的,使得对比既有对比又有调和。


本期总结:

同类色(15°)的对比颜色对比比较弱,大家都很统一(20分和15分简直就是半斤对八两,有什么好对比的),邻近色(45°)的对比,颜色稍微有一点对比,但是很缓和,看不出来(20分和58分比,是高了,但是还不都是不合格),对比色(90°)的对比恰到好处,画面既生动又活泼(20分和80分对比,要的就是这种,对我的要求既不高也不低),互补色(180°)的对比非常强烈刺激,显著(20分和120分对比,天哪还有活命的机会吗)。

颜色提高篇,设计师需要掌握颜色色相的对比知识

颜色的对比没有绝对的好坏,俗话说没有不好看的颜色只有不好看的搭配,就像我即使20分,奶奶没拿我和别人进行对比,还觉得我比较聪明嘞!好了,关于色相的对比就讲这么多了,实际设计师们在使用的时候,要按照自己的设计需求进行选择,比如我们要表现画面的柔和和统一,当然会选择同类色和邻近色(额,就像父母为了显示我的好,只好拿我和胖虎对比,觉得我还是有点优势的),如果要表现某一类的冲突对比那就选对比色或互补色,典型的例子如海报中都喜欢选择红蓝表示双方进行对比。

偷偷的告诉你,我们的父母不仅把我和小美的成绩进行对比,还把我们的言谈举止、穿衣打扮等方面进行对比嘞。那意味着什么呢?颜色不仅仅只有颜色色相的对比,还有其他方面譬如颜色纯度进行对比,关于颜色其他方面的对比,我们下期再见。我是扁豆君,致力于用最平民化的语言讲设计,如果你喜欢,那就关注我吧。哦,对了,不懂的欢迎提问,麻麻说爱问问题的孩子都是好孩子!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多