AMO全媒体运营
首页 知识星球 浅谈色彩学:同一色系中的变化

浅谈色彩学:同一色系中的变化

色彩的世界多采多姿,不同的色彩计画常常左右了产品最终给人的感觉,而色彩并不会单独存在,良好的色彩搭配常常可以让你的色彩计画更加吸引人的目光。在《浅谈色彩学:对比色配色》中我们曾提到…

色彩的世界多采多姿,不同的色彩计画常常左右了产品最终给人的感觉,而色彩并不会单独存在,良好的色彩搭配常常可以让你的色彩计画更加吸引人的目光。在《浅谈色彩学:对比色配色》中我们曾提到色彩比例分配的原则,透过一些公式化的配色技巧让大家在搭配色彩的时候有所依据而发展、不致于手足无措不知该从何开始。

以70%底色、25%主色与5%强调色的配色原则为例,由于底色与主色都是属于同一个色相的色彩(黄色系),因此以这个例子而言,其实是使用了两个色彩的配色方案:

color_01

在一般情况下,一个版面中使用的色彩建议不要超过三个色彩。这边所指的三种色彩通常是指「色相」上的不同。米黄色与铭黄色在人类的视觉感受上,都认为是温暖的黄色色调,因此并不会主观的认为他们是不同的色彩,而是同一个色系的色彩集。而紫色就很明显不属于黄色色系的一份子,因此在这个配色方案中可以算是一个独立的色彩

然而不管是两个颜色还是三个颜色,很明显都不够用。

设计师在为版面制作细节的时候,常常会需要使用许多同色系的色彩,例如需要利用明暗变化来营造元件立体感的时候:

抑或是同一个按钮在不同的状态下想利用透过些微的色彩变化来给予使用者回馈,例如这边利用加亮以及加暗来模拟「发光」以及「凹陷」的效果,这时候都会需要更多同色系的色彩来辅助:

想要取得这些色彩有许多方式:

1. 使用HSB 选择颜色:

几乎所有的绘图软体都提供了HSB 的选色工具,在大部分的情况下设计师可以轻易的使用HSB 快速取得各种同色系的色彩。HSB 使用三种数值来描述色彩:分别为色相(Hue)、饱和度(Saturation)以及明度,或称亮度(Brightness):

在大部分的情况下,我们仅需调整明度的数值即可得到需要的色彩:

然而色彩有分高明度以及低明度的色彩,像是黄色就是高明度的色彩,因此色彩的明度数值就高达90%,当我们需要比黄色还更亮的色彩时怎么办呢?这时候可以去调整饱和度的数值,让色彩往白色接近一些,以取得更高明度的色彩。当然啦,在显示萤幕上是不存在比白色还要亮的色彩的。

2. 利用绘图软体的透明度以及叠加工具来取得色彩:

比起HSB,这个方法似乎又更科学化了一些,适合设计的一开始就利用这个方法来定好一套色彩规范、方便后续作业、团体分工作业等等。

我们可以利用黑色与白色,透过不同透明度的叠加在原始色彩中,以取得同色系的色彩:

这个效果很接近直接调整饱和度以及明度数值所得到的色彩结果,很快速但是不一定可以取得吸引人的色彩。

绘图软体中提供了色彩混合的叠加模式,我们这边利用「柔光」(soft light)的叠加模式,以相同的方式叠加在原始色彩中,可以得到完全不同的色彩组合,比起透明度的叠加,取得的色彩更舒服、更调合:

当柔光的效果不够强烈的时候,我们另外可以尝试其他不同的叠加方式,例如以下就是使用「重叠」(overlay)的混合模式得到的色彩组合:

当然不同明度的色彩使用各种混合模式亦会得到不同的结果,高明度与低明度的色彩适用的混合方式并不同,建议可以依据自己的原始色彩多方尝试、快速取得最符合自己需要的色彩组合。

方法是死的,这些配色方法都只是透过科学化的方式、帮助我们更快的取得需要的色彩组合来应用,当然设计师们应该按照自己的需求来对色彩做调整。例如黄色系的高明度色彩,其实如果将「色相」做细微幅度的往红色(低明度)偏移,也可以得到降低明度的结果
、却也让人感受到是同一色系的延伸。

网页设计师配色工具集

这里将会介绍一些好用的配色工具,简单容易使用哦!

 

以上内容就是“浅谈色彩学:同一色系中的变化”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多知识星球的相关内容,可以来AdobeEdu设计联盟官方网站获取。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

用视觉冲击力!提升过稿率!

用视觉冲击力!提升过稿率!

▍张力 ①量感。主观加强作品的分量感,强化黑白对比关系、质感的描绘、块面对比的强烈、色彩的饱和等,冲击人们的视觉,使作品...
海报版式编排技巧!

海报版式编排技巧!

生成海报 下载海报
决定未来职业高度的“软技能”,作为设计师该如何培养?

决定未来职业高度的“软技能”,作为设计师该如何培养?

如果你像我一样,关注了许多设计和技术博客,那你一定读过大量诸如:介绍如何做移动端设计,什么是精益设计,如何做到完美适配,...
我们需要用户增长设计师UGD吗?

我们需要用户增长设计师UGD吗?

一位招聘负责人和我抱怨说,他们最近刚发出UI招聘,就收到数量恐怖的求职申请,现在设计师这么难找工作了吗?又叹气说:“数量...

发表回复

返回顶部