CN111915688B

CN111915688B - 主题样式的生成方法、电子设备及介质

Info

Publication number: CN111915688B
Application number: CN202010782362.6A
Authority: CN
Inventors: 蔡文渊; 杨过
Original assignee: Shanghai Hipu Intelligent Information Technology Co ltd
Current assignee: Shanghai Hipu Intelligent Information Technology Co ltd
Priority date: 2020-08-06
Filing date: 2020-08-06
Publication date: 2021-05-28
Anticipated expiration: 2040-08-06
Also published as: CN111915688A

Abstract

本发明涉及一种主题样式的生成方法、电子设备及介质，该方法包括：获取目标主题样式对应的目标基础色；从预先设置的调色板库中调取所述目标基础色对应的目标调色板，其中，所述调色板库中包括至少一个调色板，每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色；基于所述目标调色板生成目标主题样式页面。本发明提高了主题样式生成的效率和准确性。

Description

主题样式的生成方法、电子设备及介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种主题样式的生成方法、电子设备及介质。

背景技术

在搭建网站、开发应用程序(app)等过程中，通常会为对应的用户界面(UserInterface，UI)设置多种主题样式，不同的用户可以根据自己的颜色喜好，选择不同的主题样式。

传统的主题样式的生成技术，通常需要根据目标主题样式的颜色对层叠样式表(Cascading Style Sheets简称CSS)等样式文件的颜色变量进行查找替换，这样使得主题样式生成效率低，且易出错。

发明内容

本发明目的在于，提供一种主题样式的生成方法、电子设备及介质，提高了主题样式生成的效率和准确性。

根据本发明第一方面，提供了一种主题样式的生成方法，包括：

获取目标主题样式对应的目标基础色；

从预先设置的调色板库中调取所述目标基础色对应的目标调色板，其中，所述调色板库中包括至少一个调色板，每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色；

基于所述目标调色板生成目标主题样式页面。

根据本发明第二方面，提供一种电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被设置为用于执行本发明第一方面所述的方法。

根据本发明第三方面，提供一种计算机可读存储介质，所述计算机指令用于执行本发明第一方面所述的方法。

本发明与现有技术相比具有明显的优点和有益效果。借由上述技术方案，本发明提供的一种主题样式的生成方法、电子设备及介质可达到相当的技术进步性及实用性，并具有产业上的广泛利用价值，其至少具有下列优点：

本发明可基于不同的基础颜色对应的调色板生成不同的主题样式，仅需要更改基础颜色，就能够快速生成多种主题样式，可根据目标基础色生成目标主题样式实现换肤等功能，整个过程无需进行CSS等样式文件的颜色变量的查找与替换，提高了主题样式生成的效率和准确性。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图,详细说明如下。

附图说明

图1为本发明一实施例提供的主题样式的生成方法流程图；

图2为本发明一实施例提供的调色板示意图。

具体实施方式

为更进一步阐述本发明为达成预定发明目的所采取的技术手段及功效,以下结合附图及较佳实施例，对依据本发明提出的一种主题样式的生成方法、电子设备及介质的具体实施方式及其功效，详细说明如后。

本发明实施例提供了一种主题样式的生成方法，包括以下步骤：

步骤S1、获取目标主题样式对应的目标基础色；

步骤S2、从预先设置的调色板库中调取所述目标基础色对应的目标调色板；

步骤S3、基于所述目标调色板生成目标主题样式页面。

其中，目标主题样式即需要生成的主题样式，所述调色板库指中包括至少一个调色板，调色板值得是一组颜色，每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色。一个主题样式通常对应一个调色板，呈现一种色系，但可以理解的是，一个主题样式也可对应多个调色板，呈现多种色系，当对应多个调色板时，对应多个目标基础色。

本发明实施例可以使用less/Sass编写样式(其他支持变量的预编译样式均可)，只需要定义基础颜色变量，可再基于Pallete算法计算出其他辅助颜色的色阶。根据不同的基础颜色生成不同的主题样式，仅需要更改基础颜色，即可通过编译生成多种主题样式，根据目标基础色生成目标主题样式实现换肤等功能，整个过程无需进行CSS等样式文件的颜色变量的查找与替换，提高了主题样式生成的效率和准确性。

作为一种实施例，需预先设置的调色板库，供主题样式生成过程中调用，调色板库中可存储一个或多个调色板，生成调色板库的过程可包括：

步骤S11、获取至少一个基础色；

其中，基础色可以选择任意一种颜色。

步骤S12、基于每一所述基础色生成对应的调色板，并存至所述调色板库中。

作为一种示例，步骤S12具体可包括以下步骤：

步骤S121、设置调色板包括M个色号，色号索引值值域为[0，M-1]，颜色从0到M-1逐渐加深，基础色索引号为m,其中，M为正整数，m属于[0，M-1]；

