配色设计的色彩网络模型

Posted 2021-04-07 创意之代码

配色设计的色彩网络模型

 

刘肖健 李愚

浙江工业大学 工业设计研究院

 

*** 相关软件稍后将在创意之代码发布 ***

基于精选图像的色彩意象进行产品配色是一类常见的色彩设计任务。目前设计师借鉴图像配色的设计过程还比较传统，在效率和效果两方面均有很大的技术介入空间。

这里提出了一个“色彩网络模型”的概念，从源图中提取了更多可用于配色的信息，除了色彩及其比重外，还包括色彩之间的邻接关系。将源图中提取出的信息表达为像素邻接网络（源网）的形式，把待配色的产品方案的各色区表达为色区邻接网络（目标网）。由此，图像提取色的设计重用问题被抽象为两个网络矩阵之间的映射过程，从而方便了数学手段的介入。

1.设计师的配色设计流程

这是一个辅助设计师配色的CAD插件，用于快速、批量化生成配色方案供设计师选择，并提供了两个评估配色方案与源图匹配程度的指标，供设计师选择时比较参考。

设计师配色设计的常规过程可以总结为如下图所示流程，本技术可辅助的环节在图中以粗框标出。

 

▼设计师的配色设计流程

 

色彩的邻接是指两种色彩区域之间有公共边界，在配色设计中是必须考虑的因素。设计师对色彩邻接特性的考虑隐含在选色、赋色、评价和色区调整等环节中。

2.色彩网络模型

色彩网络模型包括源图的像素邻接网络（简称“源网”）和配色目标对象的色区邻接网络（简称“目标网”）两个子网。配色设计过程即在两个网络之间寻找最佳映射方案。网络模型可以表示为等价矩阵形式，使配色设计过程具有良好的数学表达形式，可以方便地引入数学工具来处理各种细节。

 

源网

源网用于描述源图的色彩特征，是对前图中第2环节的辅助。传统的色彩提取结果一般只有提取色及其比重信息，而源图的色彩美感不仅来自于色彩本身，与色彩之间的邻接搭配也有关系。这点在配色辅助技术中常被忽略，这里将色彩之间的邻接信息也从源图中提取出来，并在源网模型中表达。

 

▼源网结构

 

上图右侧为基于源图提取出的源网模型，包含如下两类信息：

1）每个节点（圆点）表示一种提取色，其数量由用户指定。节点色彩代表该提取色的聚类中心，节点尺寸代表该色在源图中所占面积比例大小。节点代表的特征色采用常见的K-Means聚类法提取。

2）节点之间的连线代表两种色彩所包含的像素在源图中毗邻，连线的粗细代表毗邻像素的数量超过一定阈值。连线反映了色彩的邻接信息，因此该网络称为像素邻接网络。两色之间的邻接关系通过计算聚类结果中两色毗邻像素的数量来确定，并基于毗邻像素数确定节点间连接线的粗细。由于图像像素数量众多，为避免连线太多失去意义，算法中设置了一个阈值，毗邻像素数超过该阈值才被判断为有效连接，并在网络模型中生成连接线。

 

目标网

待配色的目标对象是已经划分好色区的产品模型或平面图形，需要赋同色的区域归为一组。这项工作由设计师手工完成，配色过程中不再重新划分色区。由于设计师常通过直接对方案赋色的方式划分色区，作者开发了可以从设计师的配色方案中自动析出色区邻接网络（即目标网）的技术。

 

▼目标网结构

 

目标网中也包含节点和连接两类信息，其含义与源网相同。图案未配色时，目标网的节点只有大小信息，没有色彩信息，表现为空心圆点，如上图右侧图所示。

由于原型系统的配色目标对象为平面矢量图形，因此目标网的产生过程与基于位图的源网略有区别：1）节点的产生不使用聚类方法，而是按色值分组形成色区划分，每个节点代表一个色区；2）连接的计算不是基于像素毗邻，而是基于两个色区之间的公共边界长度。上述两类信息的计算在矢量化CAD软件平台（如CorelDraw）上很容易实现。

3.基于色彩网络的配色设计

色彩重用的目标

图像提取色的重用目标一般有两种：1）综合美感，由设计师对配色方案进行客观评价；2）图像色彩意象的再现，即希望配色方案能够还原源图的色彩意象。后者常用于一些带有特殊目标的配色设计任务，如希望配色方案体现出以源图为代表的某地域文化特色等。

