人工智能配色系列(二)智能扩充

2,167 阅读7分钟

腾讯DeepOcean原创文章:dopro.io/artificial-…

随着人工智能的高速发展,通过算法学习设计师的设计方法,并由机器自动生成Banner,尤其是电商类Banner,以减少设计师的低创意、重复性的工作,已然成为人工智能时代的大势所趋。而智能配色又是生成Banner中的难点之一。本文承接前文《人工智能配色系列(一)方案与规则》,将进一步探讨通过机器学习完善配色方案的方法,即如何自动学习Dribble等设计网站的配色风格,以扩充配色规则,丰富配色效果。

规则库

1

在前文中,基于LCH 的色彩空间模型构建规则,创立了配色规则库。由设计师创建基础的配色规则,从而应用于最终Banner的颜色替换环节。在实践过程中,请设计师创建了数十条较为通用的配色方案,每条方案均可适用于绝大多数色相的颜色中,以满足Banner的配色需要。然而,如前文所述,互联网中存在着海量的调色盘,如果能利用这些调色盘来自动扩充配色规则库,则可以极大减少对设计师的依赖,丰富规则库,从而提升智能配色的表现效果。

网络色板

2

首先我们观察互联网中的色板,通常由一组图像中提取出的诸多和谐色彩构成。然而我们并不能确定其中各个颜色之间的搭配关系,即主、辅、对比的关系。其中的色彩无法直接使用。

然而,我们可以通过对已有的规则进行分析其中规律,进而使用该规律从上图色板中提取颜色。

规则风格

如前文所述,规则中包含主色、辅助色和对比色,这些是由设计师根据自己的专业美学感知,给这三种关系提供的具体颜色。通过LCH颜色空间进行拆解:主色{l_0,c_0,h_0 }, 辅色{l_1,c_1,h_1 },对比色{l_2,c_2,h_2 }. 形成一种配色规则。在规则使用时,保持亮度L、和饱和度C不变,色相H旋转相同的角度,即可生成相同风格,不同色彩的一组色板。如下图所示,其中,一个长方形和两个小正方行组成的大正方形,为一个色板,分别为主色(MA)、辅色(SU)、对比色(CO)。通过改变H,行形成以下不同颜色但相同风格的色板组。 3

更换为另一个规则,同理可以生成以下色板组:

4

相同的规则,保持了相同的L 与C,故而表现风格一致。如果能够为相同的h关系,提供更多不同的L与C组合,就可以提供更多不同的风格。

色相关系

通过对设计专家提供的数十种具有代表性的基础配色规则,我们进行分析。以确定其主色、辅助色及对比色的h在色轮上的相关关系。通过以H色相环图像化的结果,我们可以看到,确定主色后,辅助色和对比色的H聚敛在了一定的区域内。 5

所以,可以利用这数十种基础配色规则中H的规律,从互联网(如Dribble)的海量色板中,找到与该H规律一致的一组颜色,提取其L与C的值,也就是学习色板中的风格,以扩充规则。

提取颜色

通过以上分析,可以使用如下流程:
  • 输入已有规则。在LCH颜色空间表示为:主色{l_0,c_0,h_0 }, 辅色{l_1,c_1,h_1 },对比色{l_2,c_2,h_2 },L、C、H分别刻画了明度、色彩饱和度、色调。其中色调值h_0、h_1、h_2决定了主色,辅色,对比色的关系和差别。对三个色调值旋转,也就是叠加同一个值,我们生成另一种配色。
  • 输入Dribble图片。https://dribbble.com/是一个设计网站,提供了很多美观的图片, 我们爬取了40000张图片,每张图片颜色成分在8种以内。
  • 获取色带。每张Dribble图片提供了色带,但是色带上成分很小的颜色对图片色彩的搭配影响很小,所以对每个Dribble图片提取3种成分最大的颜色,使用了K-means提取方法。将Dribble图片提取的三种颜色进行6种排列,分别对应主色、辅色、对比色,这一样每张Dribble得到6种排列的色带。
  • 匹配。每个Dribble色带转换到LCH空间,将其中包含的3个H值{h_0,h_1,h_2 }和21种规则进行匹配。具体而言,第i个规则包含3个H值{h_i0,h_i1,h_i2 },计算误差 8将其中最小的误差值入库。
通过上述流程,取匹配误差最小的前2000条数据,也就是Dribble色带和最佳匹配的规则H值相差不到1°。2000条数据是新的规则,蕴含着和之前已有21条规则不同的L、C值组合,并且常用的L、C值组合也被获取。以下为最小误差的计算方法: 6

更进一步

以上数据由Dribble中提取后,可以进一步由设计师进行打分和训练。通过以下步骤:

(a)由专业设计师对此规则打分,得到N条美观的规则入库。

(b) H空间旋转规则,训练。将N条规则的H值依次旋转24°的整数倍,共生成20N条规则,由设计师打分,一共获得M条有效规则。

(c) 规则入库,建立索引,输出配色。将通过的规则入库,作为最后扩充得到的规则。给定输入的主色H值,匹配得到主色最近的10个规则,分别计算误差角度,并由此修正每个规则的辅助色、对比色的角度,输出10种配色,作为后续使用。

(d)配色美学模型的构建与训练。所得到的M条配色规则,每条配色数据包括了主色、辅色、对比色的RGB色值,并且每条配色的可用性由专家进行标注:0为不可用,1为可用。可以认为M条配色数据代表了常用的颜色分布,因此可以用机器学习模型进行训练分类,所得模型也可以很好的实际应用。

机器学习测试

实际操作中,上段中N为2000,M为2600。采用了2300条数据用来训练,300条用来测试,剩余规则用于负样本,按 2600:2300 比例用做训练和测试。使用对应的LCH数值作为特征输入,在特征各个维度上,需要归一化到 -0.5 和 0.5 之间。尝试sklearn库中的多种机器学习算法模型函数,包括logistic regression,support vector machine,fully-connected network,其中fully-connected network在测试集上得到了最好的准确度。所用fully connected network配置如下,分别为units 10的隐层和softmax二分类的输出层。训练时候配置采用sklearn的默认配置。

在测试数据集上,对于可用的Banner集合,可以筛选出其中的67%,对于不可用的Banner集合,本技术可以检测到其中的93%; 因此该步骤输出的可用性的概率数值的高低,可以作为配色美观度的一个衡量标准。

7

以上为生成的配色规则对Banner 背景、前景、文字的配色。

结语

本文阐述了配色规则的扩充,随着对Dribble等网络色板的自动学习,转化了设计师的设计成果,并极大地减少设计师的参与,同时丰富了配色的表现结果。通过对学习后的规则打分训练,并通过深度学习,可以衡量配色的美观程度,以提高设计结果的可用性。人工智能已经以迅雷不及掩耳之势,在方方面面影响着现代生活,通过智能配色,已然体现出了其独特的优势。未来,人工智能提高人类的生产效率,减少人类的工作时长,已经在慢慢实现。让我们满怀信念一起期待。

欢迎关注"腾讯DeepOcean"微信公众号,每周为你推送前端、人工智能、SEO/ASO等领域相关的原创优质技术文章:

看小编搬运这么辛苦,关注一个呗:)