平面设计色彩搭配理论基础。平面设计自学教程系列指南文章。酷coo豆

作者:@酷coo豆。公众号:followdesign(平面设计学习日记)

一、扯淡的色相环?

学过色彩理论基础的同学都知道,在色相环上夹角180°的色彩互为补色。但若以上图左侧色相环为标准,那么红色的互补色为绿;若以右侧色相环为标准,红色的互补色却成了青色。青和绿,两者在观感上差异还是颇大的,这岂不是一个大大的矛盾?

因而,这让我产生了一个疑问:作为设计师,我们到底该以怎样的色相环,作为选色标准?色彩搭配是否遵循着严苛的数学运算?

二、哪一个才是标准的色相环?

第1组:由三原色「红绿蓝」衍变出的色相环

该色相环是在Photoshop的RGB色彩空间绘制完成。基于色彩的色相、明度、饱和度三大视觉感官要素作为变量,保持S=100%,B=100%,H分别取0°、60°、120°、180°、240°、300°通过渐变绘制完成。

三原色

间色

基于这个准则,我借助Photoshop工具,首先将红、绿、蓝三个基色放在夹角互为120°的夹角上,然后将等量的原色色光:红和绿、绿和蓝、蓝和红相加混合后,便可得到了黄色、青色、品红色(我将其称为紫色,降低其明度便可得到常见的紫色),其专业术语叫做三间色。见下图。

第2组:由色光三原色「红绿蓝」衍变出的色相环

三次色

到这里,你应该大概知道色相环是怎样演变出来的吧。其本质就是色光或色料,按不同比例的混合,由原色—>间色—>三级色—>四级色…如此演变。该组的色彩分布规律和上述第一组色相环是保持一致的,相当于采样变少了而已。

第3组:由美术三原色「红黄蓝」衍变出的色相环

沿用上面的方法,将色光三原色换做美术三原色「红黄蓝」,便得到了下图所示的色相环,美术三原色中的「红黄蓝」同样彼此独立,某一基色无法由其他两种颜色合成。

色料的显色来自自然光中未被吸收部分光波的反射,所以色料的显色不及色光鲜艳明亮,这和你在灯光下看书,和直接盯着台灯看是一个道理。

第4组:由工业印刷「CMY」三色衍变出的色相环

继续沿用上面的方法,将色轮中的基色,分别换做工业印刷用的洋红、黄色、青色三色油墨,演变得到如下色相环。

第5组:富有权威的AdobeColorCC配色工具-色相环

最后,我在Adobe官网找到了这个AdobeColorCC的配色工具,我们同样按60°的夹角,对色轮上的颜色进行采样,最后得到右侧的6种主要色相,分别是红色、橙色、黄色、绿色、蓝色、紫色。如果按照夹角180°互为对比色的理论,那么下图右侧的上下两组颜色即互为对比色。

OK,说完了上述的五组色相环的基本现象,我们将色相环进一步简化为6色色相环,以红色为0°作为起始色,重新排列,并适当压暗或提高取样色彩的亮度,保持所有颜色的饱和度、明度均为90%。因为我们只想看看色相的差异,便得到下面这张图。

从图中,首先第1、2两组色彩,纵向对比下来完全一样。第2组色彩与第4组CMY三基色演变而来的色相环,在观感上非常近似,我们几乎可以把1、2、4等同为一组。其色序依次为:红、黄、绿、青、蓝、紫。

同样的,第3、5两组色彩,在红色与黄色之间,均有缓和的橙色,然后再是过度到绿色、接着再是蓝与紫。3、5两组色彩也可以等同起来。其色序依次为:红、橙、黄、绿、蓝、紫。

三、小结

四、色彩的印象

天空的蓝色给人以未来的希望,日出的橙光给人以温暖与活力,稻穗的金黄能给我们带来富足和以丰收愉悦。色彩能激发出的联想和情绪,深受我们的民族、宗教、以及接受教育程度的影响,当然还和我们成长的自然环境,密不可分。

例:春夏秋冬的色彩印象

色彩搭配讲究的是一种印象、以及心理感受的信息传达,掌握了其中的规律,色彩搭配自然能够信手拈来,首先在平面设计中的色彩有冷暖之分。

1.冷色

比如常见的冷色有:蓝、白、青色、紫色。冷色通常会让人联想起凉爽的气候、冬季、死亡、悲伤、冰、夜晚和水这些事物。冷色可以给人平静、安宁、新人、干净的感觉。紫色与尊贵经常联系在一起,看起来十分内敛。