基于综合美感目标的色彩重用设计可以用技术手段辅助，但通常评价权仍掌握在设计师手中，美学指标的计算以隐式方式进行。也有显式的美学指标计算方法，多用于在进化算法中代替设计师执行大量的评价任务，且初期仍需设计师或用户做一定数量的评价，以便程序使用技术手段（如神经网络）为设计师或用户的美学标准建模。

源图色彩意象的再现程度则是一个相对客观的评价目标。完美的色彩意象再现可以理解为两方面的再现：1）色彩本身的再现，即色彩的种类及其比例关系与源网的节点一致；2）邻接关系的再现，即色彩之间的邻接关系与源网的节点连接保持一致。

由于我们已将源图与目标方案的色彩意象分别表达为源网和目标网，因此色彩意象再现的目标则可表达为从源网中搜索可以最佳匹配目标网结构的子网，然后为目标网赋色。

配色设计过程

如前所述，配色设计过程可以归纳为源网和目标网两个网络（或其等价矩阵）之间的映射过程。考虑色彩重用的综合美感和色彩意象再现目标，该映射过程通过色序、邻接和综合美感3个子目标来实施。

（1）色序子目标

源图色彩特征最直接的感官印象即各种色彩的比例关系。配色对象色区是固定的，一般无法完全再现源图的色彩比例，但如能令配色方案中各色对应的色区大小排序与源图一致（如用源图最大比例的色彩对目标图最大色区赋色），也是一种再现源图色彩意象的可行方案。

基于此，将源图的提取色按面积比例大小定义成一个序列，目标方案中的色区按大小定义成另一个序列。

从源网中选择若干色彩对配色方案的各色区依次进行赋色后，会形成一个新的以色彩编号为成员的序列，该序列按照配色对象色区大小顺序排序。

基于上述定义，配色方案与源图色彩系列的吻合程度可以基于上式的逆序数来构建，即具体方案的逆序数与所能达到的最大逆序数的比值。

（2）邻接子目标

邻接子目标用于评估配色方案中各色的邻接关系与源网的吻合程度。这里提出了一个“异连接数”的概念来计算该指标，即考察目标网中色彩之间的连接关系是否与源网一致。异连接有两种情况：1）源网中两色之间有连接而在目标网中对应的两色没有；2）目标网中两色之间有连接而源网中没有。不一致的连接总数即为该配色方案的异连接数。如果一款配色方案的异连接数为零，则认为该目标网为源网的子网。

（3）综合美感子目标

产品配色方案的综合美感与产品型面的空间分布、三维造型关系巨大，且受功能、市场、用户意象等复杂因素的影响，因此交给设计师来评价，通过打分、分级、选择等交互评价方式直接产生指标值。

基于线性假设，可以对3个子目标进行线性融合得到总目标。

4.配色应用案例

原型系统与案例

这里以汽车的配色设计作为案例对上述色彩邻接网络模型的辅助过程进行应用验证。原型系统基于矢量化平面设计软件CorelDraw开发。作者早期的研究基于Solidworks平台实现了三维参数化产品模型的配色设计与优化，但是由于汽车造型复杂、参数众多，渲染生成批量化配色方案种群非常耗时，不利于IGA等智能算法快速迭代。因此这里的做法是选择合适的角度渲染汽车的3D模型，然后在渲染图基础上对方案进行矢量化处理，包括色彩分区以及并在平涂色区之上覆以透明遮罩图层来模拟光影效果。如此，色彩方案的表达效果已非常接近三维渲染，可以产生可靠的交互评价。3D模型色区的邻接关系与平面渲染图有一定差别，因此渲染角度需要精心选择，或给出几个不同角度的渲染图。

 

▼汽车配色设计对象的制作过程

 

配色对象由底层、中层和上层组合而成。底层为背景层，由汽车各色区未上色的3D模型渲染得到，其中也包括背景、车窗、车轮等不需要配色的部位的原始色彩或材质贴图；中层为分好的色区，是忽略明暗色调的平涂色块，不需要配色的区域设置为透明，使背景层露出；上层是为中层增添明暗效果的透明光影遮罩。三者叠加组合在一起形成配色对象，其中配色操作只针对中层执行。

 