其中，以下以m取值为M/2为实施例进行说明，将基础色设于调色板中间的位置，可以得到比基础色深、以及比基础色浅的辅助色，可以理解的是，m取值为M/2仅为一种示例，根据具体需求取[0，M-1]的其他值亦可。M具体可等于10，这样每一调色板中将对应生成10种颜色。

步骤S122、获取所述基础色对应的HSV参数值,所述HSV参数值包括色相、饱和度和明度；

需要说明的是，获取的原始基础色的参数不限于HSV形式，也可为RGB(红色，绿色，蓝色)、HEX(十六进制)或HSL(色相，饱和度，亮度)等类型的颜色参数，只需转换为对应的HSV参数值即可，具体可采用现有的HSV模型来转换，在此不再赘述。

步骤S123、基于所述基础色对应的HSV参数值、每一辅助色色号的索引值，确定每一辅助色的HSV参数值；

步骤S124、基于所述基础色对应的HSV参数值、色号索引值、以及每一辅助色的HSV参数值生成该基础色对应的调色板。

作为一种示例，步骤S123包括：

步骤S1231、根据公式(1)获取辅助色色相值：

辅助色色相值＝基础色色相值+辅助色索引号-m (1),

设置色相值最大值，若公式(1)中得到的辅助色色相值大于所述色相值最大值，则根据公式(2)获取辅助色色相值：

辅助色色相值＝∣渐变色色相值-色相值最大值∣ (2)；

其中，色相值最大值可设置为360，

步骤S1231中，如果是加深颜色时(索引值大于M/2)，将色相增加使其颜色更亮。当减淡颜色时，将色相减小使其更暗。色相的值域为360，本实施例中，色相值最大值可设置为360，当计算的值大于360时，取其与360差值的绝对值(也就是按照色相的旋转角度继续旋转)。

步骤S1232、根据公式(3)获取辅助色饱和度值：

辅助色饱和度＝(基础色饱和度+辅助色索引号)*饱和度渐变值(3),

设置饱和度最大值和饱和度最小值，若辅助色相对于基础色颜色加深，则根据公式(4)获取饱和度渐变值:

若辅助色相对于基础色颜色减淡，则根据公式(5)获取饱和度渐变值：

若所获取的辅助色饱和度大于饱和度最大值，则辅助色饱和度取最大值,若所获取的辅助色饱和度小于饱和度最小值，则辅助色饱和度取最小值；

其中，由于当饱和度低于5时，生成的颜色极大可能会饱和度偏低，因此，可将饱和度最小值设置为5，最大值设置为100。本实施例中，当辅助色饱和度<5时，辅助色饱和度的值应为5。当辅助色饱和度>100时，辅助色饱和度的值应为100。步骤S1232中，对于加深和减淡也做了不同的处理。当减淡时，递减的值更大，同时限定饱和度的最小值为5，以保证饱和度不会过低。而加深颜色时，由于基础色的色值一般饱和度较高，所以饱和度递增时的值不必过大，以保证了饱和度不会过高。

步骤S1233、设置明度最大值、明度分界值和明度最小值，若辅助色索引值小于m，且基础色明度小于明度最小值，则辅助色明度等于基础色明度，否则，通过公式(6)获取辅助色明度：

辅助色明度值＝基础色明度值+明度渐变值 (6)，

若辅助色索引号小于m，则通过公式(7)获取明度渐变值：

若辅助色索引号大于m，且基础色明度值不大于明度分界值时，则通过公式(8)获取明度渐变值：

若辅助色索引号大于m，且基础色明度值大于明度分界值时，则通过公式(9)获取明度渐变值：

其中，明度最小值可设置为20，当基础色明度本身小于20时，对于辅助色索引号小于M/2的辅助色的明度，直接取基础色明度即可，明度临界值可取40，根据基础色明度与明度临界值的大小关系不同，采用不同的公式计算辅助色明度值，可以使得最终生成的辅助色明度更加自然。

可以理解的是，上述m、M、饱和度最大值设置、饱和度最小值、明度最大值、明度分界值、明度最小值所设置的值仅为一种示例，实际使用中可根据具体需求适应性修改和配置上述参数。

作为一种示例，步骤S124可包括：

步骤S1241、将基础色对应的HSV参数值以及每一辅助色的HSV参数值转换为预设颜色参数值；

其中，所述预设颜色参数可为RGB、HEX或HSL，由于HEX使用更加广泛，因此本发明实施例中，可以将基础色输入的原始参数和预设颜色参数值均设置为HEX。

步骤S1242、基于基础色对应的预设颜色参数值、色号索引值、以及每一辅助色的预设颜色参数值生成该基础色对应的调色板。

