网页设计 » 视觉设计 » 什么是和谐色?如何在设计中运用和谐配色

什么是和谐色?如何在设计中运用和谐配色

发表于: 视觉设计. 评论
Sponsor

前言:前面的文章中我们讲过色彩的基本原理《学懂色彩原理,才能做好配色》,今天我们就进阶一点,学学和谐配色,同学们别小看它,我们在很多的设计中都会见到和谐配色的作品,那么如何在设计中运用和谐色呢?本文将和你一起探讨。

什么是和谐色?

和谐配色指——画面中背景、装饰物的颜色与主体同色相或临近色相,导致整个画面看着很和谐、柔和。

什么是和谐色?如何在设计中运用和谐配色

配色的和谐可以用人之间的关系来理解,什么类型的人相处会和谐。喜好、生活习惯、三观一致的人相处会更和谐,这几方面差距大的人,相处起来冲突会更大。而配色中色彩之间差异性越小,画面越和谐;差异性越大,对比越强烈,画面越活泼。这个差异可从色相的数量,色相的差距,色调的差距三方面来体现。色相越多,色相差距越大,色调饱和度越高,色彩对比越强烈。

一般来说配色和谐最经典的情况是画面中只有一个色相,且色彩饱和度低,为淡色调或素色调。饱和度高,色彩的情绪特征就偏激烈、亢奋了,与和谐配色的柔和感相距甚远。此外色相多了之后,画面会更丰富,色彩对比也会更加强烈,风格就偏热闹了,而不是平静的柔和感。

和谐度比较:

单色、低饱和度的配色—左图
 >
多色(近似色)、低饱和度配色—中图
>   
单色/多色 高饱和度的配色—右图

什么是和谐色?如何在设计中运用和谐配色

ps:单色指画面中有一个色相,多色指画面中有2个及以上色相。近似色指色相在色相环中距离近,颜色相似。

和谐配色,主体一般只有一个色相,色彩和谐度最高,主体如果本身就是对比色配色,背景色彩即使跟主体呼应,和谐度会次之。

主体本身配色从色相角度可分为:

1.单色

2.近似色

3.对比色

从和谐程度:单色>近似色>对比色

学习和谐配色的意义:

1.和谐配色在生活中应用得最广泛,色彩之间的对比程度比较和缓,能被大多数场景、主题所接受。

2.和谐配色是最简单的配色方法,掌握了和谐配色后再次进阶其他复杂的配色,学习更简单。

应用范围:

一般多用于静物拍摄,体现平静、柔和的风格,对于主题性、促销性氛围,单色、近似色的和谐配色达不到要求,促销性视觉需要营造热烈的氛围,用色上存在色相多、饱和度高的特征。与柔和感单色为主的和谐配色不符合。

色相环

接下来的教程中会提到色相环,都指下面这个。红色所占面积大没啥特殊含义哈~就是这边我技术问题分不了16块,才让红色占据2格。

什么是和谐色?如何在设计中运用和谐配色

备注:这个色环里的颜色是以色相条中最中间一点取的色,但实际一个色相不是只有一个具体的色相值的,而是处于一个区间范围,比如下图黄色,我取值时是取箭头所指最中间的位置,但事实上红框框住的范围都属于黄色。

什么是和谐色?如何在设计中运用和谐配色

具体色相条中与色环中相对应的颜色标注在下图中了

什么是和谐色?如何在设计中运用和谐配色

如何在设计中运用和谐配色

然后下文中提到的颜色都以色相名描述,不考虑明度饱和度差异,比如棕色,色相位于色相环橙色位置,我就称为橙色,而不称为棕色。

配色流程:

一.主体为单色

单色指的是单个的有彩色,黑白灰无彩色不包含在内。主体横跨相邻色块也归为单色,比如主体为橙黄、橙色,归为单色。

主体为单色的配色流程:

1.背景采用色相环中与主体相同或相邻1个色块的颜色。比如主体是橙色,背景可采用橙、橙红或橙黄。装饰物选择与主体或背景临近2个色块内的色彩。比如橙色,相邻2个色块是下图。

什么是和谐色?如何在设计中运用和谐配色

为什么背景选择的是相邻1个色块内的颜色,装饰物可以选择相邻2个色块内的颜色?因为大多数情况下背景所占面积比装饰物大,背景与主体颜色越接近,越能营造画面和谐的氛围。

什么是和谐色?如何在设计中运用和谐配色

左图:主体是粉色的加湿器,背景、装饰物都用了同色系粉色。

中图:主体是黄色的精油瓶,具体色相是 橙黄-橙-橙红,背景用了同色橙黄色系,花朵由于本身颜色丰富,跨越了橙色-橙黄-黄-黄绿多个色相区块,符合装饰物配色上可选择与主体色相邻2个色块内的颜色。