▼汽车配色对象

 

上图左侧为配色对象的3个图层，右上为其组合效果，右下为3D模型的渲染效果（P图水平还有待提高）。

色彩网络模型的应用过程

 

▼色彩邻接网络模型的应用流程

 

配色过程分为色彩定型阶段和细部调整阶段两个阶段。色彩定型阶段主要用于从源图中提取色彩为目标方案的各色区赋色，需要解决的问题是提取色彩的选取及其与色区的匹配。

细部调整是对各色区的色值进行微调，可以使用传统优化方法来搞定。本技术重点针对色彩定型阶段，该阶段的两个关键步骤是方案种群生成和色区调整。

配色设计结果

 

▼配色对象及其色区邻接网络（色彩仅用于划分色区）

 

 

基于前述配色方法，很容易计算出总共有1260种不同的配色方案。考虑到人工评价的低效性，仍有必要进行程序优化。下图为程序自动生成配色方案种群，共20款方案。

 

▼配色方案种群

 

▼配色方案的评价目标

 

序号	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20
逆序数	3	3	2	3	0	1	3	3	2	0	2	0	1	1	1	2	1	2	0	3
异连接数	1	2	1	0	2	1	3	2	3	1	1	2	0	3	1	2	0	0	1	1

 

由图和表可以看出，第10款方案和第19款方案总分最高，这两款方案的人工子目标G₃得分中等偏上，但逆序数和异连接数均低（即子目标G₁、G₂为高分），表明3个子目标具有较好的一致性。

为了评估色序（G₁）和邻接（G₂）两个程序计算的评价指标与人工评价指标G₃的相关性，将二者的组合值与人工综合评价G₃之间分布关系做了线性拟合，结果如下图所示。

 

 

可以看到，两者大致呈正向线性关系，表明机器评价对人工评价有一定的预测能力，但也只是“一定”而已。该结论尚需经过大量重复实验的论证。

在实际配色设计的应用中，可从自动生成配色方案种群中选择一款较满意的方案，使用常规进化算法（如交互是遗传算法）做进一步优化，对色彩值进行微调。

5.结论

这项研究对色彩的提取、表达以及在产品配色过程中的使用给予了诸多细节上的关注，这些细节通常在设计师的脑中以隐性方式完成。这里技术的使用效果不一定会超过优秀设计师，却可以使平庸设计师的作品质量提高很，降低了配色设计效果对设计师个人才能的依赖程度，令优秀设计师的经验技能变成了可剥离并外化的智力资产。这是这项技术的主要贡献，它同时还提高了配色设计的效率，可以完成配色方案的批量化生成。

仍有若干有价值的研究需要开展，包括：

1）源图可能不是一幅，而是一个图库，面向多图的综合色彩意象提取和构建色彩网络的方式与单幅图片有很大区别。

2）源图色彩像素在空间位置上的分布特征（分散还是集中）也是影响色彩感性意象的重要因素，色彩网络模型暂未考虑这一点，但是已在后续工作中做了补充。

3）本文把逆序数、异连接数和综合美感当做3个独立的目标来处理，而实际上前两者和第三者之间有可能存在某种影响关系。

4）对源网和目标网中的连接强度未做量化考虑，仅标注为“有”或“无”，而增加量化考虑则有可能提高配色方案质量的预测精度，从而进一步减少对人工评价的依赖。

5）仅逆序数尚不足以表明所选取色彩对源图意象的体现，色彩在源网中的位置也是一个重要因素，如本文案例中占比最大的前4色均为偏冷的灰黑色调，在其中取3种进行配色并不能体现源图的色彩意象。因此，所取色彩与源网节点在色彩空间（如RGB空间）中的分布模式之间需要满足某种关系以最大限度体现源图的色彩意象，如“万绿丛中一点红”之类的色彩意象，显然并非只取色彩占比大者能完成的。

上述研究工作均需要做大量的用户实验，这也是此项工作进一步研究的内容之一。

出于效率的考虑，原型系统在平面设计软件CorelDraw上开发，而实际上基于3D软件实现是完全可行的，作者十年前就已经在Solidworks上把主要相关技术都解决掉了。

对不起，我是色盲！！！

感谢关注创意之代码