如图2所示的一种本发明实施例最后生成的HEX形式的调色板，色板共有10个颜色，色号分别为@H050,@H100，@H200，@H300，@H400，@H100，@H500，@H600，@H700，@H800,@H900。其中：@H500为基础色色号，其余均为辅助色色号，@H050的颜色值为#F2FAFF，@H100的颜色值为#CCE9FF，@H200的颜色值为#A6D7FF,@H300的颜色值为#80C4FF,@H400的颜色值为#59AFFF,@H400的颜色值为#3498FF,@H500的颜色值为#3498FF,@H600的颜色值为#2589F5,@H700的颜色值为#1675E0,@H800的颜色值为#OA5DC2,@H900的颜色值为#004299。

需要说明的是，上述计算出的辅助色和基础色默认按照索引号是颜色由浅到深排序，但如果需要由深到浅或者其他顺序排序，可将色号索引重新排序后输出即可。具体可通过以下步骤实现：步骤S1243、按照预设的色板颜色排布规则，将色号索引值重新排序，并依次输出色号索引值对应的HSV参数值，从而生成该基础色对应的调色板。

最后通过步骤S3，具体可根据目标主题样式的框架结构，从所述目标调色板中选择一个或多个对应的颜色，生成目标主题样式页面。

本发明实施例基于不同基础色生成对应的调色板，通过更改基础色调取对应的调色板，能够快速生成主题样式，且相比现有技术，本发明实施例生成的调色板的颜色过渡更加自然，色板中颜色差异不会过大，从而使得主题样式的颜色显示更加真实，提升了用户体验。

应当理解，本发明实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本发明的范围在此方面不受限制。

本发明实施例还提供一种电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被设置为用于执行本发明实施例所述主题样式的生成的方法。

本发明实施例还提供一种计算机可读存储介质，所述计算机指令用于执行本发明实施例所述主题样式的生成的方法。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明,任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内,当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例,但凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims

1.一种主题样式的生成方法，其特征在于，包括：

获取目标主题样式对应的目标基础色；

基于所述目标调色板生成目标主题样式页面；

所述方法还包括：

获取至少一个基础色；

基于每一所述基础色生成对应的调色板，并存至所述调色板库中；

所述基于每一基础色生成对应的调色板，包括：

设置调色板包括M个色号，色号索引值值域为[0，M-1]，颜色从0到M-1逐渐加深，基础色索引号为m,其中，M为正整数，m属于[0，M-1]；

获取所述基础色对应的HSV参数值,所述HSV参数值包括色相、饱和度和明度；

基于所述基础色对应的HSV参数值、每一辅助色色号的索引值，确定每一辅助色的HSV参数值；

基于所述基础色对应的HSV参数值、色号索引值、以及每一辅助色的HSV参数值生成该基础色对应的调色板；

所述基于所述基础色对应的HSV参数值、每一辅助色色号的索引值，确定每一辅助色的HSV参数值，包括:

根据公式(1)获取辅助色色相值：

辅助色色相值＝基础色色相值+辅助色索引号-m (1),设置色相值最大值，若公式(1)中得到的辅助色色相值大于所述色相值最大值，则根据公式(2)获取辅助色色相值：

辅助色色相值＝∣辅助色色相值-色相值最大值∣ (2)；

根据公式(3)获取辅助色饱和度值：

设置明度最大值、明度分界值和明度最小值，若辅助色索引值小于m，且基础色明度小于明度最小值，则辅助色明度等于基础色明度，否则，通过公式(6)获取辅助色明度：

辅助色明度值＝基础色明度值+明度渐变值 (6)，

若辅助色索引号小于m，则通过公式(7)获取明度渐变值：

2.根据权利要求1所述的方法，其特征在于，

将m设置M/2，饱和度最大值设置为100，饱和度最小值设置为5，明度最大值设置为100，明度分界值设置为40，明度最小值设置为20。

3.根据权利要求1所述的方法，其特征在于，

所述基于所述基础色对应的HSV参数值、色号索引值、以及每一辅助色的HSV参数值生成该基础色对应的调色板，还包括：

将基础色对应的HSV参数值以及每一辅助色的HSV参数值转换为预设颜色参数值；

基于基础色对应的预设颜色参数值、色号索引值、以及每一辅助色的预设颜色参数值生成该基础色对应的调色板。

4.根据权利要求3所述的方法，其特征在于，

所述预设颜色参数为RGB、HEX或HSL。

5.根据权利要求1所述的方法，其特征在于，

所述基于所述基础色对应的HSV参数值、色号索引值、以及每一辅助色的HSV参数值生成该基础色对应的调色板包括：

按照预设的色板颜色排布规则，将色号索引值重新排序，并依次输出色号索引值对应的HSV参数值，从而生成该基础色对应的调色板。

6.一种电子设备，其特征在于，包括：

至少一个处理器；

以及，与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被设置为用于执行前述权利要求1-5任一项所述的方法。

7.一种计算机可读存储介质，其特征在于，存储有计算机可执行指令，所述计算机可执行指令用于执行前述权利要求1-5中任一项所述的方法。