2.暖色

常见的暖色:红、橙、黄。暖色可以创造温暖的感觉,暖色通常会让人联想起太阳、火焰和爱情。红色是血的颜色,感觉是温暖的,橙色和黄色会给人夏天的感觉。给图像添加一个橙色的滤镜,图像看起来就会有温馨快乐的感觉。

3.明暗

颜色的色调也可以影响颜色给人的感觉。上图中的原色——蓝色,向左为添加白色,向右添加黑色,同样的蓝色产生了不同的感觉。

明亮的颜色给人以轻快、积极向上的感觉,而昏暗的颜色给人以深邃、压抑的感觉。比如人们在买房时,都会偏向采光充足的户型,而不太喜欢待在昏暗的房间里。在实际应用中,可以在采用单色配色方案时,通过改变颜色的色调来创建不同的感觉,参见下一小节的同类色配色案例。

4.红色

红色其时常让人联想到:爱情、兴奋、能量、挑战、活力、喜庆、吉利的正面词语。红色也是属于中国人的颜色。在新店开业、商家促销、传统节日的场景中,我们总能看到红色的印记。

红色有着血液般的颜色,同时也蕴含着危险、愤怒、暴力、攻击、嫉妒的视觉印象。红色还可以很好地吸引人们的注意,因而在生活中很多危险警告的标识牌、消防栓、警报灯都是红色的。

红色是很强势的颜色,当它和其他颜色相遇时,比如搭配黑色,可以创建非常强势的感觉。比如这样的。

2333333333......

5.橙色

橙色是橙子成熟时的颜色。其不但可以代表温暖、活跃、开朗、朝气蓬勃,也时常和一些可口的食物以及一些健康产品搭上关系。比如富含维生素C的橙子或饮料、诱人的烘烤食物等。

活力、动感是橙色最为显著的色彩印象。利用橙色能够轻松地创建一个有趣的氛围,而且橙色创造出的活跃气氛并没有危险的感觉。另外,橙色也会传达出任性的、嘈杂的、廉价的感觉。

6.黄色

黄色经常可以让人联想到太阳和温暖。与黄色有关的正面印象有:纯洁、明快、希望、未来、轻快的、繁华等等。黄色的英文“yellow”,这个词有表胆怯的意思,因而黄色常常和幼稚、懦弱、不成熟的联系在一起,因而再小孩子的玩具里会广泛用到黄色。

黄色是所有彩色系里最为明亮的颜色,十分吸引人的注意力。黄色常常与黑色搭配在一起,并能营造出非常强烈的对比,见上图案例。另外,一个绝佳的例子就是很多国家的出租车都采用这种配色。

7.绿色

绿色是大自然中最为常见的一种颜色,绿色常常被作为安全、自然、健康、和平、新鲜、和谐的代名词。因为大多数植物都是绿色的,绿色也代表着经济增长和健康。绿色经常用作一些保健食品的LOGO,因为看起来就十分贴近自然。

如果搭配上蓝色,通常会给人健康、清洁、生活和自然的感觉。当然由于绿色的常见,也时常会给人一种乡土气息的感觉。但是在股市行业里,绿色的出现就是一个灾难啦。

8.蓝色

△中等明度的蓝色

蓝色是一个神奇的颜色,因为不同明度的蓝色会给人不同的感受、想法和情绪。中等明度的蓝色可以给人一种科技、稳重、镇静、指的信赖、理性、男性的感觉。

△低等明度的蓝色

而低明度的蓝色,总会给人一种孤独、荒凉、消极的感觉,这种色彩印象和它的互补色橙色所具有的的运动、积极印象,正好完全相反。但这样的设计作品中,一般非常少见,在一些插画中为了艺术效果,会有这样的情绪传递。

△高明度偏青的蓝色

而浅蓝色,则通常会让人联想起天空和水,给人以提神、自由和平静的感觉。蓝天永远都是平静的,水流可以冲走泥土,清洗伤口,所以蓝色也代表着新鲜和更新。蓝色给人冷静的感觉,会帮助人放松下来。

9.紫色

紫色总是能和高贵、典雅、华丽的字眼联系起来。给人一种奢华,同时映射出神秘感的感觉。比如法国式的浪漫、或红酒包装时常搭配金色,以营造出高贵的质感。

另外很有关于女性的设计,也会广泛引用到紫色,总能能给人一种妖艳、魅惑、时尚的强烈视觉感受。

10.白色