右图 :主体是淡黄色的雪糕(色相为橙色),里面的黑糖是咖啡色(色相为橙红),虽然雪糕与黑糖在色相上不完全相同,一个是橙色,一个是橙红色,但两者属于相邻色块,相似度很高,而且这边由于两色饱和度都降低了,差距更小,和谐度高,可以看成是一个颜色。背景用了相同的色相橙色,画面和谐度高。

什么是和谐色?如何在设计中运用和谐配色

左图 :主体是中间的香水瓶,白金配色,像白色、灰色、黑色、透明色(玻璃材质)、银色(镜面、不锈钢材质)之类的颜色存在感很弱,在与有彩色搭配时,轻易沦为辅助色。所以这边瓶身上的金色是明显的主色。

这边瓶子的金色处于橙色、橙黄色相区块,背景用了橙黄色,背景的阴影处为橙色。花朵为白色,叶子处于黄色、黄绿这2个色相色块。整体配色从橙色-橙黄-黄-黄绿,过渡缓和,色彩和谐。

右图 :主体是图中的模特,模特的发色、妆容、饰品是橙红色相区块,背景、道具葡萄也用了橙红色。

二.主体为近似色(一般是2种色相,也可能是更多)

近似色:指色相环中相邻2个色块内的颜色,或同色调颜色,比如同为淡色调。前者指色相相似,后者指色调相同。

主体为多色(近似色)的配色流程:

从主体中选择一个颜色或其相邻1个色块的颜色作为背景色使用,装饰物颜色从主体中选择即可。

什么是和谐色?如何在设计中运用和谐配色

左图:主体是中间的3个瓶子,色彩是浅黄、浅紫、浅粉,虽然三者色相不同,但色调相同,都是浅色调,色彩之间相似度高。背景、装饰物都选用了中间瓶子的颜色,紫色,画面很和谐。

中图:主体是画面中间的瓶子(色相为橙黄+橙红),背景(色相为橙黄)。此处主体为两色近似色配色,背景选择了其中一色作为主色大面积使用。

右图:这张主体是多个腮红盘,整体配色为——淡色调的橙红+橙黄(盒子上小雏菊花蕊的颜色)。背景是淡色调的橙色,装饰物桃子是橙红,雏菊是橙黄。背景和装饰物选用了主体产品上的两色作为延伸。

三.主体为对比色

对比色官方定义是色相环中相距120°-180°的色彩。我为了方便理解,直接简化为冷暖对比,红橙黄的对比色为绿青蓝紫。

红——绿 青 蓝 紫

橙——绿 青 蓝 紫

黄——青 蓝 紫(绿色与黄色距离近,相似度高,不算对比色)

主体为对比色的配色流程:

  • 1、背景采用主体中的两色,可作渐变融合处理;
  • 2、从主体中选择一个颜色作为背景色使用,装饰物颜色从主体中选择即可。

什么是和谐色?如何在设计中运用和谐配色

左图 中图,背景采用了主体中2色(对比色)。

图3,主体是瓶子,红蓝对比,背景采用了主体中的蓝色。

实操练习

将左图的摄影作品 改为 右边简单的色块图

什么是和谐色?如何在设计中运用和谐配色

该场景图中主体是中间的两瓶香薰,仅盖子处有颜色(色相为橙色),所以主体是单色配色。遵循上述和谐配色—主体为单色的配色流程,背景色可从橙、橙黄、橙红3个色相中选择,装饰物可从橙、橙黄、黄、橙红、红5个色相块中选择。

什么是和谐色?如何在设计中运用和谐配色

以下是根据和谐配色的原则,得出的几种配色结果,根据主色、装饰物的色相差距,饱和度的变化,这边的配色是有很多种可能性的。大家可以下载这张图psd,自行练习(底部有百度云下载链接)。

什么是和谐色?如何在设计中运用和谐配色

左图:主色为橙色色相(饱和度稍高一些)

右图:主色为橙黄色相

什么是和谐色?如何在设计中运用和谐配色

左图:主色为偏橙的橙红

右图:主色为偏红的橙红

ps:这张图由于主体产品色所占面积小,装饰物为了与主体颜色相似,增加和谐程度,所以大都选了与主体相同的橙色色相,而没有选择颜色差距稍大的色相。

以上配色方法不绝对,只是针对最典型的和谐配色情况,根据画面活泼程度,背景、装饰物的配色上可以选择与主体色更加偏远的色块。

↓ 本文的练习素材psd ↓
扫码,关注后台发送「7946」即可

作者 | 锦幄初温
来源 | 锦幄初温讲色彩

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }