CN111191424A - 页面配色的方法、装置、存储介质和芯片 - Google Patents

页面配色的方法、装置、存储介质和芯片 Download PDF

Info

Publication number
CN111191424A
CN111191424A CN201911422117.8A CN201911422117A CN111191424A CN 111191424 A CN111191424 A CN 111191424A CN 201911422117 A CN201911422117 A CN 201911422117A CN 111191424 A CN111191424 A CN 111191424A
Authority
CN
China
Prior art keywords
color
page
background
image
color system
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201911422117.8A
Other languages
English (en)
Other versions
CN111191424B (zh
Inventor
张韵叠
刘爱兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN201911422117.8A priority Critical patent/CN111191424B/zh
Publication of CN111191424A publication Critical patent/CN111191424A/zh
Priority to PCT/CN2020/135179 priority patent/WO2021135887A1/zh
Application granted granted Critical
Publication of CN111191424B publication Critical patent/CN111191424B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/189Automatic justification

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Artificial Intelligence (AREA)
  • Facsimile Image Signal Circuits (AREA)
  • Color Image Communication Systems (AREA)
  • Image Processing (AREA)

Abstract

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

Description

页面配色的方法、装置、存储介质和芯片
技术领域
本申请涉及多媒体领域,并且更具体地,涉及一种页面配色的方法、装置、存储介质和芯片。
背景技术
随着智能终端设备的大范围普及,页面设计应用广泛,例如,超文本标记语言(hypertext marked language,HTML)页面的设计。
在设计该页面时,设计人员通常会事先对该页面进行排版,配色等,每一个页面的组成部分的色彩均需要进行单独设计,因此,在设计页面时会耗费大量的时间、效率较低。
因此,亟需一种页面自动配色的方法。
发明内容
本申请提供一种页面配色方法、装置、存储介质和芯片,能够对页面的各个组成元素进行自动配色,提高了页面设计的效率。
第一方面,提供了一种页面配色的方法,该方法包括:获取第一页面中的第一图像的颜色信息,该颜色信息包括该第一图像包括的颜色的占比;根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,该目标页面元素包括以下至少一项:页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
上述技术方案根据第一页面中第一图像的颜色信息,能够实现对第二页面的各个组成元素的自动配色,提高了页面设计的效率,简化了页面设计的过程,且使得配色后的整个页面前后景明确区分,文字可读性强,页面和谐美观。
可选地,该第一页面和第二页面可以是相同的页面,也可以是不同的页面。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色;或者选择该第一图像的第一比例处的颜色作为过渡色,从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
该技术方案可使得第二页面的页面全局背景色与第一页面的颜色保持一致,使得第二页面的配色和谐美观。
结合第一方面,在第一方面的一些实现方式中,该页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值;和/或该页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
该技术方案通过设置全局背景色该LCH空间上的明度值和饱和度值在阈值之内,可保证页面的整体基调统一,避免出现某个颜色过于突出,导致页面配色不和谐的现象。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时,若该页面全局背景的颜色属于第一色系,则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系,该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系;若该页面全局背景的颜色不属于该第一色系,则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色,并且与页面全局背景的颜色区分开来,使得页面前后景明确,配色和谐。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时,若该页面全局背景的颜色属于第三色系,则选择第四色系中的至少一个颜色作为该页面分块背景的颜色,该第三色系是该双主色系中的一个色系,该第四色系是该双主色系中的另一个色系,且该第三色系是该页面全局背景的颜色所属于的色系。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景的颜色,并且与页面全局背景的颜色区分开来,使得页面前后景明确,配色和谐。
结合第一方面,在第一方面的一些实现方式中,其特征在于,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时,选择第五色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第五色系的在该第一图像中的占比小于第六色系,该第六色系是该页面全局背景的颜色所属于的色系,且,该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
该技术方案根据将取色结果中占比较大的颜色作为页面分块背景色,并且与页面全局背景色区分开来,使得页面前后景明确,配色和谐。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色,该页面全局背景的颜色为第二颜色,以及该方法还包括:当该第一颜色和该第二颜色为互补色时,根据该第一图像的颜色信息,将该页面分块背景的颜色更新为第三颜色,其中,该第三颜色包括第七色系中的至少一个颜色,该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系,该第八色系是该第一颜色所属于的色系,该第九色系是该第二颜色所属于的色系。
该技术方案避免了页面全局背景色和页面分块背景色反差太大,引起页面配色不和谐的现象。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:选择第十色系中的至少一个颜色作为该标题背景的颜色,其中,该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系,该第十一色系是该页面全局背景的颜色所属于的色系,该第十二色系是该页面分块背景的颜色所属于的色系。
该技术方案中,选择除页面全局背景色和分块背景色之外占比最大的色系作为标题的背景色,使得页面前后景明确区分,配色和谐美观。
结合第一方面,在第一方面的一些实现方式中,该方法还包括:当该标题文字有该标题背景时,则将该页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为该标题文字的颜色;或者当该标题文字没有该标题背景时,选择第十三色系中的至少一个颜色作为该标题文字的颜色,其中,该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系,该第十四色系是该页面全局背景的颜色所属于的色系,该第十五色系是该页面分块背景的颜色所属于的色系,该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的明度值之间的差值小于第四阈值。
该技术方案可实现页面组成部分的标题色的自动配色,使得标题文字可读性达标,配色和谐。
结合第一方面,在第一方面的一些实现方式中,其特征在于,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:选择第十六色系中的至少一个颜色作为该按钮背景的颜色,其中,该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系,该第十七色系是该页面全局背景的颜色所属于的色系,该第十八色系是该页面分块背景的颜色所属于的色系;或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组,从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
该技术方案使得按钮背景与页面分块背景反差较大,使得该按钮醒目,容易引起用户的注意。
结合第一方面,在第一方面的一些实现方式中,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:选择按钮背景色所属LCH空间上明度值加上预设值之后的颜色或白色作为按钮文字色。
该技术方案将按钮文字色与按钮背景色区分开来,使得按钮文字满足可读性。
结合第一方面,在第一方面的一些实现方式中,其特征在于,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:若该正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值,则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色;若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值,则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
该技术方案实现页面正文文字部分的自动配色,并将正文文字色与正文所在的背景明确区分,满足文字的可读性。
结合第一方面,在第一方面的一些实现方式中,该方法该包括:计算该正文文字的颜色与该正文文字所在背景的颜色的对比度;当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第七阈值时,调整该正文文字的颜色。
该技术方案通过调整正文文字色与正文所在的背景色之间的对比度满足预设值,使得正文文字色与正文所在的背景明确区分,满足文字的可读性。
第二方面,提供了一种页面配色的装置,该装置包括:获取模块,获取第一页面中的第一图像的颜色信息,该颜色信息包括该第一图像包括的颜色的占比;处理模块,根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,该目标页面元素包括以下至少一项:页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
结合第二方面,在第二方面的一些实现方式中,该处理模块具体用于:选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色;或者选择该第一图像的第一比例处的颜色作为过渡色,从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
结合第二方面,在第二方面的一些实现方式中,该页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值;和/或该页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
结合第二方面,在第二方面的一些实现方式中,该处理模块具体用于:当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时,若该页面全局背景的颜色属于第一色系,则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系,该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系;若该页面全局背景的颜色不是不属于该第一色系,则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
结合第二方面,在第二方面的一些实现方式中,该处理模块具体用于:根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时,若该页面全局背景的颜色属于第三色系,则选择第四色系中的至少一个颜色作为该页面分块背景的颜色,该第三色系是该双主色系中的一个色系,该第四色系是该双主色系中的另一个色系,且该第三色系是该页面全局背景的颜色所属于的色系。
结合第二方面,在第二方面的一些实现方式中,该处理模块具体用于:当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时,选择第五色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第五色系的在该第一图像中的占比小于第六色系,该第六色系是该页面全局背景的颜色所属于的色系,且,该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色,该页面全局背景的颜色为第二颜色,以及该处理模块还用于:当该第一颜色和该第二颜色为互补色时,根据该第一图像的颜色信息,将该页面分块背景的颜色更新为第三颜色,其中,该第三颜色包括第七色系中的至少一个颜色,该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系,该第八色系是该第一颜色所属于的色系,该第九色系是该第二颜色所属于的色系。
结合第二方面,在第二方面的一些实现方式中,该处理模块具体用于:选择第十色系中的至少一个颜色作为该标题背景的颜色,其中,该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系,该第十一色系是该页面全局背景的颜色所属于的色系,该第十二色系是该页面分块背景的颜色所属于的色系。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:当该标题文字有该标题背景时,则将该页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为该标题文字的颜色;或者当该标题文字没有该标题背景时,选择第十三色系中的至少一个颜色作为该标题文字的颜色,其中,该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系,该第十四色系是该页面全局背景的颜色所属于的色系,该第十五色系是该页面分块背景的颜色所属于的色系,该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的明度值值之间的差值小于第四阈值。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:选择第十六色系中的至少一个颜色作为该按钮背景的颜色,其中,该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系,该第十七色系是该页面全局背景的颜色所属于的色系,该第十八色系是该页面分块背景的颜色所属于的色系;或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值H值相距第五阈值的颜色组,从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:选择按钮背景色所属LCH空间上明度值加上预设值之后的颜色或白色作为按钮文字色。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:若该正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值,则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色;若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值,则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
结合第二方面,在第二方面的一些实现方式中,该处理模块还用于:计算该正文文字的颜色与该正文文字所在背景的颜色的对比度;当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第十阈值时,调整该正文文字色。
第三方面,提供一种页面配色的装置,包括:至少一个处理器,当程序指令在该至少一个处理器中执行时,使得该装置执行如第一方面中任一项所述的方法。
第四方面,提供一种计算机可读存储介质,包括计算机程序,当其在计算机设备上运行时,使得所述计算机设备中的处理单元执行如第一方面中任一项所述的方法。
第五方面,提供一种芯片,该芯片包括存储器和处理器,该存储器用于存储计算机指令,该处理器用于执行该存储器中存储的计算机指令,以执行如第一方面中任一项所述的方法。
附图说明
图1是本申请实施例的页面配色的方法的示意性流程图。
图2是本申请实施例的色系划分的示意图。
图3是本申请实施例的划分第一图像包括的色系类型的示意图。
图4是本申请实施例的页面配色的示意图。
图5是本申请实施例的页面配色的又一示意图。
图6是本申请实施例的调整文字色的方法的示意性流程图。
图7是本申请实施例的背景配色的示意性流程图。
图8是本申请实施例的页面配色的装置的示例图。
具体实施方式
下面将结合附图,对本申请中的技术方案进行描述。
本申请的技术方案,可以应用于各种通过屏幕(或者说,显示器)向用户呈现用户界面的设备,例如,智能手机、平板电脑、个人电脑等。为了便于理解和说明,在以下说明中,将上述设备统称“终端设备”。
其中,用户界面(user interface,UI)亦称使用者界面,是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。用户界面包括实现用户与系统信息交换的软件、硬件部分。软件部分包括用户与系统信息交换的约定、操作命令等处理软件,硬件部分包括输入装置和输出装置(包括但不限于显示屏、触摸屏、软键盘、虚拟控件、物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆、摄像头,以及未来技术能够实现的输入输出装置)。用户界面目的在于使得用户能够方便有效率明确地去操作硬件以达成交互,完成所希望借助硬件完成之工作,用户界面定义广泛,凡参与人类与机械的信息交流的领域都存在着用户界面。
在本申请实施例中,用户界面可以包括图形化的用户界面,即图形用户界面(graphic user interface,GUI),是当今世界最常见的一种用户界面,例如手机在通电状态下显示的界面即为图形用户界面,用户通过显示的图形(图标)、虚拟键盘(软键盘)、虚拟鼠标等来与设备硬件进行交互。上述系统和用户之间进行交互和信息交换的信息可以包括听觉信息、视觉信息、触觉信息、动作信息、气味信息等等。用户可以通过用户界面直接与系统进行信息交换,也可以借助包括触控笔,触控手套等在内的设备与系统进行交互。
应理解,以上列举的用户界面仅为本申请的一个实施例,本申请并不限定于此,其他能够通过屏幕等呈现给用户以供用户执行操作的用户界面均落入本申请的保护范围内。
此外,本申请的各个方面或特征可以实现成方法、装置或使用标准编程和/或工程技术的制品。本申请中使用的术语"制品"涵盖可从任何计算机可读器件、载体或介质访问的计算机程序。例如,计算机可读介质可以包括,但不限于:磁存储器件(例如,硬盘、软盘或磁带等),光盘(例如,压缩盘(compact disk,CD)、数字通用盘(digital versatile disk,DVD)等),智能卡和闪存器件(例如,可擦写可编程只读存储器(erasable programmableread-only memory,EPROM)、卡、棒或钥匙驱动器等)。另外,本文描述的各种存储介质可代表用于存储信息的一个或多个设备和/或其它机器可读介质。术语"机器可读介质"可包括但不限于,无线信道和能够存储、包含和/或承载指令和/或数据的各种其它介质。
在介绍本申请实施例之前,首先对本申请所涉及的色彩空间做一定的介绍。
实现颜色的合理匹配是图文设计排版中重要的一部分。由于光线可以被反射、吸收或发射,因此人眼可以感知颜色。颜色的感知是人的主观感受。可以通过色彩空间对图片中的颜色进行描述。色彩空间是描述用一组数值来描述颜色的数学模型。色彩空间也可以称为颜色空间、颜色模型、色彩模型、色彩系统等。通过颜色空间,可以对颜色加以说明。
常见的色彩模型有:红-绿-蓝(red,green,blue,RGB)色彩空间,色相-饱和度-明度(hue,saturation,value,HSV)色彩空间,国际照明委员会(commission internationalede L'Eclairage,CIE)XYZ色彩空间,CIE Lab LCH色彩空间等。
RGB色彩空间还可以用一个三维的立方体来描述。R、G、B分别为笛卡尔坐标系的三个坐标轴,该立方体一个顶点位于坐标原点。该顶点相邻的三条边位于坐标轴上。任何一种色光都可由R、G、B三基色按不同的比例相加、混合而成,当三基色分量都为0(最弱)时,混合色光为黑色;当三基色分量都为最强时,混合色光为白色。
HSV模型中颜色的参数分别是:色相(hue,H),饱和度(saturation,S),明度(value,V)。色相又称色调,是颜色感觉最基本的特征。H取值范围是0°至360°。饱和度是指色彩的鲜艳程度,也称色彩的纯度。S为一比例值,范围从0到1,它表示成所选颜色的纯度和该颜色最大的纯度之间的比率,S取值越大,表示色彩越纯,取值越小,表示色彩越灰。V表示色彩的明亮程度,范围从0到1。V等于0表示圆锥的底部定点,也就是黑色,V等于1表示圆锥的顶面,当V=1并且S=0时表示纯白色。
CIE XYZ色彩空间,又称为CIE 1931色彩空间,是一种与RGB相关的相像的基色系统,但更适用于颜色的计算。图中表示了从波长400纳米(nanometer,nm)(紫色)到700nm(红色)之间的XYZ三基色值,这是一个曲面向原点连线,形成的锥体,而且所有的XYZ刺激值,都落在这个正XYZ象限的椎体内。坐标轴原点,相当于没有光照的黑色。曲线为光谱轨迹,在光谱轨迹上的颜色,代表了该颜色能达到的最大饱和度。
CIE Lab色彩空间是一种基于生理特征的颜色系统。这也就意味着,CIE Lab色彩空间是用数字化的方法来描述人的视觉感应。Lab颜色空间中的用L分量用于表示像素的亮度(light),取值范围是[0,100],表示从纯黑到纯白,亮度也可以称为明度;a表示从红色到绿色的范围,取值范围是[127,-128];b表示从黄色到蓝色的范围,取值范围是[127,-128]。
Lab色彩空间与LCH色彩空间色度图相同,但坐标不同。LCH色彩空间中,L表示明度值;C表示饱和度值及H表示色相角度值。
本申请实施例中,可以在不同的色彩空间中确定两个颜色之间的色差。色差即色彩差异,可以用于表示色彩的近似程度。在色彩空间中,色差也可以称为色彩的欧氏距离,可以用ΔE表示。在RGB色彩空间中,色差可以表示为:
Figure BDA0002352651340000071
其中R1、R2、G1、G2、B1、B2分别表示色彩空间中的两点的红、绿、蓝的值。
在Lch色彩空间,色差可以表示为:
Figure BDA0002352651340000072
其中,ΔL=L1-L2
Figure BDA0002352651340000073
Figure BDA0002352651340000074
ΔCab=C1-C2
Figure BDA0002352651340000075
Δa=a1-a2
Δb=b1-b2
SL=1;
SC=1+K1C1
SH=1+K2C1
KC和KH一般取1,KL、K1、K2在不同应用场景取值不同,L1、L2、a1、a2、b1、b2分别表示色彩空间中的两点的L、a、b的值。。
在Lab色彩空间,色差可以表示为:
Figure BDA0002352651340000081
其中,L1、L2、a1、a2、b1、b2分别表示色彩空间中的两点的L、a、b的值。
在CMC(l:c)色彩空间中,色差可以表示为:
Figure BDA0002352651340000082
其中,
Figure BDA0002352651340000083
Figure BDA0002352651340000084
SH=SC(FT+1-F);
Figure BDA0002352651340000085
Figure BDA0002352651340000086
L1、L2、C1、C2、h1、h2分别表示色彩空间中的两点的L、C、h的值。
在不同的色彩空间中计算的色差与人眼的视觉近似程度不同。在Lab空间计算的色差与人眼观察的色差的近似度为75%,在LCH空间计算的色差与人眼观察的色差的近似度为85%,在CMC(l;c)空间计算的色差与人眼观察的色差的近似度为95%。
在一些服务业务中,例如,智能手机应用程序的云服务业务中,为了活动的运营或者新商品的介绍,会嵌入一些HTML页面,很多这种页面,设计的时候为了情感化的需求,会大胆的进行配色。一般这种HTML页面会用一个横幅Banner作为跳转入口,而HTML页面的顶部有个设计与Banner入口相似的制定封面,下面才是具体的页面内容,一般这里的页面内容是事先通过设计人员设计好的,比如页面的版式、配色等,每个页面都需要设计人员逐个配色,影响了页面设计的效率。
本申请提供一种页面配色的方法、装置计算机可读存储介质和芯片,能够实现页面各个组成部分的自动配色,提高页面配色的效率且页面和谐美观。
图1是本申请实施例的页面配色的方法的示意性流程图。如图1所示,该方法100包括步骤110和步骤120。
步骤110,获取第一页面中第一图像的颜色信息,该颜色信息包括所述第一图像包括的颜色的占比。
该第一图像可以是第一页面中的至少一幅图像,也可以是第一页面的整个页面,本申请实施例对此不做具体限定。示例性的,终端设备获取第一页面中的至少一幅图像的颜色信息,该颜色信息可以是第一页面中的至少一幅图像的各颜色所属的色系。一种获取色系的可能实现的方式是,可以根据第一页面中的至少一幅图像中各像素的颜色值,根据各像素的颜色值统计各个像素所在的色系,计算各色系在该图像中的占比情况。另一种获取色系可能实现的方式是,将第一页面中的至少一幅图像划分成各个颜色区域,根据各个颜色区域的占比情况,计算该颜色区域所属色系在该图像中的占比情况。下文将结合具体实施例描述该获取色系的方式,此处暂不详述。
该颜色信息还可以是第一页面中的至少一幅图像中各颜色的色相值,本申请实施例对此不做具体限定。
步骤120,根据所述至少一幅图像的颜色信息,确定第二页面的目标页面元素的配色。
终端设备根据该第一页面中的至少一幅图像的颜色信息,对第二页面的各个组成部分进行自动配色,完成第二页面的内容部分的配色。比如,根据顶部封面图的颜色信息对HTML5长图页面进行自动配色;又如,终端设备也可以根据Banner横幅的颜色信息,对HTML页面的内容部分进行自动配色;或者根据任意一幅图像的颜色实现对另一个页面或图像的组成部分的自动配色,本申请实施例对此不做具体限定。
可选地,该第一页面和第二页面可以是同一个页面。
作为一个示例,终端设备可以对该第一页面中的至少一幅图像中的像素进行取色分析,如,计算该图像中各个颜色的色相值,统计各个颜色所属色系的区域在该图像中的占比情况,根据各个颜色的占比情况确定第二页面的内容部分的配色。该第二页面的组成部分包括但不限于:页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。该第二页面可以包含上述组成部分中的至少一个,也可以包含上述内容部分中的至少两个。
其中,页面全局背景表示第二页面的整体背景;页面分块背景表示第二页面中局部分块的背景,应理解,页面中可能会存在多个局部背景;标题背景表示含有标题的背景,该标题背景的颜色有别于页面全局背景的颜色和页面分块背景的颜色,当没有该标题背景时,标题直接显示在页面全局背景或页面分块背景上、或两个页面分块背景的交界线上、或页面全局背景与页面分块背景的交界线上;标题文字的颜色表示标题部分的文字颜色;按钮背景表示含有按钮的背景,当没有该按钮背景时,该按钮直接显示在页面全局背景或页面分块背景上;按钮文字色表示按钮部分的文字或图案颜色;正文文字色表示正文部分的颜色。
第二页面的内容部分还可以包括纹理色,当该纹理色与背景色的色彩距离即色差不满足预设的条件时,调整该纹理色的纹理透明度,使得纹理与背景和谐。应理解,该背景色可以是页面全局背景的颜色,也可以是页面分块背景的颜色,甚至是标题背景的颜色或按钮背景的颜色,本申请实施例对此并不限定。
根据本申请实施例提供的页面配色的方法,通过第一页面中的至少一幅图像的颜色信息,就可以确定第二页面的内容部分的配色,能够实现页面内容部分的自动配色,提高页面配色的效率,简化了页面设计的过程,且使得配色后的整个页面前后景明确区分,文字可读性强,页面和谐美观。
图2是本申请实施例的色系划分的示意性流程图。如图2所示,该色系划分包括步骤S210至S250。
步骤S210,遍历每个像素,依次取出颜色x。
终端设备遍历顶部封面图中的各个像素,依次记录各个像素的颜色x。
步骤S220,遍历每个色系,依次取出颜色y。
终端遍历每个色系,该色系可以指按照色相环划分的色系,如十色相环、十二色相环、十六色相环,十八色相环以及二十四色相环等等,本申请实施例对此并不限定。
步骤S230,判断颜色x与颜色y的色相相距是否小于20度。
依次判断步骤S210取出的颜色x与步骤S220中取出的颜色y的色相在色相环中的差距是否小于20度。比如,从S210中取出一个颜色x1,将该颜色x1与从S220中取出的一个颜色y2进行比较,若颜色x1与颜色y1的色相在色相环中的差距大于或等于20度,则将该颜色x1与从S220中取出的颜色y2进行比较,直至该颜色x1与颜色y中的某个颜色yn的色相相距小于20度,则转入步骤S240。然后进行下一个颜色的判断,重复上述过程。
步骤S240,将颜色x插入颜色y所在的色系。
若颜色x中的某个颜色xi与颜色y中的某个颜色yi的色相相距小于20度,则将该颜色xi插入颜色yi所在的色系中。作为一个示例,若颜色x1与颜色yn的色相相距小于20度,则将颜色x1插入颜色yn所在的色系。
步骤S250,判断颜色x中是否还有剩余颜色。
若颜色x中还有剩余颜色,则重复进行步骤S210至S250;若颜色x中没有剩余颜色,则结束色系划分。该步骤可以保证该第一页面用于取色的至少一幅图像的颜色全部被划分至某个色系中,完成全部的取色过程。
根据取色结果,将第一页面中该至少一幅图像的类型划分成多种。图3是本申请实施例的一种划分图像类型的方式。如图3所示,可以将取色结果分为三种类型,分别是绝对主色系、双主色系和无主色系。若将该取色结果中占比最大的三个色系分别称为第一色系、第二色系和第三色系,则绝对主色系表示第一色系的占比大于或等于0.5,且该第一色系的占比大于或等于第二色系占比的0.1;双主色系表示第一色系与第二色系的占比之和大于或等于0.8,占比之差小于或等于0.1;无主色系表示色系的占比不满足上述绝对主色系和双主色系的情况。
可选地,可以将第一页面中该至少一幅图像的三种类型形成对应的颜色色板,用于第二页面的自动配色。
对于该第一页面中该至少一幅图像属于绝对主色系的情况,在进行第二页面配色时,大面积的背景色(如页面全局背景、页面分块背景)可以尽量使用主色系的颜色,而对于页面上的小元素(如标题、按钮等)则尽量使用第二色系或第三色系中的颜色。可选地,页面上的小元素优先使用第二色系、第三色系中与主色系(即第一色系)在色相上相距较远的颜色。
对于该第一页面中该至少一幅图像属于双主色系的情况,在进行第二页面配色时,大面积的背景色(如页面全局背景、页面分开背景)可以尽量使用两个主色系即第一色系和第二色系的颜色,而对于页面上的小元素(如标题、按钮等)尽量使用第三色系的颜色,并可以参杂第一色系或第二色系的颜色。
对于该第一页面中该至少一幅图像属于无主色系的情况,在进行第二页面配色时,尽量使用到所有第一色系、第二色系和第三色系的颜色,不区分页面的大面积部分和小元素部分。
图4是本申请实施例的页面配色的示意图。如图4所示,该第二页面中的目标页面元素至少包括页面全局背景的颜色和页面分块背景的颜色。当该页面全局背景是非过渡性背景时,选择第一图像包括的颜色中的占比最大的第一色系中的至少一个颜色作为页面全局背景的颜色。同时,对该颜色在LCH空间上的L值和C值设定一个预设值,当该颜色的L和C值不满足该预设值时,对该颜色进行调整,以使得整个页面的基调和谐美观,避免页面中出现某个颜色特别突兀的情况。
对于过渡类型的页面全局背景,该过渡类型的页面全局背景表示该全局背景是由第一图像过渡而来,与图片要求有一定的联系性,针对此类背景的颜色,取过渡方向图片的1/4处的颜色,作为过渡主色,从之前的第一页面中第一图像的取色色板中选择最接近的颜色作为该背景的颜色。同时,对该颜色在LCH空间上的L值和C值设定一个预设值,当该颜色的L和C值不满足该预设值时,对该颜色进行调整,以使得整个页面的基调和谐美观,避免页面中出现某个颜色特别突兀的情况。
页面全局背景的颜色和页面分块背景的颜色作为页面中的大面积的颜色,可以尽量去使用主色系的颜色。
对于该第一页面中该至少一幅图像是绝对主色系的,当判断到页面全局背景的颜色是属于主色系的,即页面全局背景的颜色为第一色系,则选择剩余色系中占比最大的色系中的至少一个颜色作为页面分块背景的颜色,即选择第二色系作为页面分块背景的颜色,页面分块背景区域可以只有一个,也可以有多个。如果判断到页面全局背景的颜色不是第一色系,则选择第一色系中的至少一个颜色作为页面分块背景的颜色。应理解,一个色系中可以只有一个色板,也可以包含有多个色板。当色系中包含有多个颜色色板时,多个页面分块背景的颜色可以选择该色系中的同一个颜色色板,也可以选择该色系中不同的颜色色板。该方案使得最终的页面配色和第一页面中的该至少一幅图像的配色基本一致,页面色彩比较和谐美观。
对于该第一页面中该至少一幅图像是双主色系的,如果判断到页面全局背景的颜色是属于主色系的,则选择主色系中的另一个作为页面分块背景的颜色,即当页面全局背景的颜色属于第一色系时,选择第二色系中的至少一个颜色作为页面分块背景的颜色,当页面全局背景的颜色属于第二色系时,选择第一色系中的至少一个颜色作为页面分块背景的颜色。应理解,一个色系中可以只有一个色板,也可以包含有多个色板。当色系中包含有多个颜色色板时,多个页面分块背景的颜色可以选择该色系中的同一个颜色色板,也可以选择该色系中不同的颜色色板。该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致,页面色彩比较和谐美观。
如果主色系只有一个颜色色板,则取页面全局背景的颜色在LCH空间上的L值上进行变化处理,比如L±15,得到该页面分块背景的颜色。可选地,需验证该页面全局背景的颜色和该页面分块背景的颜色是否是互补色,如果是互补色,则选择页面全局背景的颜色之外的色系中占比最大的色系的颜色作为页面分块背景的颜色,如果该色系只有一个颜色色板,则选择页面全局背景的颜色在LCH空间上的L值进行变化处理,比如L±15,得到该页面分块背景的颜色。
该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致,页面色彩比较和谐美观。
对于该第一页面中该至少一幅图像是无主色系的,则选择不同于页面全局背景的颜色的第二色系中的至少一个颜色作为页面分块背景的颜色背景的颜色。同时,需验证页面全局背景的颜色和该第二色系是否是互补色,如果是互补色,则选择第三色系中的颜色作为页面分块背景的颜色背景的颜色。
该方案使得最终的页面配色和该第一页面中该至少一幅图像的配色基本一致,避免页面中相邻的颜色出现反差过大导致页面色彩不和谐的现象,使得页面色彩和谐美观。
可选地,当页面分块背景的颜色中存在二级分块背景的颜色时,即分块背景中又存在分块背景时,或者页面分块背景存在装饰色的情况时,可选择将页面分块背景的颜色进行简单的颜色调整得到该二级分块背景的颜色或装饰色,比如,对该页面分开背景的颜色在LCH空间上的L值适当变化,得到该二级分块背景的颜色或装饰色。
图5是本申请实施例的页面配色的又一示意图。如图5所示,该第二页面至少包括页面全局背景的颜色、页面分块背景的颜色、标题背景的颜色、标题文字色、按钮背景的颜色、按钮文字色和正文文字色(图中未示出)。
其中,页面全局背景的颜色和页面分块背景的颜色可使用上文中所述的方法进行配色,此处不再赘述。在本申请实施例中,页面内容部分的标题可分为三类,分别是无分块背景的颜色的平行标题1、有分块背景的颜色的平行标题2和有分块背景的颜色的重叠标题。图5中仅是示意性的划分方式,在实际的第二页面的设计中还可以有其他的划分方式,本申请实施例对此不做具体限定。
本申请实施例的标题部分可以设计有标题背景的颜色,也可以没有标题背景的颜色。对于标题部分含有标题背景的颜色的情况,选择除去页面全局背景的颜色和页面分块背景的颜色之外剩余色系中占比最大的色系中的颜色作为标题背景的颜色。该标题背景的颜色可能属于第三色系,也可能属于第二色系。对于有分块背景的平行标题2、有分块背景的重叠标题,当第一色系与第二色系为互补色系时,第三色系中的颜色作为页面分块背景的颜色,此时选择第二色系作为标题背景的颜色,当第一色系与第二色系部位互补色系时,第二色系中的颜色作为页面分块背景的颜色,此时选择第三色系中的颜色作为标题背景的颜色;对于无分块背景的颜色的平行标题1,当第二色系与页面全局背景的颜色为互补色时,选择第三色系中的颜色作为平行标题1的标题背景的颜色,当第二色系与页面全局背景的颜色不为互补色时,选择第二色系中的颜色作为平行标题1的标题背景的颜色。同时,需对平行标题1和平行标题2在LCH空间上的L值设定一个预设值,当不满足该预设值时,对该标题背景的颜色进行调节,使得该标题背景的颜色与页面全局背景的颜色和页面分块背景的颜色之间存在一定的差值,从而使得页面前后景明确区分,配色和谐美观。
可选地,当具有多个标题背景时,可以选择色系中不同的颜色色板作为标题背景的颜色,也可以选择色系中相同的颜色色板作为标题背景的颜色。
标题文字色的配色分为两种情况,第一种情况,该标题有标题背景;第二种情况,该标题没有标题背景,标题文字直接显示在页面全局背景或页面分块背景的颜色中。对于第一种情况,该标题有标题背景,若上文中对于第一页面的第一图像中的颜色取色结果中的占比最大的前三个色系中还有色系未被用到,则选择该未被用到的色系作为标题文字色,但需要验证标题文字的可读性,该标题文字色与标题背景的颜色在所属LCH空间中的L值之间的差值应大于预设值,若该差值小于或等于该预设值,则调整该标题文字色,使得该L值之间的差值大于预设值,例如该预设值可以是40;若该标题文字色与标题背景的颜色在所属LCH空间上的H值是互补的,即H值之间的差值大于或等于150,则调整页面分块背景的颜色的值,如将该页面分块背景的颜色所属LCH空间上的L值加上一个预设值后得到该标题文字的颜色,若变化后的L值大于90,则选择白色作为标题文字的颜色。若第一页面的第一图像中的颜色取色结果中的占比最大的前三个色系中均已被用到,则调整页面分块背景的颜色的值,如将该页面分块背景的颜色所属LCH空间上的L值加上一个预设值后得到该标题文字的颜色,若变化后的L值大于90,则选择白色作为标题文字的颜色。
对于第二种情况,该标题文字色没有标题背景,若第一页面的第一图像中的颜色取色结果中占比最大的前三个色系中还有色系未被使用,则选择剩下的色系作为标题文字色,例如,第一色系已经选择作为页面全局背景的颜色,第二色系选择作为页面分块背景的颜色,则选择第三色系作为该标题文字色。此时,需验证文字可读性,即该标题文字色与标题背景的颜色在所属LCH空间中的L值之间的差值应大于预设值,若该差值小于或等于该预设值,则调整该标题文字色,使得该L值之间的差值大于预设值,例如该预设值可以是40。若取色结果只有两种色系或一种色系,则选择页面分块背景的颜色作为标题文字色,此时,也需进行文字可读性的验证。
本申请实施例还可以包含按钮部分,如图5所示的按钮文字色1可以是平行标题1的标题文字色,按钮背景的颜色1可以是平行标题1的标题背景的颜色。可选地,也可以是其他的配色方案。
可选地,如图5所示的按钮,该按钮在标题的背景的颜色中。该按钮背景的颜色的一种配色方案是,第一页面的第一图像中的颜色取色结果中占比最大的三个色系中还有色系未被用到,则选择剩余的色系进行色板匹配,即从色板中选择H值最接近的颜色色组,从该颜色色组中选择色差最小的颜色作为该按钮背景的颜色。该按钮背景的颜色的另一种配色方案是,第一页面的的第一图像中的颜色取色结果中占比最大的三个色系均被用到或取色结果只有两个色系时,则选择页面全局背景的颜色进行色板匹配,即从该页面全局背景的颜色色板中选择H值最接近的颜色色组,从该颜色色组中选择色差最小的颜色作为该按钮背景。若第一页面第一图像中的颜色的取色结果只有一个色系,则从该色系的色板中选择与页面分块背景的颜色在所属LCH空间上的H值相距预设值的颜色组,如该预设值为120,然后根据页面分块背景的颜色的冷暖属性,从该颜色组中选择与页面分块背景的颜色冷暖属性相反的颜色作为按钮的背景的颜色。例如,蓝色、绿色、紫色等属于冷色系,橙色、黄色、红色等属于暖色系,若该页面分块背景的颜色属于冷色系,则选择暖色系作为按钮背景的颜色。
对于按钮文字色的配色,根据按钮背景的颜色的明度进行变化得到该按钮文字色,例如,将按钮背景的颜色所属LCH空间上的L值加一个预设值之后得到的颜色作为该按钮文字色,如该预设值为40,若L+40的值大于90,则选择白色作为按钮文字色。
可选地,该按钮也可以单独呈现在页面全局背景中或页面分块背景中,或页面分块背景与页面全局背景的交界处,或两个页面分块背景的交界处,本申请实施例对此不做具体限定。
本申请实施例还可以包含正文文字部分的配色,若该正文部分在分块背景中,若该页面分块背景的颜色所属LCH空间上的L值大于预设值,则将所述背景的颜色所属LCH空间上的L值和C值变化预设的偏移量之后的颜色作为正文文字色,如将L=20,C=C+7的颜色作为正文文字色;若该分块背景的颜色所属LCH空间上的L值小于或等于预设值,则将该分块背景的颜色所属LCH空间上的L值变化预设的偏移量之后的颜色或白色作为正文文字的颜色,如将L值变为90之后的颜色或白色作为正文文字的颜色。
可选地,当有多个分块背景时,多个分块背景中的正文部分的颜色可以相同,也可以不同。
作为一个示例,若有两个分块背景,分块背景一中的正文部分的配色可以采用上述配色方案。对于分块背景二中的正文部分的配色,若分块背景二所属LCH空间上的L值大于预设值,则将所述分块背景二所属LCH空间上的L值变为20之后的颜色作为正文文字色,如该预设值为50。若该分块背景二所属LCH空间上的L值小于或等于预设值,则选择白色作为该分块背景二中的正文部分的颜色。
可选地,该正文部分也可以包含背景,但需保证正文文字的颜色与该文字背景的颜色满足可读性。
下面将介绍本申请实施例的调整文字色的方法。图6是本申请实施例的一种调整文字色的方法的示意性流程图。应理解,此处所述的文字色可以表示正文文字的颜色,也可以表示标题文字的颜色,甚至还可以表示按钮文字的颜色。
在本申请实施例中,可以先计算文字色与背景的颜色的对比度,当文字色与背景的颜色的对比度不满足要求时,对文字色进行调整。文字色与背景的颜色的对比度过大,可能会导致视觉疲劳;文字色与背景的颜色的对比度较小,可能不满足基本满足阅读需要,因此,需要对文字色进行调整。
步骤S610,判断文字色与背景的颜色的对比度是否满足预设条件。
可以根据目标图像的面向人群的不同,以及文字大小、字体的不同,对预设条件进行调整。示例性地,一般情况下文字色与背景的颜色的对比度至少要保持4.5:1,而如果是针对年龄大的用户群体,例如7:1是更合适的选择。
如果文字色与背景的颜色的对比度不满足预设条件,可以进行步骤S620。预设条件可以是对比度小于第一阈值且大于第二阈值。即文字色与背景的颜色的对比度大于第一阈值,或小于第二阈值第一阈值大于第二阈值,可以进行步骤S620。例如,第一阈值可以是18:1,第二阈值可以是3:1或4.5:1。预设条件也可以是文字色与背景的颜色的对比度大于第二阈值。
在步骤S610之前,可以确定文字区域的背景的颜色,该过程也称为文字区域的智能取色。文字区域的背景可以采用纯色的背景,也可以采用渐变色的背景。采用纯色背景,即目标图像中整个背景颜色可以相同的。采用渐变色的背景,可以确定文字区域渐变背景的颜色中一个或多个点的颜色,例如任意一点的颜色、两个端点的颜色或两端点的重点的颜色。
RGB色彩空间适用于色彩的显示。因此,通过文字区域的智能取色获得的背景的颜色可以通过RGB色彩空间表示。将背景的颜色和文字色RGB归一化处理,即设置R、G、B的最大取值为1,计算背景的颜色和文字色的R、G、B,可以简化计算。
可以计算背景的颜色与文字色的对比度。通过计算,可以确定文字色与背景的颜色是否满足预设条件。文字色与背景的颜色的对比度满足预设条件,可以是文字色与纯色背景的颜色或渐变背景的颜色中一个或多个点的颜色的对比度满足预设条件。
步骤S620,生成色阶。
可以将显示文字色的色彩空间由RGB色彩空间转换为HSV色彩空间。通过H、S、V分段变化,可以生成文字色的彩色色阶。可以将显示文字色的色彩空间由RGB色彩空间转换为LAB色彩空间。通过L等差变化,可以生成文字色的灰色色阶。611是色阶的示例。文字色可以是彩色,也可以不是彩色,即黑色、白色或灰色中的任意一种或几种。
步骤S630,确定修改后的文字色。
可以确定色阶中满足预设条件的颜色作为修改后的文字色。
可以计算色阶中的全部颜色中的每一个与背景的颜色的对比度。可以依次计算色阶中的颜色与背景的颜色的对比度,获得满足预设条件的颜色停止计算。依次计算色阶中的颜色的顺序可以是随机的,也可以从目标颜色组中的文字色开始按照色阶中的顺序分别向两个端点的方向依次计算色阶中的颜色与背景的颜色的对比度。
可以将色阶中满足预设条件的颜色中的一个作为修改后的文字色。例如,预设条件可以是文字色与背景的颜色的对比度大于4.5,可以将色阶中满足预设条件的颜色中,与背景的颜色的对比度接近4.5的颜色作为修改后的文字色。
在步骤S630之后,可以根据修改后的文字色,渲染生成文字图片。
根据本申请实施例的方案,避免出现页面中的文字与背景的颜色的对比度过大或过小的情况,通过自动调节文字色,使得页面中的文字满足可读性标准。
可选地,也可以通过调节背景的颜色,使得文字色与背景的颜色满足对比度。
本申请实施例的页面组成部分还可以包括纹理色。图7是本申请实施例的调节纹理色的方法的示意性流程图。如图7所示,该方法700包括步骤S710和步骤S720。
步骤S710,计算纹理色与背景的颜色的色差。
本申请实施例可以通过CIE lab空间中的欧式距离来计算纹理色与背景的颜色之间的色差,还可以通过RGB空间、LCH空间、CMC l:c空间中的欧氏距离来计算纹理色与背景的颜色之间的色差,本申请实施例对此不做具体限定。当判断到纹理色与背景的颜色之间的色差大于预设的阈值时,执行步骤S720。
步骤S720,降低纹理色的透明度。
本申请实施例会预先设定纹理色与背景的颜色之间色差的阈值,当色差大于该阈值时,可以降低该纹理色的透明度,以使得纹理色不突兀于背景,页面颜色和谐美观。
本申请中根据第一页面的至少一幅图像中的颜色信息,确定第二页面的各个组成部分的配色,上文所述的页面全局背景的颜色、页面分块背景的颜色、标题背景的颜色等,可以是纯色,也可以是渐变色。本申请实施例对此不做具体限定。
图8是本申请实施例的页面配色装置的示意图。如图8所示,该装置800包括获取模块810和处理模块820。该获取模块810用于获取第一页面中的第一图像的颜色信息,该颜色信息包括该第一图像包括的颜色的占比;该处理模块820用于根据该至少一幅图像的颜色信息,确定第二页面的组成部分的配色。
可选地,该第二页面的组成部分至少包括以下中的一种:页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
可选地,该处理模块820具体用于:
选择该第一图像包括的颜色中的占比最大的颜色作为该页面全局背景的颜色;或者选择该第一图像的第一比例处的颜色作为过渡色,从该第一图像包括的颜色占比最大的前三个色系中选择与该过渡色最接近的颜色作为页面全局背景的颜色。
可选地,该页面全局背景的颜色所属LCH空间上的L值和C值在预设的范围内。
该处理模块具体用于:当该第一图像的颜色信息指示该第一图像的色系配置为绝对主色系时,若该页面全局背景的颜色属于第一色系,则选择该第二色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第一色系是该第一图像包括的颜色所属于的色系中占比最大的色系,该第二色系是该第一图像包括的颜色所属于的色系中除该第一色系以外的色系;若该页面全局背景的颜色不是不属于该第一色系,则选择该第一色系中的至少一个颜色作为该页面分块背景的颜色。
可选地,该处理模块820具体用于:根据该第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:当该第一图像的颜色信息指示该第一图像的色系配置为双主色系时,若该页面全局背景的颜色属于第三色系,则选择第四色系中的至少一个颜色作为该页面分块背景的颜色,该第三色系是该双主色系中的一个色系,该第四色系是该双主色系中的另一个色系,且该第三色系是该页面全局背景的颜色所属于的色系。
可选地,该处理模块820具体用于:当该第一图像的颜色信息指示该第一图像的色系配置为无主色系时,选择第五色系中的至少一个颜色作为该页面分块背景的颜色,其中,该第五色系的在该第一图像中的占比小于第六色系,该第六色系是该页面全局背景的颜色所属于的色系,且,该第五色系是该第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
可选地,该处理模块820还用于:根据该第一图像的颜色信息确定的该页面分块背景的颜色为第一颜色,该页面全局背景的颜色为第二颜色,以及该处理模块还用于:当该第一颜色和该第二颜色为互补色时,根据该第一图像的颜色信息,将该页面分块背景的颜色更新为第三颜色,其中,该第三颜色包括第七色系中的至少一个颜色,该第七色系属于该第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系,该第八色系是该第一颜色所属于的色系,该第九色系是该第二颜色所属于的色系。
可选地,该处理模块820具体用于:选择第十色系中的至少一个颜色作为该标题背景的颜色,其中,该第十色系是属于该第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系,该第十一色系是该页面全局背景的颜色所属于的色系,该第十二色系是该页面分块背景的颜色所属于的色系。
可选地,该处理模块820还用于:当该标题文字有该标题背景时,则将该页面分块背景的颜色所属LCH空间上的L加上第三阈值之后的颜色或白色作为该标题文字的颜色;或者当该标题文字没有该标题背景时,选择第十三色系中的至少一个颜色作为该标题文字的颜色,其中,该第十三色系是属于该第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系,该第十四色系是该页面全局背景的颜色所属于的色系,该第十五色系是该页面分块背景的颜色所属于的色系,该标题文字的颜色与该页面分块背景的颜色在所属LCH空间上的L值之间的差值小于第四阈值。
可选地,该处理模块820还用于:选择第十六色系中的至少一个颜色作为该按钮背景的颜色,其中,该第十六色系是属于该第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系,该第十七色系是该页面全局背景的颜色所属于的色系,该第十八色系是该页面分块背景的颜色所属于的色系;或者从该第一图像包括的颜色中选择与该页面分块背景的颜色所属LCH空间上的色相角度值H值相距第五阈值的颜色组,从该颜色组中选择与该页面分块背景的颜色冷暖属性相反的颜色作为该按钮背景的颜色。
可选地,该处理模块820还用于:选择按钮背景色所属LCH空间上L值加上预设值之后的颜色或白色作为按钮文字色。
可选地,该处理模块820还用于:
若该正文文字所在的背景的颜色所属LCH空间上的L大于第六阈值,则将该背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为该正文文字的颜色;若正文文字所在背景的颜色所属LCH空间上的L值小于或等于第六阈值,则将该背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为该正文文字的颜色。
可选地,该处理模块820还用于:计算该正文文字的颜色与该正文文字所在背景的颜色的对比度;当该正文文字的颜色与该正文文字所在背景的颜色的对比度小于或等于第十阈值时,调整该正文文字色。
应理解,在本申请的各种实施例中,上述各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本申请实施例的实施过程构成任何限定。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同装置来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述装置实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统、装置和装置,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理器中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述装置的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。
应理解,本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
应理解,在本申请的各种实施例中,上述各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本申请实施例的实施过程构成任何限定。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统、装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。

Claims (26)

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.一种页面配色的装置,其特征在于,包括:
获取模块,获取第一页面中的第一图像的颜色信息,所述颜色信息包括所述第一图像包括的颜色的占比;
处理模块,根据所述第一图像的颜色信息,确定第二页面的目标页面元素的配色,所述目标页面元素包括以下至少一项:
页面全局背景、页面分块背景、标题背景、标题文字、按钮背景、按钮文字、正文文字。
14.根据权利要求13所述的装置,所述处理模块具体用于:
选择所述第一图像包括的颜色中的占比最大的颜色作为所述页面全局背景的颜色;或者
选择所述第一图像的第一比例处的颜色作为过渡色,从所述第一图像包括的颜色占比最大的前三个色系中选择与所述过渡色最接近的颜色作为页面全局背景的颜色。
15.根据权利要求13或14所述的装置,其特征在于,所述页面全局背景的颜色所属的明度值-饱和度值-色相角度值LCH空间上的明度值小于或等于第一阈值;和/或
所述页面全局背景的颜色所属LCH空间上的饱和度值小于或等于第二阈值。
16.根据权利要求13至15中任一项所述的装置,其特征在于,所述处理模块具体用于:
当所述第一图像的颜色信息指示所述第一图像的色系配置为绝对主色系时,
若所述页面全局背景的颜色属于第一色系,则选择所述第二色系中的至少一个颜色作为所述页面分块背景的颜色,其中,所述第一色系是所述第一图像包括的颜色所属于的色系中占比最大的色系,所述第二色系是所述第一图像包括的颜色所属于的色系中除所述第一色系以外的色系;
若所述页面全局背景的颜色不是不属于所述第一色系,则选择所述第一色系中的至少一个颜色作为所述页面分块背景的颜色。
17.根据权利要求13至15中任一项所述的装置,所述处理模块还用于:
根据所述第一图像的颜色信息,确定第二页面的目标页面元素的配色,包括:
当所述第一图像的颜色信息指示所述第一图像的色系配置为双主色系时,
若所述页面全局背景的颜色属于第三色系,则选择第四色系中的至少一个颜色作为所述页面分块背景的颜色,所述第三色系是所述双主色系中的一个色系,所述第四色系是所述双主色系中的另一个色系,且所述第三色系是所述页面全局背景的颜色所属于的色系。
18.根据权利要求13至15中任一项所述的装置,所述处理模块还用于:
当所述第一图像的颜色信息指示所述第一图像的色系配置为无主色系时,
选择第五色系中的至少一个颜色作为所述页面分块背景的颜色,其中,所述第五色系的在所述第一图像中的占比小于第六色系,所述第六色系是所述页面全局背景的颜色所属于的色系,且,所述第五色系是所述第一图像包括的颜色所对应的色系中除第六色系之外占比最大的色系。
19.根据权利要求13至18中任一项所述的装置,其特征在于,根据所述第一图像的颜色信息确定的所述页面分块背景的颜色为第一颜色,所述页面全局背景的颜色为第二颜色,以及
所述处理模块还用于:
当所述第一颜色和所述第二颜色为互补色时,根据所述第一图像的颜色信息,将所述页面分块背景的颜色更新为第三颜色,其中,所述第三颜色包括第七色系中的至少一个颜色,所述第七色系属于所述第一图像包括的颜色所对应的色系中除第八色系和第九色系之外占比最大的色系,所述第八色系是所述第一颜色所属于的色系,所述第九色系是所述第二颜色所属于的色系。
20.根据权利要求13至19中任一项所述的装置,所述处理模块具体用于:
选择第十色系中的至少一个颜色作为所述标题背景的颜色,其中,所述第十色系是属于所述第一图像包括的颜色所对应的色系中除第十一色系和第十二色系之外占比最大的色系,所述第十一色系是所述页面全局背景的颜色所属于的色系,所述第十二色系是所述页面分块背景的颜色所属于的色系。
21.根据权利要求13至20中任一项所述的装置,所述处理模块还用于:
当所述标题文字有所述标题背景时,则将所述页面分块背景的颜色所属LCH空间上的明度值加上第三阈值之后的颜色或白色作为所述标题文字的颜色;或者
当所述标题文字没有所述标题背景时,选择第十三色系中的至少一个颜色作为所述标题文字的颜色,其中,所述第十三色系是属于所述第一图像包括的颜色所对应的色系中除第十四色系和第十五色系之外占比最大的色系,所述第十四色系是所述页面全局背景的颜色所属于的色系,所述第十五色系是所述页面分块背景的颜色所属于的色系,所述标题文字的颜色与所述页面分块背景的颜色在所属LCH空间上的明度值之间的差值小于第四阈值。
22.根据权利要求13至21中任一项所述的装置,其特征在于,所述处理模块还用于:
选择第十六色系中的至少一个颜色作为所述按钮背景的颜色,其中,所述第十六色系是属于所述第一图像包括的颜色所对应的色系中除第十七色系和第十八色系之外占比最大的色系,所述第十七色系是所述页面全局背景的颜色所属于的色系,所述第十八色系是所述页面分块背景的颜色所属于的色系;或者
从所述第一图像包括的颜色中选择与所述页面分块背景的颜色所属LCH空间上的色相角度值相距第五阈值的颜色组,从所述颜色组中选择与所述页面分块背景的颜色冷暖属性相反的颜色作为所述按钮背景的颜色。
23.根据权利要求13至22中任一项所述的装置,其特征在于,所述处理模块具体用于:
若所述正文文字所在的背景的颜色所属LCH空间上的明度值大于第六阈值,则将所述背景的颜色所属LCH空间上的明度值和饱和度值变化预设的偏移量之后的颜色作为所述正文文字的颜色;
若正文文字所在背景的颜色所属LCH空间上的明度值小于或等于第六阈值,则将所述背景的颜色所属LCH空间上的明度值变化预设的偏移量之后的颜色或白色作为所述正文文字的颜色。
24.根据权利要求23所述的装置,其特征在于,所述处理模块还用于:
计算所述正文文字的颜色与所述正文文字所在背景的颜色的对比度;
当所述正文文字的颜色与所述正文文字所在背景的颜色的对比度小于或等于第七阈值时,调整所述正文文字色。
25.一种计算机可读存储介质,其特征在于,包括计算机程序,当其在计算机设备上运行时,使得所述计算机设备中的处理单元执行如权利要求1至12中任一项所述的方法。
26.一种芯片,其特征在于,所述芯片包括存储器和处理器,所述存储器用于存储计算机指令,所述处理器用于执行所述存储器中存储的计算机指令,以执行如权利要求1至12中任一项所述的方法。
CN201911422117.8A 2019-12-31 2019-12-31 页面配色的方法、装置、存储介质和芯片 Active CN111191424B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201911422117.8A CN111191424B (zh) 2019-12-31 2019-12-31 页面配色的方法、装置、存储介质和芯片
PCT/CN2020/135179 WO2021135887A1 (zh) 2019-12-31 2020-12-10 页面配色的方法、装置、存储介质和芯片

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911422117.8A CN111191424B (zh) 2019-12-31 2019-12-31 页面配色的方法、装置、存储介质和芯片

Publications (2)

Publication Number Publication Date
CN111191424A true CN111191424A (zh) 2020-05-22
CN111191424B CN111191424B (zh) 2023-03-03

Family

ID=70708031

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911422117.8A Active CN111191424B (zh) 2019-12-31 2019-12-31 页面配色的方法、装置、存储介质和芯片

Country Status (2)

Country Link
CN (1) CN111191424B (zh)
WO (1) WO2021135887A1 (zh)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112328345A (zh) * 2020-11-02 2021-02-05 百度(中国)有限公司 用于确定主题色的方法、装置、电子设备及可读存储介质
CN112543363A (zh) * 2020-12-04 2021-03-23 海看网络科技(山东)股份有限公司 一种iptv多样化配置背景的方法
CN112541334A (zh) * 2020-12-21 2021-03-23 山东师范大学 基于VBA的PowerPoint页面配色自动生成方法及系统
WO2021135887A1 (zh) * 2019-12-31 2021-07-08 华为技术有限公司 页面配色的方法、装置、存储介质和芯片
CN113360155A (zh) * 2021-06-23 2021-09-07 平安普惠企业管理有限公司 前端界面背景配色方法、装置、设备及存储介质
CN113626129A (zh) * 2021-10-09 2021-11-09 北京世纪好未来教育科技有限公司 一种页面颜色的确定方法、装置及电子设备
CN113656134A (zh) * 2021-08-17 2021-11-16 北京百度网讯科技有限公司 用于界面元素的配色方法、装置、设备和存储介质
CN113742025A (zh) * 2021-09-17 2021-12-03 北京字跳网络技术有限公司 页面生成方法、装置、设备和存储介质
CN114329278A (zh) * 2021-12-30 2022-04-12 百度在线网络技术(北京)有限公司 搜索结果页的处理方法、装置、电子设备和存储介质
CN112328345B (zh) * 2020-11-02 2024-05-14 百度(中国)有限公司 用于确定主题色的方法、装置、电子设备及可读存储介质

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116578798B (zh) * 2023-04-25 2024-04-12 之江实验室 一种页面对比度自动校准优化的方法
CN117315172B (zh) * 2023-09-22 2024-04-12 鲸数科技(北京)有限公司 地图页面配置方法、装置、电子设备与计算机可读介质

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014021702A (ja) * 2012-07-18 2014-02-03 Hitachi Ltd ウェブコンテンツの色作成支援方法
CN104765600A (zh) * 2015-03-13 2015-07-08 深圳市金立通信设备有限公司 一种页面处理方法
CN105389403A (zh) * 2015-12-29 2016-03-09 东软集团股份有限公司 页面样式自动匹配方法及系统
CN105468617A (zh) * 2014-09-03 2016-04-06 优视科技有限公司 调整网页内容颜色的方法及装置
CN105511717A (zh) * 2015-11-30 2016-04-20 北京京东尚科信息技术有限公司 页面显示方法和页面显示装置
CN107943924A (zh) * 2017-11-21 2018-04-20 福州聆花信息科技有限公司 一种自动生成网页主题的方法、存储介质和电子设备
CN109783182A (zh) * 2019-02-15 2019-05-21 百度在线网络技术(北京)有限公司 一种页面主题色调的调整方法、装置、设备及介质
CN110198437A (zh) * 2018-02-27 2019-09-03 腾讯科技(深圳)有限公司 图像的处理方法、装置、存储介质和电子装置
CN110287435A (zh) * 2019-05-21 2019-09-27 百度在线网络技术(北京)有限公司 网页展现方法、系统和机器可读存储介质
CN110377860A (zh) * 2019-07-18 2019-10-25 百度(中国)有限公司 一种页面颜色调整方法、装置及电子设备
CN110609722A (zh) * 2019-08-09 2019-12-24 华为技术有限公司 一种暗模式显示界面处理方法、电子设备与存储介质

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9378294B2 (en) * 2010-12-17 2016-06-28 Microsoft Technology Licensing, Llc Presenting source regions of rendered source web pages in target regions of target web pages
CN104331524B (zh) * 2014-11-28 2017-11-10 广东欧珀移动通信有限公司 页面显示方法、装置及终端
CN105786896A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 一种页面侧边栏的颜色渲染方法及装置
CN104965631B (zh) * 2015-05-26 2020-05-15 深圳市万普拉斯科技有限公司 桌面配色方法、装置及智能终端
CN108733640A (zh) * 2017-04-24 2018-11-02 珠海金山办公软件有限公司 一种文档配色方案生成方法及装置
CN111191424B (zh) * 2019-12-31 2023-03-03 北京华为数字技术有限公司 页面配色的方法、装置、存储介质和芯片

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014021702A (ja) * 2012-07-18 2014-02-03 Hitachi Ltd ウェブコンテンツの色作成支援方法
CN105468617A (zh) * 2014-09-03 2016-04-06 优视科技有限公司 调整网页内容颜色的方法及装置
CN104765600A (zh) * 2015-03-13 2015-07-08 深圳市金立通信设备有限公司 一种页面处理方法
CN105511717A (zh) * 2015-11-30 2016-04-20 北京京东尚科信息技术有限公司 页面显示方法和页面显示装置
CN105389403A (zh) * 2015-12-29 2016-03-09 东软集团股份有限公司 页面样式自动匹配方法及系统
CN107943924A (zh) * 2017-11-21 2018-04-20 福州聆花信息科技有限公司 一种自动生成网页主题的方法、存储介质和电子设备
CN110198437A (zh) * 2018-02-27 2019-09-03 腾讯科技(深圳)有限公司 图像的处理方法、装置、存储介质和电子装置
CN109783182A (zh) * 2019-02-15 2019-05-21 百度在线网络技术(北京)有限公司 一种页面主题色调的调整方法、装置、设备及介质
CN110287435A (zh) * 2019-05-21 2019-09-27 百度在线网络技术(北京)有限公司 网页展现方法、系统和机器可读存储介质
CN110377860A (zh) * 2019-07-18 2019-10-25 百度(中国)有限公司 一种页面颜色调整方法、装置及电子设备
CN110609722A (zh) * 2019-08-09 2019-12-24 华为技术有限公司 一种暗模式显示界面处理方法、电子设备与存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
芦丹: "Web 自动配色方案及用户行为影响的研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 *
雷宇: "网页布局结构与色彩搭配解析", 《中国优秀硕士学位论文全文数据库 信息科技辑》 *

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2021135887A1 (zh) * 2019-12-31 2021-07-08 华为技术有限公司 页面配色的方法、装置、存储介质和芯片
CN112328345A (zh) * 2020-11-02 2021-02-05 百度(中国)有限公司 用于确定主题色的方法、装置、电子设备及可读存储介质
CN112328345B (zh) * 2020-11-02 2024-05-14 百度(中国)有限公司 用于确定主题色的方法、装置、电子设备及可读存储介质
CN112543363A (zh) * 2020-12-04 2021-03-23 海看网络科技(山东)股份有限公司 一种iptv多样化配置背景的方法
CN112541334A (zh) * 2020-12-21 2021-03-23 山东师范大学 基于VBA的PowerPoint页面配色自动生成方法及系统
CN113360155A (zh) * 2021-06-23 2021-09-07 平安普惠企业管理有限公司 前端界面背景配色方法、装置、设备及存储介质
CN113656134A (zh) * 2021-08-17 2021-11-16 北京百度网讯科技有限公司 用于界面元素的配色方法、装置、设备和存储介质
CN113656134B (zh) * 2021-08-17 2023-08-04 北京百度网讯科技有限公司 用于界面元素的配色方法、装置、设备和存储介质
CN113742025A (zh) * 2021-09-17 2021-12-03 北京字跳网络技术有限公司 页面生成方法、装置、设备和存储介质
CN113626129B (zh) * 2021-10-09 2022-02-18 北京世纪好未来教育科技有限公司 一种页面颜色的确定方法、装置及电子设备
CN113626129A (zh) * 2021-10-09 2021-11-09 北京世纪好未来教育科技有限公司 一种页面颜色的确定方法、装置及电子设备
CN114329278A (zh) * 2021-12-30 2022-04-12 百度在线网络技术(北京)有限公司 搜索结果页的处理方法、装置、电子设备和存储介质
CN114329278B (zh) * 2021-12-30 2023-09-29 百度在线网络技术(北京)有限公司 搜索结果页的处理方法、装置、电子设备和存储介质

Also Published As

Publication number Publication date
CN111191424B (zh) 2023-03-03
WO2021135887A1 (zh) 2021-07-08

Similar Documents

Publication Publication Date Title
CN111191424B (zh) 页面配色的方法、装置、存储介质和芯片
CN104076928B (zh) 一种调整文字显示区域色调的方法
US10067646B2 (en) Color selector for desktop publishing
CN104978186B (zh) 一种界面皮肤的渲染方法和装置
JP2005151282A (ja) 画像処理装置、画像処理方法、およびプログラム
CN110634169A (zh) 图像处理的装置和方法
CN110473282B (zh) 物体模型的染色处理方法、装置、计算机设备和存储介质
WO2022068293A1 (zh) 页面展示方法及装置
US8830251B2 (en) Method and system for creating an image
WO2023045857A1 (zh) 图像处理方法、装置、电子设备及存储介质
CN106251322A (zh) 图像处理设备、图像处理方法和图像处理系统
CN113436284A (zh) 一种图像处理方法、装置、计算机设备和存储介质
CN111164563B (zh) 一种智能终端的图像色彩调节系统及色彩调节方法
CN104639924B (zh) 一种降低对设备像素依赖程度提高颜色取值精度的方法
CN110335279A (zh) 实时绿幕抠像方法、装置、设备及存储介质
US8462171B2 (en) Saturation contrast image enhancement
CN112541955A (zh) 图像处理方法、装置及设备
CN108292319B (zh) 确定用于被显示在用户界面上的元素的外观
WO2023274131A1 (zh) 图像的生成方法、装置、电子设备及可读存储介质
US6456295B1 (en) Method for simulating diffusion on a raster
CN114707013A (zh) 图像配色方法与装置、终端及可读存储介质
CN114363528A (zh) 表盘生成方法、装置、终端设备及计算机可读存储介质
CN104090764B (zh) 一种终端
CN115829861B (zh) 一种图像色彩增强方法及图像色彩增强装置
CN111783402B (zh) 一种文档视觉效果的获取方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant