页面配色的方法、装置、存储介质和芯片制造方法及图纸

本申请提供了一种页面配色的方法，该方法包括：获取第一页面中的第一图像的颜色信息，该颜色信息包括所述第一图像包括的颜色的占比；根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，该目标页面元素包括以下至少一项：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。根据本申请提供的页面配色的方法，通过第一图像中的颜色信息，可以实现第二页面的目标页面元素的自动配色，提高了页面配色的效率，简化了页面设计的过程，且使得配色后的整个页面前后景明确区分，文字可读性强，页面和谐美观。

Methods, devices, storage media and chips of page color matching

【技术实现步骤摘要】
页面配色的方法、装置、存储介质和芯片
本申请涉及多媒体领域，并且更具体地，涉及一种页面配色的方法、装置、存储介质和芯片。
技术介绍
随着智能终端设备的大范围普及，页面设计应用广泛，例如，超文本标记语言(hypertextmarkedlanguage,HTML)页面的设计。在设计该页面时，设计人员通常会事先对该页面进行排版，配色等，每一个页面的组成部分的色彩均需要进行单独设计，因此，在设计页面时会耗费大量的时间、效率较低。因此，亟需一种页面自动配色的方法。
技术实现思路
本申请提供一种页面配色方法、装置、存储介质和芯片，能够对页面的各个组成元素进行自动配色，提高了页面设计的效率。第一方面，提供了一种页面配色的方法，该方法包括：获取第一页面中的第一图像的颜色信息，该颜色信息包括该第一图像包括的颜色的占比；根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，该目标页面元素包括以下至少一项：页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。上述技术方案根据第一页面中第一图像的颜色信息，能够实现对第二页面的各个组成元素的自动配色，提高了页面设计的效率，简化了页面设计的过程，且使得配色后的整个页面前后景明确区分，文字可读性强，页面和谐美观。可选地，该第一页面和第二页面可以是相同的页面，也可以是不同的页面。结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色；或者选择该第一图像的第一比例处的颜色作为过渡色，从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。该技术方案可使得第二页面的页面全局背景色与第一页面的颜色保持一致，使得第二页面的配色和谐美观。结合第一方面，在第一方面的一些实现方式中，该页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或该页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。该技术方案通过设置全局背景色该LCH空间上的明度值和饱和度值在阈值之内，可保证页面的整体基调统一，避免出现某个颜色过于突出，导致页面配色不和谐的现象。结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时，若该页面全局背景的颜色属于第一色系，则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系，该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系；若该页面全局背景的颜色不属于该第一色系，则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色，并且与页面全局背景的颜色区分开来，使得页面前后景明确，配色和谐。结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时，若该页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为该页面分块背景的颜色，该第三色系是该双主色系中的一个色系，该第四色系是该双主色系中的另一个色系，且该第三色系是该页面全局背景的颜色所属于的色系。该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色，并且与页面全局背景的颜色区分开来，使得页面前后景明确，配色和谐。结合第一方面，在第一方面的一些实现方式中，其特征在于，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时，选择第五色系中的至少一个颜色作为该页面分块背景的颜色，其中，该第五色系的在该第一图像中的占比小于第六色系，该第六色系是该页面全局背景的颜色所属于的色系，且，该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。该技术方案根据将取色结果中占比较大的颜色作为页面分块背景色，并且与页面全局背景色区分开来，使得页面前后景明确，配色和谐。结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色，该页面全局背景的颜色为第二颜色，以及该方法还包括：当该第一颜色和该第二颜色为互补色时，根据该第一图像的颜色信息，将该页面分块背景的颜色更新为第三颜色，其中，该第三颜色包括第七色系中的至少一个颜色，该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，该第八色系是该第一颜色所属于的色系，该第九色系是该第二颜色所属于的色系。该技术方案避免了页面全局背景色和页面分块背景色反差太大，引起页面配色不和谐的现象。结合第一方面，在第一方面的一些实现方式中，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择第十色系中的至少一个颜色作为该标题背景的颜色，其中，该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，该第十一色系是该页面全局背景的颜色所属于的色系，该第十二色系是该页面分块背景的颜色所属于的色系。该技术方案中，选择除页面全局背景色和分块背景色之外占比最大的色系作为标题的背景色，使得页面前后景明确区分，配色和谐美观。结合第一方面，在第一方面的一些实现方式中，该方法还包括：当该标题文字有该标题背景时，则将该页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为该标题文字的颜色；或者当该标题文字没有该标题背景时，选择第十三色系中的至少一个颜色作为该标题文字的颜色，其中，该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，该第十四色系是该页面全局背景的颜色所属于的色系，该第十五色系是该页面分块背景的颜色所属于的色系，该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的明度值之间的差值小于第四阈值。该技术方案可实现页面组成部分的标题色的自动配色，使得标题文字可读性达标，配色和谐。结合第一方面，在第一方面的一些实现方式中，其特征在于，根据该第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：选择第十六色系中的至少一个颜色作为该按钮背景的颜色，其中，该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，该第十七色系是该页面全局背景的颜色所属于的色系，该第十八色系是该页面分块背景的颜色所属于的色系；或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组，从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的本文档来自技高网...

