优秀配色方案的探索过程

[国外设计第133期]

苏黎世机场内部宽幅全景,自动扶梯通向登机口,青蓝色玻璃幕墙与暖色灯带形成冷暖对比,作为配色方案的灵感来源照片

选择配色方案往往是个难题,尽管网上有各种各样的色彩库,配色仍然至关重要,有时候最好还是亲自动手。而且这个过程也非常有意思。

为这类工作找到一套标准流程是不可能的,因为它天然具有创造性。我使用Sketch来进行这项工作,你当然也可以用Illustrator甚至Keynote和PPT来做。

提醒:品牌建设包含的远不止选择颜色和字体,如果你想要给自己的公司寻找一套配色,我还是建议你雇佣专业的品牌设计公司。

我接下来会重现我选定配色方案的过程,我需要把它用在一些演示当中。一切开始于这张照片,Zurich机场,由Erez Attias拍摄。在Unsplash上你可以找到许多更加漂亮(并且版权免费)的照片。

苏黎世机场E62-67登机口区域,自动扶梯居中对称构图,青蓝色调玻璃窗与混凝土墙面呈现冷峻工业风格,配色提取的原始素材

瑞士Zürich-Flughafen的Zurich机场

首先要做的是从图片中选取一些颜色。目前,我只会选出4种颜色:一种强调色彩、一种浅色、一种深色、还有一种其他颜色。我们之后可以随时回来查看这张图片。

Sketch取色器从机场照片中提取颜色#CEBEBF,下方展示四种基础配色色块:青绿色、米白色、灰褐色和深墨绿色,构成初始配色方案

初始配色,从图片中选出的样本。

有了4种基础色彩,可以开始做一些色彩上的探索了。尽管我不是这方面专家,但我有色彩理论的基本知识,我以此来引导我的决策。

探索色调和饱和度

使用Sketch的调色盘,我们可以减淡或加深每一种色彩。既然有浅色和深色,我们就得稍微调节一下饱和度和明度。通常情况,调节色调时最好保持饱和度与明度近似,反之亦然。

Sketch调色板饱和度探索,三行四列色块分别展示高饱和度、原始饱和度和低饱和度下的青绿、米白、灰褐、深墨绿四种基础色变化

Sketch色相偏移实验,三行四列色块展示高色相、原始色相和低色相下的颜色变化,青绿色分别偏移为紫色和橄榄绿,探索配色方案的色相可能性

Sketch应用内置颜色选择器界面,显示十六进制色值65C0C3的青绿色,HSB参数为H:2-10、S:48、B:76,用于精确调节配色方案中的色调

通过其他工具探索

我们可以使用像Paletton这样的在线工具帮助我们发现新的色彩。在本例中,我用了两种不同工具来计算互补色和三色系。

互补色与三色系配色工具生成的颜色方案,左侧展示原始配色与Triad 1、Triad 2三色系变体,右侧为调整后的版本,底部展示互补色方案,用于扩展配色选择

最后,还可以尝试在配色上叠加40%透明度的白色和黑色。

在原始四色配色上叠加40%白色和40%黑色的效果对比,三行色块分别展示白色叠加后的浅色调、原始颜色和黑色叠加后的深色调,探索明度变化对配色方案的影响

尝试各种叠加

我最后尝试的一件事情,来自Marko Vuletič的绝佳提议。建议你直接看看:

《快速创建配色方案的秘诀》

选择强调色时,我们可以尝试之前生成的某些更亮的颜色。

配色方案探索全景图,左侧展示以黄色作为强调色的选择过程,右侧汇总Hue色相、Grayscale Overlay灰度叠加、Triadic三色系、Saturation饱和度、Compl互补色等所有探索生成的色板变体

这整个过程帮助我们生成了相当多不同的颜色。如果我把最初的配色去掉,它们就是这些:

所有探索过程生成的色彩样品汇总,左上角为苏黎世机场原始照片和四色基础配色,下方大网格展示色相、饱和度、三色系、互补色、灰度叠加等所有方法产生的大量颜色变体

最后得到的色彩样品

哎呀,这颜色太多了 😧

一点没错,这颜色确实太多了。我发现通常最好保持4到5个主要色彩,其中有一个应当作为强调色。还可以有一系列的辅助色来支撑,比如用来表达某些含义(红色代表错误等等),将不同部分或者概念分组,(比如用在我的演示中),或者用于代码语法高亮。

现在我们已经有了这一大堆演示,该花些时间相互搭配,尝试看哪些可以凑成对、可以用在哪里。在这里我给不出什么建议,你只能相信自己的内心,还要考虑这些色彩能否很好描绘你的气质和身份。

配色方案打磨过程,色块以类似俄罗斯方块的方式错落排列,展示从大量候选颜色中筛选、搭配和组合最终配色的决策过程

打磨配色(这不是在玩俄罗斯方块)

纠结一阵子后,得到最终的配色方案:

最终确定的配色方案,包含Primary主色Teal青绿、Bright Teal亮青绿、White白、Cream奶油白、Grey灰、Black黑,以及Secondary辅色Tomato番茄红、Lime青柠绿、Yellow黄、Pink粉、Purple紫、Dark Teal深青绿等共14种颜色

**更新:**自从把本文的草稿发给一些朋友看,就有人指出我的主要配色和Deliveroo几乎一样。这当然不是故意的,不过我忍不住想,是不是我的潜意识已经被伦敦遍地都是的Deliveroo品牌形象影响了。


原文链接:https://medium.com/@dannysmith/finding-a-good-colour-palette-through-exploration-b90abde88a1c#.j7e0r5lit

作者信息: Danny Smith Teacher. Engineer. People Geek. Blues Musician. Rubyist. Used to design things, now I teach others how to build them better.