CN111381912B - 一种ui调色板确定方法、装置、设备及存储介质 - Google Patents

一种ui调色板确定方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN111381912B
CN111381912B CN201811638155.2A CN201811638155A CN111381912B CN 111381912 B CN111381912 B CN 111381912B CN 201811638155 A CN201811638155 A CN 201811638155A CN 111381912 B CN111381912 B CN 111381912B
Authority
CN
China
Prior art keywords
color
theme
value corresponding
edge
theme color
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.)
Active
Application number
CN201811638155.2A
Other languages
English (en)
Other versions
CN111381912A (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.)
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology Co Ltd
Original Assignee
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology 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 Beijing Kingsoft Cloud Network Technology Co Ltd, Beijing Kingsoft Cloud Technology Co Ltd filed Critical Beijing Kingsoft Cloud Network Technology Co Ltd
Priority to CN201811638155.2A priority Critical patent/CN111381912B/zh
Publication of CN111381912A publication Critical patent/CN111381912A/zh
Application granted granted Critical
Publication of CN111381912B publication Critical patent/CN111381912B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Image Processing (AREA)
  • Color Image Communication Systems (AREA)

Abstract

本发明实施例提供了一种用户界面UI调色板确定方法、装置、设备及存储介质,其中,该方法可以包括:确定UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;根据第一主题色对应的第二颜色值,计算该调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。通过本发明实施例提供的UI调色板确定方法、装置、设备及存储介质,能够提高用户与界面交互过程中的视觉效果。

Description