【技术保护点】
1.一种页面配色的方法，其特征在于，包括：/n获取第一页面中的第一图像的颜色信息，所述颜色信息包括所述第一图像包括的颜色的占比；/n根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，所述目标页面元素包括以下至少一项：/n页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。/n

【技术特征摘要】
1.一种页面配色的方法，其特征在于，包括：
获取第一页面中的第一图像的颜色信息，所述颜色信息包括所述第一图像包括的颜色的占比；
根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，所述目标页面元素包括以下至少一项：
页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。


2.根据权利要求1所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
选择所述第一图像包括的颜色中的占比最大的颜色作为所述页面全局背景的颜色；或者
选择所述第一图像的第一比例处的颜色作为过渡色，从所述第一图像包括的颜色占比最大的前三个色系中选择与所述过渡色最接近的颜色作为页面全局背景的颜色。


3.根据权利要求1或2所述的方法，其特征在于，所述页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值；和/或
所述页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。


4.根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
当所述第一图像的颜色信息指示所述第一图像的色系配置为绝对主色系时，若所述页面全局背景的颜色属于第一色系，则选择所述第二色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第一色系是所述第一图像包括的颜色所属于的色系中占比最大的色系，所述第二色系是所述第一图像包括的颜色所属于的色系中除所述第一色系以外的色系；
若所述页面全局背景的颜色不属于所述第一色系，则选择所述第一色系中的至少一个颜色作为所述页面分块背景的颜色。


5.根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
当所述第一图像的颜色信息指示所述第一图像的色系配置为双主色系时，
若所述页面全局背景的颜色属于第三色系，则选择第四色系中的至少一个颜色作为所述页面分块背景的颜色，所述第三色系是所述双主色系中的一个色系，所述第四色系是所述双主色系中的另一个色系，且所述第三色系是所述页面全局背景的颜色所属于的色系。


6.根据权利要求1至3中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
当所述第一图像的颜色信息指示所述第一图像的色系配置为无主色系时，
选择第五色系中的至少一个颜色作为所述页面分块背景的颜色，其中，所述第五色系的在所述第一图像中的占比小于第六色系，所述第六色系是所述页面全局背景的颜色所属于的色系，且，所述第五色系是所述第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。


7.根据权利要求1至6中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息确定的所述页面分块背景的颜色为第一颜色，所述页面全局背景的颜色为第二颜色，以及
所述方法还包括：
当所述第一颜色和所述第二颜色为互补色时，根据所述第一图像的颜色信息，将所述页面分块背景的颜色更新为第三颜色，其中，所述第三颜色包括第七色系中的至少一个颜色，所述第七色系属于所述第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系，所述第八色系是所述第一颜色所属于的色系，所述第九色系是所述第二颜色所属于的色系。


8.根据权利要求1至7中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
选择第十色系中的至少一个颜色作为所述标题背景的颜色，其中，所述第十色系是属于所述第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系，所述第十一色系是所述页面全局背景的颜色所属于的色系，所述第十二色系是所述页面分块背景的颜色所属于的色系。


9.根据权利要求1至8中任一项所述的方法，其特征在于，所述方法还包括：
当所述标题文字有所述标题背景时，则将所述页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为所述标题文字的颜色；或者
当所述标题文字没有所述标题背景时，选择第十三色系中的至少一个颜色作为所述标题文字的颜色，其中，所述第十三色系是属于所述第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系，所述第十四色系是所述页面全局背景的颜色所属于的色系，所述第十五色系是所述页面分块背景的颜色所属于的色系，所述标题文字的颜色与所述页面分块背景的颜色在所属LCH空间上的L之间的差值小于第四阈值。


10.根据权利要求1至9中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
选择第十六色系中的至少一个颜色作为所述按钮背景的颜色，其中，所述第十六色系是属于所述第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系，所述第十七色系是所述页面全局背景的颜色所属于的色系，所述第十八色系是所述页面分块背景的颜色所属于的色系；或者
从所述第一图像包括的颜色中选择与所述页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组，从所述颜色组中选择与所述页面分块背景的颜色冷暖属性相反的颜色作为所述按钮背景的颜色。


11.根据权利要求1至10中任一项所述的方法，其特征在于，根据所述第一图像的颜色信息，确定第二页面的目标页面元素的配色，包括：
若所述正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值，则将所述背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为所述正文文字的颜色；
若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值，则将所述背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为所述正文文字的颜色。


12.根据权利要求11所述的方法，其特征在于，所述方法还包括：
计算所述正文文字的颜色与所述正文文字所在背景的颜色的对比度；
当所述正文文字的颜色与所述正文文字所在背景的颜色的对比度小于或等于第十阈值时，调整所述正文文字的颜色。


13.一种页面配色的装置，其特征在于，包括：
获取模块，获取第一页...

【专利技术属性】
技术研发人员：张韵叠，刘爱兵，
申请(专利权)人：北京华为数字技术有限公司，
类型：发明
国别省市：北京;11