跳到主要内容

使用Khroma生成无尽的调色板

优秀的使用色彩理论设计是将伟大与平均分开的事情之一。虽然主观和细微差别,但颜色是一种强大的工具,可以定义数字体验的情感和基调。对于一些如此重要的事情,我自己的颜色工作流程严重缺乏。

虽然那里已经有很多很棒的资源,但我发现没有办法快速浏览和比较原来的颜色组合,这些组合可以随时使用。这就是我打算通过构建解决的问题Khroma

选择颜色,任何颜色

The Khroma training screen with the chosen colour bar up top

Khroma训练屏幕,顶部选择了颜色条

关于Khroma的一个令人兴奋的事情是,你可以训练一个AI算法,就像你的色彩设计师大脑的延伸。挑战在于,为了做到这一点,你必须选择你喜欢的50种颜色。在构建算法时,我尝试用更少的工作,但结果不够好。

Fifty确保发电机具有适当的变化范围,并且足够灵活,可以帮助您完成所有设计。培训过程相对来说是非结构化的,可能与科学和艺术同等重要。根据我的经验,一些专业提示应该可以帮助您充分利用它。

值得一提的是这里的算法是如何工作的。你的50种颜色将被用来训练一个能够识别你想要的数十万种其他类似颜色的神经网络(我们称之为你的颜色亲和力)。它知道你不喜欢哪种颜色,因为它不是你选择的原始颜色。这意味着如果你不选择深棕色,你将看不到它。如果你不是一个黑褐色的粉丝,那就没关系,但如果你错过了你真正喜欢的东西,那就不行了。这就是让品种变得如此重要的原因。

要开始训练您的Khroma生成器,请转到khroma.co并单击个性化。你会看到一些指令和无限滚动的颜色块墙。单击其中一个块将其添加到您选择的颜色栏,另一个将删除它。最好的方法是滚动浏览并选择任何颜色作为您可能想要在设计中使用的东西跳出来。这适用于前30种颜色。

时间精炼

此时,您将要查看所选的颜色条,看看它是如何形成的。如果这是Sketch中的文档颜色,您是否拥有所需的一切?接下来的20种颜色应该是关于细化。当你继续进行一个小工具提示会弹出一些建议,例如'选择更多品红色,黄色和浅色会改善你的结果'。我建议尽量坚持这些,但不要害怕继续挑选新的颜色。从这里你应该选择10个,总数达到40个。

再看看吧。你看到的颜色几乎相同吗?因为你喜欢它们,所以不止一次选择相同的颜色并不罕见。但这对您的算法没有用。

我有一个朋友尝试早期原型,他告诉我他的结果不是很好。 “它主要只是蓝色,”他说。 “你在训练中选择了大部分蓝色吗?”我回答。 “是的。我真的很喜欢蓝色。”

最好的结果将来自于找到最广泛的色彩亲和力。您将鼠标悬停在顶部栏中的重复颜色上,您可以单击将其删除。这将释放您尚未选择的颜色的插槽。对任何重复进行修剪并继续填充新颜色,直到剩下五个选择。

折腾一些通配符

我发现在我的最后五个选秀权中输入一些通配符是有益的。这些是我认为我不会单独使用的颜色。我常常对Khroma对他们的看法感到惊喜。当与其他颜色相邻时,它们似乎完全符合我无法想象的方式。

当您选择通配符时,您会在右上角看到一个“火车”按钮。从这一点开始,你可以继续选择颜色,但是如果你选择的颜色看起来像是一个很好的黑色到浅色的调色板,你可能会开始训练。

训练大约需要三分钟。您可以期望准确度达到90分。这基本上代表了算法识别颜色的程度。如果你想尝试一些调整,你可以稍后返回并编辑你的训练颜色。

建立你的收藏

当训练过程结束时,您将被投入发电机。您将在类型模板中看到无限滚动的颜色组合网格。每个组合都有一个信息面板,您可以打开它以查看名称,十六进制和RGB值等详细信息,以及WCAG可访问性比率。通过右上方的心形图标,您可以开始构建收藏夹的集合。

找到合适的组合

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar

使用#8BD2CA和#32514E进行调色板搜索。如果您没有看到任何您喜欢的内容,请尝试重新排列搜索栏中的颜色

搜索是Khroma最强大的功能之一。我经常会对我正在寻找的东西有一个松散的想法,或者我已经在使用某种颜色,并希望找到补充。由于Khroma允许您在亲和范围内访问数十万种RGB颜色,因此能够筛选它们似乎很重要。

您可以搜索不同的参数:类型,色调,名称,十六进制和RGB。类型包括深色,浅色,淡色,浅色,深色,柔和,丰富,明亮和霓虹灯。色调为暖色,冷色,红色,橙色,黄色,绿色,青色,蓝色,紫色,紫色和洋红色。您可以使用“皇家蓝”和“咖啡”等名称搜索1,566种特定颜色。最后,它接受Hex和RGB值。

由于Khroma使用两种颜色组合,除了调色板外,还有两个用于搜索查询的插槽。如果您在搜索栏中输入一个术语并进行搜索,您将获得与该术语匹配的第一个颜色槽的结果,第二个将是随机的。

例如,如果您搜索“明亮”,您将获得高饱和度颜色和随机配对。如果您搜索“明亮和蓝色”,您将在第二个插槽中获得那些鲜艳的颜色和随机的蓝色。您还可以将类型和色调术语链接在一起,例如“亮蓝色”和“淡黄色”。

The details of each pair of colours. Everything can be copied with just a click for quick usage 

每对颜色的细节。只需点击一下即可复制所有内容,以便快速使用

搜索特别有用的一个重要用例是,当您有两种颜色时,您希望找到它们的补充。您只需输入那些确切的颜色(#8BD2CA和#32514E说)并在调色板模板下搜索。

有时您会搜索不在亲和范围内的颜色或术语。这就是偏见控制发挥作用的地方。您将在工具栏的右上角看到两个单击并拖动字段。偏差表示发生器在匹配颜色方面对您选择的50的严格程度。

每种颜色的Khroma都会生成贯穿算法的运行,并获得一个百分比(它相信您喜欢颜色的可能性)。如果该百分比低于偏差,它将被抛弃并重复该过程。

在超出范围的搜索查询的情况下,偏差自动降低,直到它可以通过阈值测试。如果它完全超出你的范围(比如我们之前的深褐色),那么它会自动将它变为0.这样,你在Khroma中获得的每种颜色都默认为你的亲和力但是能够调整,所以你不仅限制了那些颜色。

自定义图像

The five templates of Khroma – you can see the palette adding a couple more colours to the mix

Khroma的五个模板 - 您可以看到调色板为混合添加了更多颜色

您可以在“设置”图标的右上角找到一些方便的选项。其中之一是能够将自定义图像上传到图像模板。您不需要事先对图像做任何事情;只是确保它的大小合适。

虽然你可以继续使用自己的爆头(我不会判断),但最好将它视为制作自己模板的能力。在Sketch或您选择的设计工具中截取您正在使用的内容的屏幕截图,上传它,并开始浏览无限组合!

我希望您尝试一下Khroma,并发现它是您的设计工具包的有用且强大的补充。

本文最初发表于303期,这是全球最畅销的网页设计师和开发者杂志。买问题303要么订阅这里

相关文章:



翻译字数超限