白色代表着圣洁、正义、和平。给人干净、简约、真实的印象。比如医生的白大褂、天上的白云、棉花等,总能给人一种舒适干净的视觉印象。白色时常用作底色,以突显事物的本质面貌。大面积的留白,是制作出高大上的设计必备的技法。与此同时,白色也有空虚、离别、死亡、寒冷的视觉印象。

11.黑色

黑色庄重、严肃、厚重。时常做来营造恐惧、阴郁、绝望的氛围。虽然黑色有着很多负面的含义,但当黑色遇上其他颜色的时候,会产生其他的意义。比如当黑色邂逅金黄色,就可以给人一种奢华、高档的感觉(见上图);当黑色偶遇银灰色,则会给人一种成熟稳重的感觉。

五、常见的色彩搭配组合

1.同类色

同类色是指色轮夹角60°以内的色彩,其色相对比差异不是很大,给人以协调统一、稳定自然的印象。同类色的搭配也很容易出画面效果,不太容易出错。通常为了避免版面呆板,可以通过增加明暗对比,来制造出丰富的质感和层次。

▽例如:青色与蓝色的同类色组合,在网页设计中的运用。

2.邻近色

邻近色是指:色轮上间隔角度在60°~90°的色彩。如红与黄、橙与绿、青色与黄绿。邻近色在明度和纯度上可以构成较大的反差效果,因此这种配色使画面呈现出丰富、跳跃的感觉。

▽例如:绿色与黄色;黄绿与蓝色之间的对比。

▽例如:邻近色红与黄之间的对比。

3.对比色

对比色是指:色轮上夹角在120°左右的色彩。这样的色彩搭配使画面存在矛盾关系,矛盾越鲜明,意味着对比越强烈。常用作凸显,需要着重说明的独立视觉元素,或表主题信息。

▽再比如:百事可乐经典的红蓝对比

▽百事可乐平面海报

4.互补色

互补色是指色轮上那些呈180°角的颜色。比如蓝色和橙色、红色和绿色、黄色和紫色等。互补色有非常强烈的对比度,在颜色饱和度很高的情况下,可以创建很多十分震撼的视觉效果。

▽例如:高明度的紫色背景、与橙黄色色块之间的对比,让促销买点得到突出展示。

5.四方色

四方色是在色轮上画一个正方形,取四个角的颜色。四方色组合的配色对比非常强烈、多彩,给人以活泼、游戏、趣味的感觉。用一个确切的词概括四方色组合的色彩印象就是“万花筒”。该种配色组合适用于给大众用户的设计。还有就是小孩子的玩具、书籍读物,也常常采用这种多彩的设计。

▽例如:服务万千用户的科技公司logo、和插画设计。

▽例如:多彩的儿童网站设计。

该网站其色彩非常鲜艳,活泼,几乎用到了全色相的色彩。一般的小孩子看到这种风格的画面定会爱不释手。

▽儿童宝宝类的网页设计

6.其他色彩搭配组合

上面五种,是最为常见、也是最基础的色彩搭配组合,另外在此基础上延伸出来的色彩组合还有:分裂互补色、三角色、四方补色等组合,感兴趣的同学可以去搜索一下。此处由于篇幅已经足够长了,就不再展开讨论。请直接参考后面的书籍和实战视频教程推荐。

六、总结

因而作为平面设计新人,在色彩搭配的学习时,还是得以感官为主,多练多看。色彩搭配一是要讲究配色是否符合行业及人群特征,二是要注重学习别人的配色经验和技法,更不要过分去纠结同类色到底是60°,还是45°之类的琐碎细节。

