如何创建漂亮的调色板

图片

尽管选择好颜色是一门艺术,但仍有一些技巧可以简化对美丽颜色的选择。 本文由两部分组成:第一部分,我将告诉您什么使调色板变得更好,第二部分中,我将推导可用于选择漂亮调色板的公式。

注意:这不是选择好颜色的唯一方法;而是我自己掌握的一组启发式方法。 希望这可以帮助您找到适合您的网站/应用程序/游戏的颜色。

调色板和对比度


首先我们要说的是颜色不是孤立存在的。 当我们谈论美丽的色彩时,这并不意味着它是亮或暗,饱和或褪色。 当谈论颜色匹配时,我们应该考虑的不是单个颜色,而是颜色集或调色板。


从左到右:超级马里奥奔跑,纪念碑谷,奥拓奥德赛,劳拉·克罗夫特去

当我们考虑各种颜色时,我们应该考虑它们之间的相互作用:它们中的一些是否应该脱颖而出或彼此混合? 这称为对比度。

选择美丽色彩的过程通常归结为为您的设计选择正确的对比度。

花的美感取决于它们在设计中如何相互配合。 但是当涉及到颜色的对比时,它可以通过多种方式形成:

亮度(明/暗)

亮度是一种易于可视化的对比度。 在HSB颜色选择器上,这对应于沿垂直轴的移动:


亮度调节

在一般情况下,我们可以简单地通过增加它们的亮度差异来增加两种颜色之间的对比度。


亮度对比

尽管很容易做到,但是创建高质量的调色板还不够。 颜色仅在黑色和白色的大小上有所不同,根本不像在更大维度上相互作用的颜色那么有趣。 这带我们去...

色调对比

我们从色彩和饱和度的色调方面感知色调对比。 几乎与亮度情况一样,色相或饱和度差异的增加通常会增加颜色之间的对比度。


阴影对比


饱和度(HSB的水平轴)和饱和度对比度

但是即使如此,仅凭这些价值观也无法描绘出全部情况。 尽管色调或饱和度有所不同,我们仍然可以选择仍然具有较差对比度的颜色。


不同的阴影和较差的对比度


不同的饱和度和较差的对比度

这是怎么回事 答案是,不同的阴影具有不同的内部色调值。 许多人(包括我在内)很难想象什么样的色调值可以呈现出不同的色调。 那把我们带到了我最喜欢的把戏...

灰度黑客

如果以灰色阴影显示颜色,则所得灰色的亮度可以很好地指示不同颜色的色调值。 但这不仅有用:在设计时要考虑到残疾人的需求,这一点很重要。 这是一种可视化设计中存在的对比度量的简单方法,而与色相无关。


不同色调的内部色调值

让我们看看这些色调值在HSB颜色选择器中的外观。 还要注意每种色调的频谱中色调值的变化是如何变化的(显示在最右边的列中):


如果我们看一下前面的示例,但是现在使用灰色阴影,那么将更容易说出哪种颜色具有高对比度和低对比度。


饱和度对比度:上方对比度高,下方对比度差。


阴影对比度:上方对比度高,下方对比度差。

让我们再来看一下上面显示的游戏,但是现在是灰度的。


您可以很容易地注意到,前景在背景中表现得很好,交互式元素与非交互式元素形成强烈对比,并且如果游戏是灰度的,它仍然可以玩。 由此得出的最重要结论是:

经常并有目的地使用灰度技巧来可视化设计中存在的对比。

美丽的对比导致创造出美丽的调色板,所以我向您介绍...

选择漂亮调色板的公式


让我们以相反的顺序应用以上分析:从灰度设计开始,然后继续选择合适的颜色。

1:确定需要对比的地方

创建设计框架,然后确定在框架的哪些区域需要更多的对比度,而在哪些区域需要更少的对比度。

2:将设计着色为灰色阴影

尝试仅以灰色阴影为设计框架着色。 使需要更高对比度的区域的亮度差异最大。 必须在设计的最终解决方案中执行此步骤。 小型设计元素(例如徽标和应用程序图标)需要特别高的对比度以突出显示小型元素。

3:选择基本颜色

选择您要使用的基本色调。 这是一个主观步骤,您可以使用ShapeFactory的颜料Adobe Color CC之工具来选择它。 有趣的事实:有些颜色组合非常流行,以至于它们 具有痕迹 地位

4:调整颜色以具有适当的色调值

拾起色相后,找到色调值的间隔,在该间隔处色相大约对应于先前绘制的草图中的灰色调值。 在尝试亮度和饱和度时,请在实色和灰度模式之间切换。 您的任务是要获得一个调色板,该调色板在以阴影显示时与步骤2中的设计匹配。

例子1


(1)框架和(2)首选的灰度对比


(3)选择的基色

如果要进入上面显示的调色板,则必须找到每种颜色的哪些区域大致对应于灰度设计。


对应的基色色调范围

现在我们可以从这些区域的任何部分选择颜色组合:


(4)几种调色板选项

例子2

开发我的Overlink应用程序时,此过程如下所示:


从左到右,从上到下的过程:线框,灰度,基本颜色,最终设计

恭喜你! 我希望这可以帮助您选择在需要的地方可以形成对比的颜色,在不需要的地方可以混合使用的颜色,并且整体看起来很漂亮。

对比度不是创造出色设计的最关键方面,但在选择漂亮的调色板时起着重要作用。

图片

Source: https://habr.com/ru/post/zh-CN441278/


All Articles