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

技术编号:26305730 阅读:19 留言:0更新日期:2020-11-10 20:03
本发明专利技术涉及一种主题样式的生成方法、电子设备及介质,该方法包括:获取目标主题样式对应的目标基础色;从预先设置的调色板库中调取所述目标基础色对应的目标调色板,其中,所述调色板库中包括至少一个调色板,每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色;基于所述目标调色板生成目标主题样式页面。本发明专利技术提高了主题样式生成的效率和准确性。

【技术实现步骤摘要】
主题样式的生成方法、电子设备及介质
本专利技术涉及互联网
,尤其涉及一种主题样式的生成方法、电子设备及介质。
技术介绍
在搭建网站、开发应用程序(app)等过程中,通常会为对应的用户界面(UserInterface,UI)设置多种主题样式,不同的用户可以根据自己的颜色喜好,选择不同的主题样式。传统的主题样式的生成技术,通常需要根据目标主题样式的颜色对层叠样式表(CascadingStyleSheets简称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时,辅助色饱和度的值应为10本文档来自技高网...

【技术保护点】
1.一种主题样式的生成方法,其特征在于,包括:/n获取目标主题样式对应的目标基础色;/n从预先设置的调色板库中调取所述目标基础色对应的目标调色板,其中,所述调色板库中包括至少一个调色板,每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色;/n基于所述目标调色板生成目标主题样式页面。/n

【技术特征摘要】
1.一种主题样式的生成方法,其特征在于,包括:
获取目标主题样式对应的目标基础色;
从预先设置的调色板库中调取所述目标基础色对应的目标调色板,其中,所述调色板库中包括至少一个调色板,每一所述调色板包括一个基础色和基于该基础色生成的多个与该基础色同色系的辅助色;
基于所述目标调色板生成目标主题样式页面。


2.根据权利要求1所述的方法,其特征在于,
还包括:
获取至少一个基础色;
基于每一所述基础色生成对应的调色板,并存至所述调色板库中。


3.根据权利要求2所述的方法,其特征在于,
所述基于每一基础色生成对应的调色板,包括:
设置调色板包括M个色号,色号索引值值域为[0,M-1],颜色从0到M-1逐渐加深,基础色索引号为m,其中,M为正整数,m属于[0,M-1];
获取所述基础色对应的HSV参数值,所述HSV参数值包括色相、饱和度和明度;
基于所述基础色对应的HSV参数值、每一辅助色色号的索引值,确定每一辅助色的HSV参数值;
基于所述基础色对应的HSV参数值、色号索引值、以及每一辅助色的HSV参数值生成该基础色对应的调色板。


4.根据权利要求3所述的方法,其特征在于,
所述基于所述基础色对应的HSV参数值、每一辅助色色号的索引值,确定每一辅助色的HSV参数值,包括:
根据公式(1)获取辅助色色相值:
辅助色色相值=基础色色相值+辅助色索引号-m(1),
设置色相值最大值,若公式(1)中得到的辅助色色相值大于所述色相值最大值,则根据公式(2)获取辅助色色相值:
辅助色色相值=∣渐变色色相值-色相值最大值∣(2);
根据公式(3)获取辅助色饱和度值:
辅助色饱和度=(基础色饱和度+辅助色索引号)*饱和度渐变值(3),
设置饱和度最大值和饱和度最小值,若辅助色相对于基础色颜色加深,则根据公式(4)获取饱和度渐变值:



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



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

【专利技术属性】
技术研发人员:蔡文渊杨过
申请(专利权)人:上海宏路数据技术股份有限公司
类型:发明
国别省市:上海;31

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1