一种UI调色板确定方法、装置、设备及存储介质
技术领域
本发明涉及互联网技术领域,特别是涉及一种用户界面(User Interface,UI)调色板确定方法、装置、设备及存储介质。
背景技术
在用户界面中,不同的主题类型可以对应不同的调色板,如提示信息对应红色系,文本信息对应黑色系,等等。调色板可以包括基于同一色系的多个不同的主题色。其中,不同的主题色对应不同的交互操作、操作主体等,如用户在与界面交互过程中,当将鼠标移动至选择标题的按钮的附件时,呈现出一种颜色;当通过鼠标点击该按钮时,呈现出另一种颜色。
颜色作为一种感知性的设计语言,在表达设计目标时起到强化作用。不同的颜色表达出不同的视觉效果。如此,在与界面交互过程中,为了尽可能地提高与界面交互过程中的视觉效果,确定调色板的过程非常重要。
发明内容
本发明实施例的目的在于提供一种UI调色板确定方法、装置、设备及存储介质,以提高用户与界面交互过程中的视觉效果。具体技术方案如下:
第一方面,本发明实施例提供了一种用户界面UI调色板确定方法,包括:
确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;
将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;
根据所述第一主题色对应的第二颜色值,计算所述调色板第二主题色对应的第二颜色值;并将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色。
可选的,所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
在将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值之后,所述方法还包括:
判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。
可选的,所述根据所述第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值,包括:
将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;
确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和/或色号最大的颜色;
根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;
根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值。
可选的,所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;
根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值。
可选的,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;确定所述第二差值绝对值与第一色号个数的第二比值,并将所述第二比值作为第一饱和度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
计算所述第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;确定所述第三差值绝对值与第二色号个数的第三比值,并将所述第三比值作为第二饱和度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第二饱和度平均间隔,确定第二主题色对应的饱和度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
可选的,所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:
计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;确定所述第四差值绝对值与所述色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述亮度平均间隔,确定所述其他主题色对应的亮度分量值。
可选的,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:
计算所述第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;确定所述第五差值绝对值与第一色号个数的第五比值,并将所述第五比值作为第一亮度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述第一亮度平均间隔,确定第一其他主题色对应的亮度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
计算所述第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;确定所述第六差值绝对值与第二色号个数的第六比值,并将所述第六比值作为第二亮度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述第二亮度平均间隔,确定第二主题色对应的亮度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
可选的,所述调色板为9色调色板;所述第一主题色为所述9色调色板中心的主题色。
第二方面,本发明实施例提供了一种用户界面UI调色板确定装置,包括:
确定模块,用于确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;
转换模块,用于将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;
计算模块,用于根据所述第一主题色对应的第二颜色值,计算所述调色板中第二主题色对应的第二颜色值;
转换模块,还用于将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色。
可选的,所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
所述装置还包括:
判断模块,用于判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;
返回模块,用于在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。
可选的,所述计算模块,包括:
计算子模块,用于将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;
确定子模块,用于确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和/或色号最大的颜色;根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值。
可选的,所述确定子模块,包括:
第一计算单元,用于计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;
第一确定单元,用于确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值。
可选的,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述确定子模块,包括:
第二计算单元,用于计算所述第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;
第二确定单元,用于确定所述第二差值绝对值与第一色号个数的第二比值,并将所述第二比值作为第一饱和度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;根据所述第一主题色对应的饱和度分量值以及所述第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
第二计算单元,还用于计算所述第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;
第二确定单元,还用于确定所述第三差值绝对值与第二色号个数的第三比值,并将所述第三比值作为第二饱和度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;根据所述第一主题色对应的饱和度分量值以及所述第二饱和度平均间隔,确定第二主题色对应的饱和度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
可选的,所述确定子模块,包括:
第三计算单元,用于计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;
第三确定单元,用于确定所述第四差值绝对值与所述色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述亮度平均间隔,确定所述其他主题色对应的亮度分量值。
可选的,所述确定子模块,包括:
在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述确定子模块,包括:
第四计算单元,用于计算所述第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;
第四确定单元,用于确定所述第五差值绝对值与第一色号个数的第五比值,并将所述第五比值作为第一亮度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述第一亮度平均间隔,确定第一其他主题色对应的亮度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
第四计算单元,还用于计算所述第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;
第四确定单元,还用于确定所述第六差值绝对值与第二色号个数的第六比值,并将所述第六比值作为第二亮度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述第二亮度平均间隔,确定第二主题色对应的亮度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
可选的,所述调色板为9色调色板;所述第一主题色为所述9色调色板中心的主题色。
第三方面,本发明实施例提供了一种电子设备,包括处理器、通信接口、存储器和通信总线,其中,所述处理器,所述通信接口,所述存储器通过所述通信总线完成相互间的通信;
所述存储器,用于存放计算机程序;
所述处理器,用于执行所述存储器上所存放的程序时,实现上述第一方面所述的方法步骤。
第四方面,本发明实施例提供了一种计算机可读存储介质,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现上述第一方面所述的方法步骤。
本发明实施例还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述第一方面所述的方法步骤。
本发明实施例提供的一种UI调色板确定方法、装置、设备及存储介质,可以通过确定UI调色板中第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算该调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果。当然,实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为已知技术中调色板的一种示意图;
图2本发明实施例提供的UI调色板确定方法的一种流程图;
图3本发明实施例提供的UI调色板确定方法的另一种流程图;
图4为本发明实施例提供的调色板的一种示意图;
图5为本发明实施例提供的UI调色板确定方法的另一种流程图;
图6为本发明实施例提供的UI调色板确定方法的另一种流程图;
图7为本发明实施例提供的UI调色板确定装置的结构示意图;
图8为本发明实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在用户界面中,不同的主题类型可以对应不同的调色板,如提示信息对应红色系,文本信息对应黑色系,等等。一个调色板可以包括基于同一色系的多个不同的主题色。其中,不同的主题色对应不同的交互操作、操作主体等,如用户在与界面交互过程中,当将鼠标移动至选择标题的按钮的附件时,呈现出一种颜色;当通过鼠标点击该按钮时,呈现出另一种颜色。
颜色作为一种感知性的设计语言,在表达设计目标时起到强化作用。不同的颜色表达出不同的视觉效果。如此,在与界面交互过程中,为了尽可能地提高与界面交互过程中的视觉效果,确定调色板的过程非常重要。
调色板可以包括基于同一色系的多个不同的主题色。确定调色板的过程可以理解为是确定调色板中各个主题色的过程。
已有技术中,基于开源框架ant design确定UI调色版,如图1所示,包括4个不同色系的调色板。例如,从上到下可以包括:色系1调色板、色系2调色板、色系3调色板和色系4调色板。具体地,色系1调色板可以为蓝色系调色板、色系2调色板可以为橙色系调色板、色系3调色板可以为红色系调色板以及色系4调色板可以为绿色系调色板。一个色系的调色板中color-1、color-2、color-3、color-4、color-5、color-6、color-7、color-8、color-9和color-10。
具体地,色系1调色板中color-1的颜色值为:#e6f9ff、color-2的颜色值为:#a3e8ff、color-3的颜色值为:#7ad9ff、color-4的颜色值为:#52c8ff、color-5的颜色值为:#28aff7、color-6的颜色值为:#0091ea、color-7的颜色值为:#0073c4、color-8的颜色值为:#00579e、color-9的颜色值为:#003e78和color-10的颜色值为:#002752;色系2调色板中color-1的颜色值为:#fff9e6、color-2的颜色值为:#ffe7a3、color-3的颜色值为:#ffd77a、color-4的颜色值为:#ffc552、color-5的颜色值为:#ffb029、color-6的颜色值为:#ff9800、color-7的颜色值为:#d97b00、color-8的颜色值为:#b35f00、color-9的颜色值为:#8c4600和color-10的颜色值为:#663000;色系3调色板中color-1的颜色值为:#fff3f0、color-2的颜色值为:#ffded6、color-3的颜色值为:#ffbbad、color-4的颜色值为:#ff9585、color-5的颜色值为:#ff6c5c、color-6的颜色值为:#ff4133、color-7的颜色值为:#d92721、color-8的颜色值为:#b31212、color-9的颜色值为:#8c070b和color-10的颜色值为:#66040b;色系4调色板中color-1的颜色值为:#e5f2e4、color-2的颜色值为:#d8e6d8、color-3的颜色值为:#a9d9a9、color-4的颜色值为:#7ecc81、color-5的颜色值为:#58bf5f、color-6的颜色值为:#36b342、color-7的颜色值为:#238c31、color-8的颜色值为:#146622、color-9的颜色值为:#0a4014和color-10的颜色值为:#041a09。
为了基于不同的产品的品牌特性,确定对应的调色板,确定不同的颜色由浅到深的渐变效果。规范产品颜色以及控制台按钮交互颜色等的应用,提高用户与界面交互过程中的视觉效果,提高用户体验。本发明实施例提供了一种UI调色板确定方法。
本发明实施例提供的UI调色板确定方法可以应用于电子设备。具体地,该电子设备可以包括台式计算机、便携式计算机、智能移动终端等。
下面首先对本发明实施例提供的UI调色板确定方法进行详细说明。
本发明实施例提供了一种UI调色板确定方法,如图2所示,可以包括:
S201,确定UI调色板中第一主题色对应的第一颜色值。
一种可实现方式中,本发明实施例提供的UI调色板确定方法可以基于支持多框架的前端高质量组件库(King design Public Components,KPC)来实现。
第一主题色可以包括待确定调色板中的一个或多个颜色。一种可选方式中,第一主题色包括多个主题类型分别对应的多个第一主题色。如图1中所示,第一主题色可以是色系1调色板中的一个或者多个颜色、色系2调色板中的一个或者多个颜色、色系3调色板中的一个或者多个颜色、或色系4调色板中的一个或者多个颜色。
第一颜色值可以包括RGB模式。
一种可实现方式中,第一颜色值以6位十六进制数值来表示。如以“#”开头的6位十六进制数值表示。6位数字分为3组,每组两位,依次表示红、绿、蓝三种颜色的强度。如#0091EA表示第一颜色值,其中,红色分量R为0,绿色分量G为145,蓝色分量B为234。
具体地,电子设备可以获取技术人员输入的第一主题色对应的第一颜色值。一种可选的方式中,技术人员可以是了解美学知识的技术人员。如此,可以使得确定的第一主题色对应的第一颜色值更加符合美学审美角度,从美学角度提高视觉效果。
S202,将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式。
具体地,将RGB模式的第一颜色值转换为HSB模式的第二颜色值。RGB模式和HSB模式是两种不同色彩模式,具体地RGB模式与HSB模式之间的转换可以采用已有的转换方式。本发明实施例不对具体地转换方式作限定,任何可以实现将RGB模式的颜色值转换为HSB模式的颜色值的方式均在本发明实施例的保护范围内。
S203,根据第一主题色对应的第二颜色值,计算调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。
其中,第二主题色是调色板中除第一主题色之外的其他颜色。
一种实现方式中,可以根据第一主题色对应的第二颜色值,通过预设规则,依次递增或者递减得到第二主题色对应的第二颜色值。如调色板中依次包括色1、色2、色3、色4以及色5。其中,确定色3为第一主题色,则可以将色3的第二颜色值增加预设值得到色4的第二颜色值,将色4的第二颜色值增加该预设值得到色5的第二颜色值;可以将色3的第二颜色值减少预设值得到色2的第二颜色值,将色2的第二颜色值减少该预设值得到色5的第二颜色值。
一种实现方式中,可以根据第一主题色对应的第二颜色值,计算边缘主题色对应的第二颜色值。其中,边缘主题色是第二主题色中色号最小的颜色和/或色号最大的颜色,也可以理解为颜色最深和/或最浅的颜色。然后根据根据第一主题色对应的第二颜色值和边缘主题色对应的第二颜色值,计算除边缘主题色之外的其他第二主题色的第二颜色值。
具体地,将HSB模式的第二颜色值转换为RGB模式的第一颜色值。RGB模式和HSB模式是两种不同色彩模式,具体地RGB模式与HSB模式之间的转换可以采用已有的转换方式。本发明实施例不对具体地转换方式作限定,任何可以实现将HSB模式的颜色值转换为RGB模式的颜色值的方式均在本发明实施例的保护范围内。
本发明实施例中,通过确定第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果,在用户与界面交互过程中使用该调色板中的各个主题色,进一步能够提高用户体验。
在上述实施例的基础上,本发明一种可选的实施例中,第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
在步骤S202:将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值之后,还可以包括:
判断第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;在判断结果为第一饱和度分量值小于预设饱和度阈值的情况下,返回执行确定第一主题色对应的第一颜色值的步骤,直至第一饱和度分量值大于或等于预设饱和度阈值。
即当第一饱和度分量值小于预设饱和度阈值时,重复执行步骤S201,直至第一饱和度分量值大于或等于预设饱和度阈值。
预设饱和度阈值可以根据实际需求确定,具体地可以参照美学知识确定出能够使颜色视觉效果更好的阈值。一种可选的实现方式中,预设饱和度阈值可以为60。
如此,能够避免确定的第一主题色的颜色达不到视觉标准颜色,进一步避免后续对根据根据第一主题色对应的颜色值,计算的第二主题色对应的颜色值的影响,保证用户与界面交互过程中的视觉效果,提高用户体验。
在上述实施例的基础上,本发明一种可选的实施例中,步骤S203:根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值,如图3所示,可以包括:
S2031,将第一主题色对应的色度分量值,增加或者减少预设间隔,得到第二主题色对应的色度分量值。
预设间隔可以根据实际需求确定。如第二主题色与第一主题色相邻,预设间隔可以为a;第二主题色与第一主题色间隔一个色号时,预设间隔可以为2a,第二主题色与第一主题色间隔两个色号时,预设间隔可以为3a,第二主题色与第一主题色间隔三个色号时,预设间隔可以为4a,等等。
本发明实施例中,可以将调色板的主题色按照不同色号从浅到深的顺序进行排列,当第二主题色相比较于第一主题色颜色较浅,则将第一主题色对应的色度分量值,减少预设间隔,可以得到该第二主题色对应的色度分量值;如第二主题色相比较于第一主题色颜色较浅,且第二主题色与第一主题色相邻,预设间隔可以为a,可以将该第一主题色对应的色度分量值减少a,即可得到该第二主题色对应的色度分量值。
当第二主题色相比较于第一主题色颜色较深,则将第一主题色对应的色度分量值,增加预设间隔,可以得到该第二主题色对应的色度分量值。如第二主题色相比较于第一主题色颜色较深,且第二主题色与第一主题色间隔一个色号时,预设间隔可以为2a,可以将该第一主题色对应的色度分量值增加2a,即可得到该第二主题色对应的色度分量值。
一种可实现方式中,为了计算更加简便,第一主题色可以为待确定调色板中心的主题色。如图4中所示,调色板为9色调色板,且将9色调色板从浅到深排列为色1、色2、色3、色4、色5、色6、色7、色8到色9。第一主题色为9色调色板中心的主题色,如可以为排列在最中间的色5。且该第一主题色的色度分量值为H0
为了避免多个色号的色度分量值相差太远等,一种可实现方式中,a可以取值为1。如图4中所示调色板,可以确定色1的色度分量值为H0-4、色2的色度分量值为H0-3、色3的色度分量值为H0-2、色4的色度分量值为H0-1、色6的色度分量值为H0+1、色7的色度分量值为H0+2、色8的色度分量值为H0+3、色9的色度分量值为H0+4。
S2032,确定边缘主题色对应的饱和度分量值和边缘主题色对应的亮度分量值。
其中,边缘主题色包括:第二主题色中色号最小的颜色和/或色号最大,也可以理解为颜色最深和/或最浅的颜色。
图如4中,边缘主题色可以包括色号最小的颜色,如颜色最浅的色号1和色号最大的颜色,如颜色最深的色号9。或者可以仅包括颜色最浅的色号1。或者也可以仅包括颜色最深的色号9。
具体地,确定边缘主题色对应的饱和度分量值和边缘主题色对应的亮度分量值可以是预设值。
本发明一种可选的实施例中,色号1对应的边缘主题色的饱和度分量值S1=10,亮度分量值B1=100。色号9对应的边缘主题色的饱和度分量值S9=100,亮度分量值B9=40。
S2033,根据第一主题色对应的饱和度分量值和边缘主题色对应的饱和度分量值,通过第一预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的饱和度分量值。
具体地,如图5所示,可以包括:
S20331,计算第一主题色对应的饱和度分量值与边缘主题色对应的饱和度分量值之间的第一差值绝对值。
一种可实现方式中,可以判断第一主题色对应的饱和度分量值与边缘主题色对应的饱和度分量值之间的较大者和较小者,然后将该较大者减去较小者,得到差值,该差值即可为得到的第一差值绝对值。
S20332,确定第一主题色距离边缘主题色的色号个数。
如图4中,第一主题色为色号5对应的主题色,边缘主题色为色号1或者色号9,则色号个数为4。
S20333,确定第一差值绝对值与色号个数的第一比值,并将第一比值作为饱和度平均间隔。
S20334,根据第一主题色对应的饱和度分量值以及饱和度平均间隔,确定其他主题色对应的饱和度分量值。
一种可实现方式中,第一预设规则可以包括公式1;
Si-1=Si+[(SC-SB1)/n]。
另一种可实现方式中,第一预设规则可以包括公式2:
Si=Si-1+[(SB2-SC)/n]。
其中,i为待确定的其他主题色的编号;S0为第一主题色的饱和度分量值;SB1、SB2为分别为一个边缘主题色的饱和度分量值;n为第一主题色距离边缘主题色的色号个数;(SC-SB1)/n或(SB2-SC)/n为饱和度平均间隔。
如边缘主题色为图4中色号1,色号1对应的饱和度分量值SB1为饱和度分量值S1,一种可实现方式中S1为10,由色号5至色号1,依次递减计算各个其他主题色的饱和度分量值可通过公式1,SC为S5。具体地,Si-1=Si+[(SC-10)/4],其中,i可以为5,4,3,2。
如边缘主题色为图4中色号9,色号9对应的饱和度分量值SB2为饱和度分量值S9,一种可实现方式中S9为100,由色号5至色号9,依次递增计算各个其他主题色的饱和度分量值可通过公式2,SC为S5。具体地,Si=Si-1+[(100-SC)/4],其中,i可以为6,7,8,9。
本发明一种可选的实施例中,待确定调色板包括色号1、色号2、色号3、色号4和色号5。边缘主题色包括色号最小的颜色。如边缘主题色可以仅包括一个色号,如色号1。确定色号5为第一主题色,则可以通过公式1计算其他主题色对应的饱和度分量值。如色号2、色号3和色号4对应的饱和度分量值。
本发明另一种可选的实施例中,待确定调色板包括色号5、色号6、色号7、色号8和色号9。边缘主题色可以包括饱和度分量值最大且亮度分量值最小的颜色。如边缘主题色仅包括一个色号,如色号9。确定色号5为第一主题色,则可以通过公式2计算其他主题色对应的饱和度分量值。如色号6、色号7和色号8对应的饱和度分量值。
本发明另一种可选的实施例中,在边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,第一边缘主题色为第二主题色中色号最小的颜色,第二边缘主题色为第二主题色中色号最大的颜色;步骤S2033:根据第一主题色对应的饱和度分量值和边缘主题色对应的饱和度分量值,通过第一预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的饱和度分量值,可以包括:
A1,计算第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;确定第二差值绝对值与第一色号个数的第二比值,并将第二比值作为第一饱和度平均间隔。
其中,第一色号个数为第一主题色距离第一边缘主题色的色号个数。
A2,根据第一主题色对应的饱和度分量值以及第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值。
第一其他主题色包括色号位于第一边缘主题色的色号与第一主题色的色号之间的颜色。
A3,计算第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;确定第三差值绝对值与第二色号个数的第三比值,并将第三比值作为第二饱和度平均间隔。
其中,第二色号个数为第一主题色距离第二边缘主题色的色号个数;
A4,根据第一主题色对应的饱和度分量值以及第二饱和度平均间隔,确定第二主题色对应的饱和度分量值。
第二其他主题色包括色号位于第一主题色的色号与第二边缘主题色的色号之间的颜色。
本发明实施例中,边缘主题色可以同时包括第二主题色中色号最小和色号最大的颜色。如边缘主题色包括:色号1和色号9,则可以通过上述公式1和上述公式2分别计算调色板中一部分其他主题色对应的饱和度分量值。如待确定调色板中包括色号1至色号9,第一主题色为色号5,则可以通过公式1计算色号2至色号4对应的饱和度分量值,通过公式2计算色号6至色号8对应的饱和度分量值。
S2034,根据第一主题色对应的亮度分量值和边缘主题色对应的亮度分量值,通过第二预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的亮度分量值。
具体地,如图6所示,可以包括:
S20341,计算第一主题色对应的亮度分量值与边缘主题色对应的亮度分量值之间的第四差值绝对值。
一种可实现方式中,可以判断第一主题色对应的亮度分量值与边缘主题色对应的亮度分量值之间的较大者和较小者,然后将该较大者减去较小者,得到差值,该差值即可为得到的第四差值绝对值。
S20342,确定第四差值绝对值与色号个数的第四比值,并将第四比值作为亮度平均间隔。其中,色号个数为第一主题色距离边缘主题色的色号个数。
S20343,根据第一主题色对应的亮度分量值以及亮度平均间隔,确定其他主题色对应的亮度分量值。
一种可实现方式中,第二预设规则可以包括公式3:
Bi=Bi-1+[(BB1-BC)/n]。
另一种可实现方式中,第二预设规则可以包括公式4:
Bi-1=Bi+[(BC-BB2)/n]。
其中,i为待确定的其他主题色的编号;B0为第一主题色的亮度分量值;BB1、BB2为分别为一个边缘主题色的亮度分量值;n为第一主题色距离边缘主题色的色号个数;(BB1-BC)/n或(BC-BB2)/n为亮度平均间隔。
如边缘主题色为图4中色号1,色号1对应的饱和度分量值BB1为饱和度分量值B1,一种可实现方式中S1为100,由色号5至色号1,依次递增计算各个其他主题色的饱和度分量值可通过公式3,BC为B5。具体地,Bi=Bi+1+[(100-BC)/4],其中,i可以为4,3,2,1。
如边缘主题色为图4中色号9,色号9对应的饱和度分量值BB2为饱和度分量值B9,一种可实现方式中S9为40,由色号5至色号1,依次递减计算各个其他主题色的饱和度分量值可通过公式4,BC为B5。具体地,Bi+1=Bi+[(BC-40)/4],其中,i可以为6,7,8,9。
本发明一种可选的实施例中,待确定调色板包括色号1、色号2、色号3、色号4和色号5。边缘主题色可以包括饱和度分量值最小且亮度分量值最大的颜色。如边缘主题色仅包括一个色号,如色号1。确定色号5为第一主题色,则可以通过公式3计算其他主题色对应的亮度分量值。如色号2、色号3和色号4对应的亮度分量值。
本发明另一种可选的实施例中,待确定调色板包括色号5、色号6、色号7、色号8和色号9。边缘主题色可以包括饱和度分量值最大且亮度分量值最小的颜色。如边缘主题色仅包括一个色号,如色号9。确定色号5为第一主题色,则可以通过公式4计算其他主题色对应的亮度分量值。如色号6、色号7和色号8对应的亮度分量值。
本发明另一种可选的实施例中,在边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,第一边缘主题色为第二主题色中色号最小的颜色,第二边缘主题色为第二主题色中色号最大的颜色;步骤S2034:根据第一主题色对应的亮度分量值和边缘主题色对应的亮度分量值,通过第二预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的亮度分量值,可以包括:
B1,计算第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;确定第五差值绝对值与第一色号个数的第五比值,并将第五比值作为第一亮度平均间隔。
其中,第一色号个数为第一主题色距离第一边缘主题色的色号个数。
B2,根据第一主题色对应的亮度分量值以及第一亮度平均间隔,确定第一其他主题色对应的亮度分量值。
第一其他主题色包括色号位于第一边缘主题色的色号与第一主题色的色号之间的颜色。
B3,计算第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;确定第六差值绝对值与第二色号个数的第六比值,并将第六比值作为第二亮度平均间隔。
其中,第二色号个数为第一主题色距离第二边缘主题色的色号个数。
B4,根据第一主题色对应的亮度分量值以及第二亮度平均间隔,确定第二主题色对应的亮度分量值。
第二其他主题色包括色号位于第一主题色的色号与第二边缘主题色的色号之间的颜色。
本发明实施例中,边缘主题色可以同时包括第二主题色中饱和度分量值最小且亮度分量值最大的颜色和饱和度分量值最大且亮度分量值最小的颜色。如边缘主题色可以同时包括色号1和色号9,则可以通过上述公式3和上述公式4分别计算调色板中一部分其他主题色对应的亮度分量值。如待确定调色板中包括色号1至色号9,第一主题色为色号5,则可以通过公式3计算色号2至色号4对应的亮度分量值,通过公式4计算色号6至色号8对应的亮度分量值。
本发明一种具体的实施例中,如图4所示,确定9色调色板。确定第一主题色:色号5的第一颜色值为:#0091ea,得到调色板。如色号1的第一颜色值为#e6f7ff、色号2的第一颜色值为#a9dfaa、色号3的第一颜色值为#6ec6f4、色号4的第一颜色值为#36acef、色号6的第一颜色值为#0079c9、色号7的第一颜色值为#0063a8、色号8的第一颜色值为#004d87、色号9的第一颜色值为#003886。
确定第一主题色:色号5的第一颜色值为:#ff9800,得到调色板。如色号1的第一颜色值为#fff3e6、色号2的第一颜色值为#ffd9ac、色号3的第一颜色值为#ffc273、色号4的第一颜色值为#ffac39、色号6的第一颜色值为#d98500、色号7的第一颜色值为#b37000、色号8的第一颜色值为#8c5b00、色号9的第一颜色值为#664400。
确定第一主题色:色号5的第一颜色值为:#ff4133,得到调色板。如色号1的第一颜色值为#ffe6e6、色号2的第一颜色值为#ffbab9、色号3的第一颜色值为#ff908c、色号4的第一颜色值为#ff6860、色号6的第一颜色值为#d93021、色号7的第一颜色值为#b32212、色号8的第一颜色值为#8c1707、色号9的第一颜色值为#660e00。
确定第一主题色:色号5的第一颜色值为:#36b342,得到调色板。如色号1的第一颜色值为#e6ffe6、色号2的第一颜色值为#b1ecb4、色号3的第一颜色值为#82d988、色号4的第一颜色值为#59c662、色号6的第一颜色值为#24a032、色号7的第一颜色值为#158d25、色号8的第一颜色值为#09791a、色号9的第一颜色值为#008611。
本发明实施中确定的调色板的颜色更符合电脑显示颜色的计算,能够呈现更合理的颜色区间。
需要说明的是,上述方法的执行主体可以是电子设备,控制台设备等,比如可以是移动终端,计算机终端等,并不限于此。
本发明实施例还提供了一种UI调色板确定装置,如图7所示,可以包括:
确定模块701,用于确定用户界面UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;
转换模块702,用于将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;
计算模块703,用于根据第一主题色对应的第二颜色值,计算调色板中第二主题色对应的第二颜色值;
转换模块702,还用于将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。
本发明实施例中,通过确定第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果,在用户与界面交互过程中使用该调色板中的各个主题色,进一步能够提高用户体验。
可选的,第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
该装置还包括:
判断模块,用于判断第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;
返回模块,用于在判断结果为第一饱和度分量值小于预设饱和度阈值的情况下,返回执行确定第一主题色对应的第一颜色值的步骤,直至第一饱和度分量值大于或等于预设饱和度阈值。
可选的,计算模块703,包括:
计算子模块,用于将第一主题色对应的色度分量值,增加或者减少预设间隔,得到第二主题色对应的色度分量值;
确定子模块,用于确定边缘主题色对应的饱和度分量值和边缘主题色对应的亮度分量值,其中,边缘主题色包括:第二主题色中色号最小的颜色和/或色号最大的颜色;根据第一主题色对应的饱和度分量值和边缘主题色对应的饱和度分量值,通过第一预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的饱和度分量值;根据第一主题色对应的亮度分量值和边缘主题色对应的亮度分量值,通过第二预设规则,确定第二主题色中除边缘主题色之外的其他主题色对应的亮度分量值。
可选的,确定子模块,包括:
第一计算单元,用于计算第一主题色对应的饱和度分量值与边缘主题色对应的饱和度分量值之间的第一差值绝对值;
第一确定单元,用于确定第一主题色距离边缘主题色的色号个数;确定第一差值绝对值与色号个数的第一比值,并将第一比值作为饱和度平均间隔;根据第一主题色对应的饱和度分量值以及饱和度平均间隔,确定其他主题色对应的饱和度分量值。
可选的,在边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,第一边缘主题色为第二主题色中色号最小的颜色,第二边缘主题色为第二主题色中色号最大的颜色;确定子模块,包括:
第二计算单元,用于计算第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;
第二确定单元,用于确定第二差值绝对值与第一色号个数的第二比值,并将第二比值作为第一饱和度平均间隔;其中,第一色号个数为第一主题色距离第一边缘主题色的色号个数;根据第一主题色对应的饱和度分量值以及第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;第一其他主题色包括色号位于第一边缘主题色的色号与第一主题色的色号之间的颜色;
第二计算单元,还用于计算第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;
第二确定单元,还用于确定第三差值绝对值与第二色号个数的第三比值,并将第三比值作为第二饱和度平均间隔;其中,第二色号个数为第一主题色距离第二边缘主题色的色号个数;根据第一主题色对应的饱和度分量值以及第二饱和度平均间隔,确定第二主题色对应的饱和度分量值;第二其他主题色包括色号位于第一主题色的色号与第二边缘主题色的色号之间的颜色。
可选的,确定子模块,包括:第三计算单元,用于计算第一主题色对应的亮度分量值与边缘主题色对应的亮度分量值之间的第四差值绝对值;
第三确定单元,用于确定第四差值绝对值与色号个数的第四比值,并将第四比值作为亮度平均间隔;其中,色号个数为第一主题色距离边缘主题色的色号个数;根据第一主题色对应的亮度分量值以及亮度平均间隔,确定其他主题色对应的亮度分量值。
可选的,在边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,第一边缘主题色为第二主题色中色号最小的颜色,第二边缘主题色为第二主题色中色号最大的颜色;确定子模块,包括:
第四计算单元,用于计算第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;
第四确定单元,用于确定第五差值绝对值与第一色号个数的第五比值,并将第五比值作为第一亮度平均间隔;其中,第一色号个数为第一主题色距离第一边缘主题色的色号个数;根据第一主题色对应的亮度分量值以及第一亮度平均间隔,确定第一其他主题色对应的亮度分量值;第一其他主题色包括色号位于第一边缘主题色的色号与第一主题色的色号之间的颜色;
第四计算单元,还用于计算第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;
第四确定单元,还用于确定第六差值绝对值与第二色号个数的第六比值,并将第六比值作为第二亮度平均间隔;其中,第二色号个数为第一主题色距离第二边缘主题色的色号个数;根据第一主题色对应的亮度分量值以及第二亮度平均间隔,确定第二主题色对应的亮度分量值;第二其他主题色包括色号位于第一主题色的色号与第二边缘主题色的色号之间的颜色。
可选的,调色板为9色调色板;第一主题色为9色调色板中心的主题色。
需要说明的是,本发明实施例提供的UI调色板确定装置是应用上述UI调色板确定方法的装置,则上述UI调色板确定方法的所有实施例均适用于该装置,且均能达到相同或相似的有益效果。
需要说明的是,上述设备可以位于电子设备,控制台设备等中,比如可以是移动终端,计算机终端等,并不限于此。
本发明实施例还提供了一种电子设备,如图8所示,包括处理器801、通信接口802、存储器803和通信总线804,其中,处理器801,通信接口802,存储器803通过通信总线804完成相互间的通信。
存储器803,用于存放计算机程序;
处理器801,用于执行存储器803上所存放的程序时,实现上述实施例中UI调色板确定方法的上述方法步骤,在本发明实施例的一个可选实施例中,可以实现如下步骤:
确定UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;
将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;
根据第一主题色对应的第二颜色值,计算调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。
本发明实施例中,通过确定第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果,在用户与界面交互过程中使用该调色板中的各个主题色,进一步能够提高用户体验。
上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect,PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture,EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示,图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述电子设备与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory,RAM),也可以包括非易失性存储器(Non-Volatile Memory,NVM),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器,包括中央处理器(Central Processing Unit,CPU)、网络处理器(Network Processor,NP)等;还可以是数字信号处理器(Digital SignalProcessing,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
本发明实施例还一种计算机可读存储介质,计算机可读存储介质内存储有计算机程序,计算机程序被处理器执行时实现上述实施例中UI调色板确定方法的方法步骤,在本发明的一个可选实施例中,可以实现如下步骤:
确定UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;
将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;
根据第一主题色对应的第二颜色值,计算调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。
本发明实施例中,通过确定第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果,在用户与界面交互过程中使用该调色板中的各个主题色,进一步能够提高用户体验。
本发明实施例还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述实施例中UI调色板确定方法的方法步骤,在本发明实施例中,可以实现如下步骤:
确定UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;
将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;
根据第一主题色对应的第二颜色值,计算调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。
本发明实施例中,通过确定第一主题色对应的RGB模式的第一颜色值,并将该第一颜色值转换为第一主题色对应的HSB模式的第二颜色值,根据第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值。如此,能够提高用户与界面交互过程中的视觉效果,在用户与界面交互过程中使用该调色板中的各个主题色,进一步能够提高用户体验。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置、电子设备、计算机可读存储介质及计算机程序产品实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。

Claims (10)

1.一种用户界面UI调色板确定方法,其特征在于,应用于电子设备,包括:
确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;
将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
根据所述第一主题色对应的第二颜色值,计算所述调色板中第二主题色对应的第二颜色值;并将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色;
其中,所述根据所述第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值,包括:
将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;
确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和色号最大的颜色;
根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;
根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值;
其中,所述将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值,包括:
在所述第二主题色的颜色比所述第一主题色的颜色浅的情况下,将所述第一主题色对应的色度分量值,减少预设间隔,得到所述第二主题色对应的色度分量值;
在所述第二主题色的颜色比所述第一主题色的颜色深的情况下,将所述第一主题色对应的色度分量值,增加预设间隔,得到所述第二主题色对应的色度分量值;
所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;
根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值;
所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:
计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;确定所述第四差值绝对值与色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述亮度平均间隔,确定所述其他主题色对应的亮度分量值。
2.根据权利要求1所述的方法,其特征在于,在将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值之后,所述方法还包括:
判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。
3.根据权利要求1所述的方法,其特征在于,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;确定所述第二差值绝对值与第一色号个数的第二比值,并将所述第二比值作为第一饱和度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
计算所述第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;确定所述第三差值绝对值与第二色号个数的第三比值,并将所述第三比值作为第二饱和度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第二饱和度平均间隔,确定第二其他主题色对应的饱和度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
4.根据权利要求1所述的方法,其特征在于,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:
计算所述第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;确定所述第五差值绝对值与第一色号个数的第五比值,并将所述第五比值作为第一亮度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述第一亮度平均间隔,确定第一其他主题色对应的亮度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
计算所述第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;确定所述第六差值绝对值与第二色号个数的第六比值,并将所述第六比值作为第二亮度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;
根据所述第一主题色对应的亮度分量值以及所述第二亮度平均间隔,确定第二其他主题色对应的亮度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。
5.根据权利要求1至4任一项所述的方法,其特征在于,所述调色板为9色调色板;所述第一主题色为所述9色调色板中心的主题色。
6.一种用户界面UI调色板确定装置,其特征在于,应用于电子设备,包括:
确定模块,用于确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;
转换模块,用于将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
计算模块,用于根据所述第一主题色对应的第二颜色值,计算所述调色板中第二主题色对应的第二颜色值;
转换模块,还用于将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色;
所述计算模块,包括:
计算子模块,用于将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;
确定子模块,用于确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和色号最大的颜色;根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值;
所述计算子模块,具体用于在所述第二主题色的颜色比所述第一主题色的颜色浅的情况下,将所述第一主题色对应的色度分量值,减少预设间隔,得到所述第二主题色对应的色度分量值;在所述第二主题色的颜色比所述第一主题色的颜色深的情况下,将所述第一主题色对应的色度分量值,增加预设间隔,得到所述第二主题色对应的色度分量值;
所述确定子模块,包括:
第一计算单元,用于计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;
第一确定单元,用于确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值;
第三计算单元,用于计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;
第三确定单元,用于确定所述第四差值绝对值与色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述亮度平均间隔,确定所述其他主题色对应的亮度分量值。
7.根据权利要求6所述的装置,其特征在于,所述装置还包括:
判断模块,用于判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;
返回模块,用于在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。
8.根据权利要求6至7任一项所述的装置,其特征在于,所述调色板为9色调色板;所述第一主题色为所述9色调色板中心的主题色。
9.一种电子设备,其特征在于,包括处理器、通信接口、存储器和通信总线,其中,所述处理器,所述通信接口,所述存储器通过所述通信总线完成相互间的通信;
所述存储器,用于存放计算机程序;
所述处理器,用于执行所述存储器上所存放的程序时,实现权利要求1-5任一所述的方法的步骤。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-5任一所述的方法的步骤。
CN201811638155.2A 2018-12-29 2018-12-29 一种ui调色板确定方法、装置、设备及存储介质 Active CN111381912B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811638155.2A CN111381912B (zh) 2018-12-29 2018-12-29 一种ui调色板确定方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811638155.2A CN111381912B (zh) 2018-12-29 2018-12-29 一种ui调色板确定方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN111381912A CN111381912A (zh) 2020-07-07
CN111381912B true CN111381912B (zh) 2024-02-02

Family

ID=71220917

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811638155.2A Active CN111381912B (zh) 2018-12-29 2018-12-29 一种ui调色板确定方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN111381912B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111915688B (zh) * 2020-08-06 2021-05-28 上海嗨普智能信息科技股份有限公司 主题样式的生成方法、电子设备及介质

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5867169A (en) * 1996-04-17 1999-02-02 Pixar Method and apparatus for manipulating color values in a computer graphics system
CN1301955A (zh) * 1999-12-29 2001-07-04 正裕科技兴业股份有限公司 用以显示色彩体系的色彩比对表
CN102035990A (zh) * 2009-09-30 2011-04-27 株式会社日立制作所 内容画面的颜色定制方法
CN102262531A (zh) * 2011-06-10 2011-11-30 上海市金山区青少年活动中心 双向数据绑定的调色板装置
CN102568010A (zh) * 2010-12-14 2012-07-11 上海三旗通信科技股份有限公司 一种使用传统摄像头吸色并改变主题配色的方法
KR101676431B1 (ko) * 2015-07-09 2016-11-16 국민대학교산학협력단 디지털 조명장치를 위한 변형-hsv 분포된 원형 hsv 색상팔레트 기반의 색상컨텐츠 제공 시스템 및 방법
WO2017216386A1 (en) * 2016-06-17 2017-12-21 Ningbo Geely Automobile Research & Development Co., Ltd. A method for automatic adaptation of a user interface
CN107787443A (zh) * 2015-05-01 2018-03-09 菲力尔系统公司 用于红外成像的增强调色板系统和方法
CN108698417A (zh) * 2016-03-01 2018-10-23 精工爱普生株式会社 颜色选择用比色图表、颜色选择用比色图表生成方法以及颜色选择用比色图表生成程序
CN108846879A (zh) * 2018-06-14 2018-11-20 阿里巴巴集团控股有限公司 色板的生成方法及装置
CN108986180A (zh) * 2018-06-07 2018-12-11 阿里巴巴集团控股有限公司 一种调色板的生成方法、装置及电子设备

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130207994A1 (en) * 2012-02-13 2013-08-15 Vilen Rodeski System and method for generating and applying a color theme to a user interface
US20170206677A1 (en) * 2016-01-14 2017-07-20 Adp, Llc Intelligent Color Palettes Based on One or More Principal Colors

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5867169A (en) * 1996-04-17 1999-02-02 Pixar Method and apparatus for manipulating color values in a computer graphics system
CN1301955A (zh) * 1999-12-29 2001-07-04 正裕科技兴业股份有限公司 用以显示色彩体系的色彩比对表
CN102035990A (zh) * 2009-09-30 2011-04-27 株式会社日立制作所 内容画面的颜色定制方法
CN102568010A (zh) * 2010-12-14 2012-07-11 上海三旗通信科技股份有限公司 一种使用传统摄像头吸色并改变主题配色的方法
CN102262531A (zh) * 2011-06-10 2011-11-30 上海市金山区青少年活动中心 双向数据绑定的调色板装置
CN107787443A (zh) * 2015-05-01 2018-03-09 菲力尔系统公司 用于红外成像的增强调色板系统和方法
KR101676431B1 (ko) * 2015-07-09 2016-11-16 국민대학교산학협력단 디지털 조명장치를 위한 변형-hsv 분포된 원형 hsv 색상팔레트 기반의 색상컨텐츠 제공 시스템 및 방법
CN108698417A (zh) * 2016-03-01 2018-10-23 精工爱普生株式会社 颜色选择用比色图表、颜色选择用比色图表生成方法以及颜色选择用比色图表生成程序
WO2017216386A1 (en) * 2016-06-17 2017-12-21 Ningbo Geely Automobile Research & Development Co., Ltd. A method for automatic adaptation of a user interface
CN108986180A (zh) * 2018-06-07 2018-12-11 阿里巴巴集团控股有限公司 一种调色板的生成方法、装置及电子设备
CN108846879A (zh) * 2018-06-14 2018-11-20 阿里巴巴集团控股有限公司 色板的生成方法及装置

Also Published As

Publication number Publication date
CN111381912A (zh) 2020-07-07

Similar Documents

Publication Publication Date Title
CN103513946B (zh) 控制显示的方法及装置
US20200126268A1 (en) Method and apparatus for generating file color scheme
CN103870155B (zh) 信息处理的方法及电子设备
CN110910333B (zh) 图像处理方法和图像处理设备
CN105005461A (zh) 一种图标显示方法及终端
CN104076928B (zh) 一种调整文字显示区域色调的方法
RU2014143972A (ru) Обработка изображений с изменением яркости при цветовых ограничениях
JP2020518086A5 (zh)
CN111381912B (zh) 一种ui调色板确定方法、装置、设备及存储介质
CN103137095B (zh) 设置电子阅读前景和背景的方法与装置
CN103927102A (zh) 主题配色方法和移动终端
CN105451094B (zh) 字幕颜色调整方法及装置
CN104978186A (zh) 一种界面皮肤的渲染方法和装置
US11386590B1 (en) In-application adjacent color contrast detection
Yoshinari et al. Color image enhancement in improved HSI color space
CN111090368B (zh) 一种确定页面文字的配色方法和装置
CN105957495B (zh) 一种rgb信号的处理方法及装置
Yanagida et al. Color scheme adjustment by fuzzy constraint satisfaction for color vision deficiencies
CN104144332A (zh) 图像色彩调整方法与其电子装置
US9959819B2 (en) RGB to RGBW brightness compensation method and device
CN106303154B (zh) 一种信息处理方法及电子设备
CN105554488B (zh) 信号转换方法
CN104637034A (zh) 调整图像饱和度的方法及其装置
CN112015417B (zh) 一种应用程序主题颜色的确定方法及装置
CN106843713A (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