THE END
1.sci常用三色配色方法在sci论文中其作图也是非常有必要的,尤其是更多的用于三色配图,其能够更好的提高内容的可读性和视觉吸引力。因此对于 sci常用三色配色方法 ,下面也是给大家整理一些,以便于进行参考 在sci论文中其作图也是非常有必要的,尤其是更多的用于三色配图,其能够更好的提高内容的可读性和视觉吸引力。因此对于sci常用三色配色方法...http://www.lanzhuwh.com/zhidao/15286.html
2.古典高级单色双色和三色配色色标古典高级单色双色和三色配色色标 cmyk色值,cmyk色谱,cmyk配色,三色,单色,印刷色,双色 VI模板共享与免费下载网站-素材公社(www.tooopen.com)https://www.tooopen.com/view/562326.html
3.红蓝黄三色组合配色是()。D. 要给人舒服的配色就必须是给人的视觉带来刺激性,同时也是一种自然悦目,非常流行的色彩感觉,比如常见的冷暖对比方式。 查看完整题目与答案 【简答题】配色搭配练习 查看完整题目与答案 参考解析: A、 非同一性配色 AI解析 重新生成最新题目 【单选题】如果将人眼比作照相机的话,则相当于暗盒的是( )。 https://www.shuashuati.com/ti/1eacfac85ef544f6888878dc59a059fb.html?fm=bd9bacb670aa69e7ff6172d3429ea52ef1
4.配色手册日本色彩设计研究所金色银色双四色三色四色RGBCMYK配色...当当河南句字图书专营店在线销售正版《配色手册 日本色彩设计研究所金色银色双四色三色四色RGBCMYK配色设计原理方案书籍新书正版》。最新《配色手册 日本色彩设计研究所金色银色双四色三色四色RGBCMYK配色设计原理方案书籍新书正版》简介、书评、试读、价格、图片等相关信息http://product.dangdang.com/11275047053.html
5.配色器懒人三色配色 Hue:0° Angle:0° R:100 % G:0 % B:0 % RGB:FF0000 配色方案ID:0011Tw0w0w0w0 配色预览http://www.lr3s.com/Design/Colors
6.进阶版三色搭配类似色理所当然成为三色配色法则中最难应用的一条。 对 错 *7. 三色搭配技巧:一种背景色、一种主要色、一种辅助色,调整另外两色的明度和纯度,或加入无彩色削弱刺激,突出层次感。 对 错 *8. 在下图中,只用一种主色其他为辅助色的三色搭配法,可成功搭配出和谐效果,并取得色彩间的平衡。 https://www.wjx.cn/jq/97717428.aspx
7.传统系配色方案配色教程传统系单色,传统系双色,传统系三色https://www.20nn.cn/colour/colour-chuantong.html
8.高级色彩搭配师理论考试题库(含答案).docx在下列选项中能够实现动感时尚效果的方法是() A、嘉德的明了性原理 B、嘉德的熟悉性原理 C、伪单色配色 D、基调配色答案:A 52.在下列选项中能够实现古典装饰效果的方法是() A、toneontone配色 B、toneintone配色 C、三色配色(tricolor) D、两色配色(bicolor)答案:A 53.CMYK表色法是减色表色模式,遵循色料...https://m.book118.com/html/2023/0506/7045065125005103.shtm
1.经典三色配色方案:如何利用三种颜色打造完美的视觉效果三色配色方案,是设计领域中最为经典和实用的配色方法之一。它通过选择三种不同的颜色,巧妙地将其融合在一起,创造出和谐而又富有表现力的视觉效果。无论是在平面设计、网页设计、室内装饰,还是时尚搭配中,三色配色方案都可以帮助设计师和创作者实现视觉的平衡与协调。本文将深入探讨经典三色配色方案的应用,如何选择适合...http://www.shunfu.xin/zdyxmj/099520.html
2.设计分享30款三色配色方案应用非常设计师网在前段时间非常设计师网推出了丹尼尔老师的《室内设计色彩法则》公开课,其中我们学会如何使用色彩法则去设计室内环境,下面就是小编为大家整理的30款三色配色方案在实际上的应用。 在前段时间非常设计师网推出了丹尼尔老师的《室内设计色彩法则》公开课,其中我们学会如何使用色彩法则去设计室内环境,下面就是小编为大家整理...http://www.verydesigner.cn/article/31544
3.饼图配色三色专题模板饼图配色三色图片素材下载我图网饼图配色三色专题为您整理了154个原创高质量饼图配色三色图片素材供您在线下载,PSD/JPG/PNG格式饼图配色三色模板下载、高清饼图配色三色图片大全等,下载图片素材就上我图网。https://so.ooopic.com/sousuo/50578895/
4.黄绿色——三色配色篇python三色配色热门文章 蓝绿色——三色配色篇 11680 纯黄——三色配色篇 9275 黄绿色——三色配色篇 7459 UI设计规范技巧——切图格式 6885 橙色——三色配色篇 6624 最新文章 设计一个界面动效的时候,我们需要考虑什么? 色彩设计方法 UI设计规范技巧——文件整理 2016年25篇 ...https://blog.csdn.net/yaping1995/article/details/52670391
5.色彩理论基础:如何在室内设计中使用色彩理论?方形配色方案使用在色轮上均匀分布的四种颜色。每个方形配色方案将包括一种原色和二次色以及两种第三色,无论它们在轮子上的位置如何。 所选颜色的强度可能会有所不同,具体取决于所选颜色是粗体还是中性。与三色配色方案一样,室内设计师通常会尝试通过选择一种主色调和三种强调主色调的色调来实现暖色和冷色的相同种类...https://www.hxsd.com/information/11277/
6.图片处理入门教程图片处理的十大禁忌设计师必看→MAIGOO知识【单 色】:基于单色的配色方案也不难实现,首选色的色相确定之后,调整它的色度、色调和色彩(让其与不同比例的黑色、白色和灰色混合),也可以形成一套配色方案。 【三 色】:三色配色方案借助色轮很容易实现,也就是使用色轮上相互等距离的3种颜色即可。 https://m.maigoo.com/best/12704.html
7.学会这3个配色法,零基础也能做出好看的配色平面其它平面设计尤其是轻质风格的设计中,色彩尽量予以控制在三种以内,如果要选择这类配色法,应该尽量选择明度较高、饱和度较低的色彩,冲淡色彩彼此的强烈冲击。最好的办法仍然是以某一个色彩作为主色,其他两种色彩起强调、对比的作用。 网页设计选用蓝色、紫红和粉红的三色搭配,运用了三色对比,看上去色彩协调、活泼。网页所采用的...https://www.jb51.net/pingmian/562926_all.html
8.色彩搭配速成!3个实用方法帮你全面搞定配色优设网由于对比色相互对比构成的配色,可以分为互补色或相反色搭配构成的色相对比效果,由白色、黑色等明度差异构成的明度对比效果,以及由纯度差异构成的纯度对比效果。 3.1 色相对比 3.1-1 双色对比 3.1-2 三色对比 3.1-3 多色对比 3.2 纯度对比 3.3 明度对比 ...https://www.uisdc.com/3-color-matching-skills
9.四色三色组合色彩搭配色卡配色矢量XD文件Sketch模板ai设计素材...相关推荐 UI扁平化Material色卡色版设计师常用配色XD文件Sketch模板ai素材 UI APP常用色卡渐变配色背景创意Sketch矢量XD源文件设计模板素材 UI扁平化Material色卡色版设计师配色矢量XD文件Sketch模板ai素材 渐变预设AI色卡PS样式XD/Sketch流体平面UI电商PSD设计模板素材 ...https://sskoo.cn/x061/
10.吉利嘉际有几种颜色采用三大外观配色三色配色 全新一代吉利佳吉的定位是紧凑型商务车,所以吉利佳吉有几种颜色,车型采用了三大外观配色。这三种颜色分别是阿尔卑斯白、玻利维亚蓝和莫勒海滩银。那么哪种配色最好呢?男女皆宜。让我们继续阅读。 阿尔卑斯山看起来最好。 吉利佳吉的三种外观配色中,阿尔卑斯白是最好的,给人一种端庄典雅的气质。开白色佳吉的用...https://www.yoojia.com/ask/5-14412882912313165680.html
11.三色搭配方案全球精选海量大图三色搭配方案,又称色彩搭配法则,是视觉设计中常用的配色理论。它基于色彩心理学和色彩学原理,通常包括以下几种: 1. **互补色搭配**:选择色轮上相对的两种颜色,如红与绿、蓝与橙,形成鲜明对比。 2. **类似色搭配**:选择色轮上相邻的几种颜色,如红、橙、黄,创造出https://graph.bigbigwork.com/explorer/pb232ad4614ef6ea67e8abac08bfadf15c1ea5ec1f7933255cec025f4f9357514
12.人工智能配色系列类似色配色:使用色轮中彼此相邻的三种色彩来作为配色方案。 互补色配色:使用色轮上相对位置的两种色彩来进行搭配。 三色配色:使用色轮上互呈120度角度的三种色彩搭配。 由此可见,设计师在配色时,是通过旋转色相环角度的方法找到合适的颜色,并且该旋转角度存在着既定的规律,并可以复用。鉴于此原理,我们可以构建以下的规则...http://www.mysecretrainbow.com/ai/25248.html
13.26种值得借鉴学习的电商登陆页面和个人网站配色方案Paletton不是生成随机方案,而是 让您完全控制您的调色板以及您想使用哪种颜色作为您的基色/原色。您可以选择所需的调色板类型,无论是相邻颜色、三色配色方案还是其他。您可以从色轮中选择任何颜色。 ColorSpace ColorSpace ColorSpace根据您输入的原色生成调色板。它提供了多种样式选项,为您提供更大的灵活性。 https://www.wbolt.com/website-color-schemes.html