小雨点

在我们刚刚开始做设计的时候,每当看到一个感觉很好的配色方案时,都会不经想到:他们究竟是怎么做到的这样的配色的?

 

图片来源于网络

 

为了掌握配色,很多人都会去学习专门的配色教程,或者去看专业的配色书籍。像是是互补色,邻近色,这些名词大家都不会很陌生。可即便是知道这些色彩知识,但当我们实际去运用的时候,却还是会遇到了很多的问题。一个好的配色并不是仅仅只是那些拥有设计天赋的人才能掌握的。通过一些公式化的配色技巧也能让大家在搭配色彩的時候有心中有色、不至于没有头绪无从下手。

今天给大家介绍一种同类色中配色的方法,你只需要简单的增加、减少,色相、饱和度、亮度的数值就可以很轻松的掌握它。

 

01. 色彩模式 – 了解 HSB

首先现在的设计师大多都是在屏幕上完成工作的,在刚开始学习设计软件的时候,都知道要设置正确的色彩模式。比如RGB和CMYK:RGB 称之为色光的三原色,而 CMYK 则称为印刷的四原色。

而上面的两种色彩模式都是基于屏幕和印刷的,现在做配色的时候我建议大家选择更贴近人类感官的方式 HSB ( 有时也称作HSV )

HSB 分别表示的是 色相(Hue)饱和度(Saturation)以及亮度(Brightness)大家要好好记住这三个数值。

 

02. 巧用 HSB 数值变换

当你在HSB 模式下进行同类色配色时,首先要必须先确定一个色相(H),接下来就只需要对后两项数值进行加减就能很快完成。

下面我给大家举个例子,比如说下面这个电脑,在确定了紫色的色相值为270,其他的数值在这个值的基础上变化。


来看看具体是哪些数值发生了变化:

从上图可以看到基础色的饱和度是24亮度是96,通过修改后两项数值你可以发现:

同色相加深 = 饱和增加亮度减少
同色相变浅=饱和减小亮度增加

看到这,相信大家对 HSB 的同类色配色有了相应的了解。但是记数值还是觉得太麻烦了,有没有更简单的方式呢?别急我们接下来看。

 

03. 用图层模式快速打造配色方案

图层叠加大家都了解,这里我就不做更多表述了,那怎么把它运用在配色方案里呢?

首先,最简单粗暴的方法就是在确定了一个颜色之后,把它复制出N份。在纯黑和纯白的底上,做不透明度的变化。如图:

相较于 HSB 这个方法,会更直观的让你进行色彩选择。也能快得到效果,你不必纠结,饱和度、亮度该增加多少减去多少。上去就是一顿不透明度调整,快速达到自己想要的效果。

 

04. 总结

配色的方法不止这一种,每个人都有自己习惯的方式。数值的设置也不用太死板,不同的情况调整的数值也不一样。在本文中只探讨了在固定的色值基础上的颜色变化。

 

原文地址:海盐社

作者:刘清

 

转载请注明:学UI网 » 同类色配色,我是这么做的

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
一篇【看得懂、记得住】的配色教程一篇【看得懂、记得住】的配色教程
让你的配色自带主角光环让你的配色自带主角光环
如何把大师级别的作品转化为自己的能力如何把大师级别的作品转化为自己的能力
HJUX香港设计之旅HJUX香港设计之旅
别再盲目配色了!为你的配色装上GPS!别再盲目配色了!为你的配色装上GPS!
适合秋季的5个版面调色板适合秋季的5个版面调色板
漂亮的专辑封面设计(二)漂亮的专辑封面设计(二)
漂亮的专辑封面设计(一)漂亮的专辑封面设计(一)
渐变质感技法(五):巧用模糊渐变渐变质感技法(五):巧用模糊渐变
「插件」一分钟学会 Material Design 配色插件「插件」一分钟学会 Material Design 配色插件