1.本公开涉及计算机处理领域，具体涉及一种页面颜色调整方法、页面颜色调整装置、存储介质及电子设备。
背景技术：
：：2.当前在web前端开发过程中，进行页面配色设计时普遍所使用的方式是在已有的前端ui库或工程模板的基础上进行开发功能，或者是用代码还原设计人员给出的页面功能原型图。3.不论是使用业界主流的前端工程模板或者还原设计人员的原型，在颜色设置与获取时通常是以变量表或色值的方式提供给开发人员使用。但不同的开发人员在人工取色时可能存在颜色深浅偏差或者理解偏差，系统页面的颜色过于花哨；并且由于这些方式都是将页面元素的色值写好在配色文件中，后续再进行主题颜色变更时需要将全部的色值进行变更，工程量巨大。4.需要说明的是，在上述
背景技术：
：部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。技术实现要素：5.本公开的目的在于提供一种页面颜色调整方法、页面颜色调整装置、存储介质及电子设备，旨在解决页面颜色调整时工程量大、维护成本高等问题。6.本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。7.根据本公开实施例的一方面，提供了一种页面颜色调整方法，包括：响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、所述目标页面的基础配色文件以及全局配色参数文件；基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；利用所述目标配色文件进行所述目标页面的页面展示。8.根据本公开的一些实施例，基于前述方案，所述基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值，包括：确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；基于所述目标色值更新所述目标色块的色值。9.根据本公开的一些实施例，基于前述方案，所述基于所述目标色值更新所述目标色块的色值，包括：在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。10.根据本公开的一些实施例，基于前述方案，所述根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值，包括：确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；提取所述目标取色变量对应的目标色块信息；从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。11.根据本公开的一些实施例，基于前述方案，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数；或者在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。12.根据本公开的一些实施例，基于前述方案，在所述响应于目标页面的颜色调整指令之前，所述方法还包括：配置所述全局配色参数文件；基于所述全局配色参数文件配置所述目标页面的基础配色文件。13.根据本公开的一些实施例，基于前述方案，所述配置所述全局配色参数文件，包括：设置配色参数；其中，所述配色参数包括可视色和/或中性色；创建所述配色参数对应的色块，并配置所述色块对应的默认色值。14.根据本公开的一些实施例，基于前述方案，在所述配色参数为可视色时，所述创建所述配色参数对应的色块，并配置所述色块对应的默认色值，包括：配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。15.根据本公开的一些实施例，基于前述方案，所述可视色包括主色和/或辅助色，所述辅助色包括提醒辅助色、成功辅助色、警告辅助色、出错辅助色、失败辅助色中的一种或多种。16.根据本公开的一些实施例，基于前述方案，所述中性色包括标题色、正文色、次要色、边框色、失效色、表头色、卡片色、背景色、分割线、白色、黑色、阴影色中的一种或多种。17.根据本公开的一些实施例，基于前述方案，所述基于所述全局配色参数文件配置所述目标页面的基础配色文件，包括：确定所述目标页面中页面元素对应的配色场景；从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。18.根据本公开的一些实施例，基于前述方案，所述方法还包括：预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。19.根据本公开实施例的第二方面，提供了一种页面颜色调整装置，包括：响应模块，用于响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、全局配色参数文件以及所述目标页面的基础配色文件；更新模块，用于基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；确定模块，用于根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；展示模块，用于利用所述目标配色文件进行所述目标页面的页面展示。20.根据本公开实施例的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述实施例中的页面颜色调整方法。21.根据本公开实施例的第四方面，提供了一种电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中的页面颜色调整方法。22.本公开示例性实施例可以具有以下部分或全部有益效果：23.在本公开的一些实施例所提供的技术方案中，在接收到目标页面的颜色调整指令后，首先根据颜色调整指令对应的目标配色参数的目标色值对全局配色参数文件中色块的色值得到目标全局配色参数文件，然后根据目标全局配色参数文件确定基础配色文件中取色变量对应的色值得到目标配色文件，最后利用目标配色文件进行目标页面的页面展示。基于上述方法，通过预先构建包含取色变量的页面的基础配色文件，然后在进行颜色调整时能够自动确定取色变量对应的色值，一方面是对全局配色参数文件进行小范围的更新，相较于将配色文件的开发代码中的色值进行更改，能够大大减少页面颜色调整时的工程量，快速进行页面颜色的适应性调整，提高调整效率；另一方面，基于统一的取色变量配置的页面配色文件来进行调整使得开发人员的页面颜色配置和设计人员的页面颜色设计分隔开来，使双方互不干扰，减少沟通成本，同时也能降低后期的维保成本。24.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。附图说明25.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：26.图1示意性示出本公开示例性实施例中一种页面颜色调整方法的流程示意图；27.图2示意性示出本公开示例性实施例中一种更新色值方法的流程示意图；28.图3示意性示出本公开示例性实施例中一种确定取色变量对应色值方法的流程示意图；29.图4示意性示出本公开示例性实施例中一种配置全局配色参数文件方法的流程示意图；30.图5示意性示出本公开示例性实施例中一种配置基础配色文件方法的流程示意图；31.图6示意性示出本公开示例性实施例中一种浅色模式下取色系统的界面示意图；32.图7示意性示出本公开示例性实施例中一种深色模式下取色系统的界面示意图；33.图8示意性示出本公开示例性实施例中一种页面元素与取色变量之间对应关系的示意图；34.图9示意性示出本公开示例性实施例中一种页面颜色调整装置的组成示意图；35.图10示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图；36.图11示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。具体实施方式37.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。38.此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。39.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。40.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。41.以下对本公开实施例的技术方案的实现细节进行详细阐述。42.图1示意性示出本公开示例性实施例中一种页面颜色调整方法的流程示意图。如图1所示，该页面颜色调整方法包括步骤s101至步骤s104：43.步骤s101，响应于目标页面的颜色调整指令，获取全局配色参数文件、所述颜色调整指令对应的目标配色参数的目标色值以及所述目标页面的基础配色文件；44.步骤s102，基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；45.步骤s103，根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；46.步骤s104，利用所述目标配色文件进行所述目标页面的页面展示。47.在本公开的一些实施例所提供的技术方案中，在接收到目标页面的颜色调整指令后，首先根据颜色调整指令对应的目标配色参数的目标色值对全局配色参数文件中色块的色值得到目标全局配色参数文件，然后根据目标全局配色参数文件确定基础配色文件中取色变量对应的色值得到目标配色文件，最后利用目标配色文件进行目标页面的页面展示。基于上述方法，通过预先构建包含取色变量的页面的基础配色文件，然后在进行颜色调整时能够自动确定取色变量对应的色值，一方面是对全局配色参数文件进行小范围的更新，相较于将配色文件的开发代码中的色值进行更改，能够大大减少页面颜色调整时的工程量，快速进行页面颜色的适应性调整，提高调整效率；另一方面，基于统一的取色变量配置的页面配色文件来进行调整使得开发人员的页面颜色配置和设计人员的页面颜色设计分隔开来，使双方互不干扰，减少沟通成本，同时也能降低后期的维保成本。48.下面，将结合附图及实施例对本示例实施方式中的页面颜色调整方法的各个步骤进行更详细的说明。49.在步骤s101中，响应于目标页面的颜色调整指令，获取全局配色参数文件、所述颜色调整指令对应的目标配色参数的目标色值以及所述目标页面的基础配色文件；50.在本公开的一个实施例中，如果需要进行页面的颜色调整时，需要获取颜色调整指令对应的目标配色参数的目标色值。51.其中，目标配色参数是基于预先配置的全局配色参数(globe.less)文件来说的，全局配色参数文件中定义了多种配色参数，在接收到颜色调整指令后，需要识别该指令调整的是全局配色参数文件中的何种配色参数，以及调整后的色值是如何。52.色值是颜色的表现形式，例如颜色代码表，#0000ff(blue)、#00ff00(green)等，也可以采用rgb表示，例如0,0,255(blue)、0,255,0(green)等。53.举例来说，不同品牌的系统页面需要与该品牌的品牌色相呼应，当品牌色更换时，则系统页面的配色也需要对应修改，那么在响应于颜色调整指令之后，需要获取目标配色参数，在全局配色参数文件中对应于“主色”，色值为更换后的品牌色。54.还可例如，一个页面系统在系统运行成功时，提示框会显示为绿色，但现在需要将绿色从原本的green1(#00ff00)调整为green2(#00ee00)，那么对应的目标配色参数在全局配色参数文件中对应于“成功辅助色”，目标色值为#00ee00。55.在本公开的一个实施例中，在进行页面的颜色调整时，还需要获取该目标页面的基础配色文件。56.基础配色(globe.css)文件是预先基于全局配色参数文件配置的代码文件。其中在对各页面元素对应的颜色描述时，区别于传统配色文件中直接使用颜色原值进行代码开发，而是使用具有业务含义的取色变量代替直接使用颜色原值。57.取色变量是统一设置的取色接口，可以将页面元素映射到全局配色参数文件中的色块，从而取到该色块对应的色值。取色变量可以采用var关键字，可在程序代码中任何地方使用以获取色值。58.举例来说，原本在css中描述色值的方式为：color:‘#ff0000’，替换为color:var(‑‑error)；js中为：constcolor＝‘#ff0000’，替换为constcolor＝var(‘‑‑primary-5’)，其中error、primary-5均为全局配色参数文件中的色块，在全局配色参数文件中error以及primary-5色块对应有具体的色值。59.在本公开的一个实施例中，在进行页面的颜色调整时，还需要获取该目标页面的全局配色参数文件。60.需要说明的是，全局配色参数文件可以是设计人员开发的一套具有合理配色的公用的参数文件，多个页面共享同一个全局配色参数文件作为取色模板。61.全局配色参数文件中设置了许多配色参数，不同配色参数都有其对应的色块，并且还配置了色块对应色值的计算逻辑，进而确定最终的色值。62.例如有些页面配色需要色彩风格统一，就会在使用色彩时采用同一个色阶中的不同阶层的颜色，那么这样的配色参数就是可视色，其对应的色块就是一条色阶板中连续的色块，色阶板对应的目标色变化，各色块的色值也会发生变化。还例如，有些页面元素的颜色相对固定，例如标题的颜色、正文的颜色，通常会采用黑白系列的中性色，这样的配色参数没有目标色，需要预设色块对应的色值。63.在步骤s102中，基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件。64.在本公开的一个实施例中，全局配色参数文件是目标页面取色的基础文件，因此，维护好全局配色参数文件中色块的色值，便可以实现目标页面颜色的自适应调整。65.图2示意性示出本公开示例性实施例中一种更新色值方法的流程示意图。参考图2所示，所述基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值，包括：66.步骤s201，确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；67.步骤s202，基于所述目标色值更新所述目标色块的色值。68.具体地，在步骤s201中，首先需要根据目标配色参数来确定需要调整颜色的目标色块。在全局配色参数文件中设置了许多配色参数，每一配色参数都其对应的色块，因此将目标配色参数对应的所有色块都确定为目标色块。69.在步骤s202中，由于不同配色参数对应的色块不同，所以不同配色参数的色值更新方法也存在区别。70.具体地，在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；71.举例来说，以系统页面更换品牌色为blue(#0000ff)为例，其对应的目标配色参数为“主色”，“主色”是可视色，对应了主色色阶板中的多个色块，包括primary-1、primary-2、…、primary-10等色块。可以将目标色值(#0000ff)作为主色色阶板的目标色，进行算法色阶运算，进而实现对主色色块primary-1至primary-10色值的更新。72.其中，算法色阶是一种色阶运算方法，输入一个目标色进行色阶运算，即可得到色阶板中各阶数对应的色块的色值，色阶通常来说可以分为10级，颜色由浅至深或由深至浅一次递进，当然也可以设置阶数例如20色阶、30色阶等。73.具体地，在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。74.举例来说，如果想要将系统页面中的标题字的颜色改为dimgrey(#696969)，确定目标配色参数为“标题色”，“标题色”是中性色，对应title色块，则将目标色值#696969替换原来title色块的色值以完成完成更新。75.基于上述方法，设计人员预先设计好一些配色科学合理的色块用于后续的取色，能够避免开发人员随意取色造成的页面过于花哨，提升用户的页面阅读体验。76.在步骤s103中，根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；77.具体地，基础配色文件中取色变量确定了该页面中各页面元素与其依赖的全局配色参数文件中色块之间的映射关系，通过调用取色变量可以将页面元素映射到全局配色参数文件中的色块，从而从目标全局配色参数文件中取到该色块对应的色值。78.图3示意性示出本公开示例性实施例中一种确定取色变量对应色值方法的流程示意图。参考图3所示，所述根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值，包括：79.步骤s301，确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；80.步骤s302，提取所述目标取色变量对应的目标色块信息；81.步骤s303，从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。82.具体来说，在步骤s301中，当需要进行页面调整后，首先可以确定需要调整颜色的目标取色变量。目标取色变量可以根据目标配色参数来确定，之前已经介绍配色参数主要分成可视色和中性色两大类。若目标配色参数为可视色，那么可能会涉及多个目标取色变量，例如当改变主色primary时，所有引用primary的取色变量都是目标取色变量，例如var(‑‑primary-1)、var(‑‑primary-5)等取色变量都需要重新确认色值；而如果目标配色参数为中性色，那么可能涉及该中性色对应的某一个目标取色变量，例如当改变标题色title时，只需要重新确认var(title)的色值。83.在步骤s302中，不同目标配色参数，其对应目标取色变量的目标色块信息也有所区别。84.需要说明的是取色变量时基于色块信息创建的，因此可以根据取色变量得到对应的色块信息。具体地，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数。85.由于可视色是具有色阶的，所以目标色块的信息不仅包括对应的可视色名称，还包括在其色阶中的阶数。举例来说，var(‑‑primary-5)中包括了可视色名称“primary”以及色阶阶数“5”，即对应于primary色阶板中的第5阶色块。86.具体地，在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。87.不同的中性色对应不同的色块，因在在目标配色参数为中性色时，其对应的目标色块信息可以包括中性色名称。例如var(title)中包括中性色名称“title”，对应于“title”色块。88.在步骤s303中，从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。89.由于目标全局配色参数文件中已经将色块的色值进行了更新，所以步骤s303中根据目标色块信息查找对应的色块即可得到目标取色变量对应的色值，至此得到用于页面展示的目标配色文件。90.基于上述方法，在页面配色开发时用具有业务含义的取色变量代替使用颜色原值，统一设置取色接口，一方面当原型配色风格有变动时配置的基础配色文件的工程代码不需要进行改动，可谓一劳永逸，提高页面颜色调整的效率，降低后期维护成本；另一方面将设计人员进行配色设计与开发人员代码开发分隔开来，配色的逻辑由设计人员进行制定与管控，开发人员在开发过程中到此系统中获取相应场景下的配色即，两者互不影响也能实现页面的颜色调整，对开发人员来说也不需要纠结取何种色值，开发效率更高，对设计人员来说可以在不通知开发人员的前提下也能随时调整配色参数，减少人员的沟通成本，。91.在步骤s104中，利用所述目标配色文件进行所述目标页面的页面展示。92.具体而言，目标配色文件与传统的配色文件相当，其中包含可该目标页面各页面元素的具体的色值，按照色值进行页面展示，即可完成对页面颜色的调整。93.基于上述方法，不论页面颜色如何调整，都只需要预先配置一份包括取色变量的基础配色文件，其中包括了各页面元素与其依赖的全局配色参数文件中色块之间的映射关系，在颜色调整时仅需要使用同一套取色系统的全局配色参数文件进行色块色值的更新得到目标全局配色参数文件，便可根据目标全局配色参数文件和预先配置的基础配色文件进行取色变量的赋值最终实现页面的颜色调整。所以在页面调整时仅需要维护全局配色参数文件中色块的色值，大大减少了页面调整的代码开发工作量。94.在本公开的一个实施例中，在所述响应于目标页面的颜色调整指令之前，所述方法还包括：配置所述全局配色参数文件；基于所述全局配色参数文件配置所述目标页面的基础配色文件。95.图4示意性示出本公开示例性实施例中一种配置全局配色参数文件方法的流程示意图。参考图4所示，所述配置所述全局配色参数文件，包括：96.步骤s401，设置配色参数；其中，所述配色参数包括可视色和/或中性色；97.步骤s402，创建所述配色参数对应的色块，并配置所述色块对应的默认色值。98.设计人员可以根据web前端中后台管理系统特征，对系统配色发方案进行梳理枚举出基础的配色参数。99.在本公开的一个实施例中，配色参数可以包括可视色，可视色即通常意义上的除黑白灰之外的彩色，能够体现页面的颜色风格。100.可视色可以包括主色，即对应整个页面的颜色风格。例如不同品牌有不同的品牌色，“京东”为红色，“百度”为蓝色等等，还例如不同页面主题有不同的主体颜色，像护眼主题风格为绿色，或者梦幻主题主要为紫色等等。101.可视色还可以包括辅助色，辅助色大多以功能为主，代表了明确的信息以及状态，比如在进行系统运行成功、出错、提醒等情况时，会采用常见的颜色表示，比如运行成功显示为绿色、运行出错显示为红色等等。102.具体地，辅助色例如提醒辅助色(info)、成功辅助色(success)、警告辅助色(warning)、出错辅助色(error)、失败辅助色(debug)等。103.在辅助色的设计中，色板的运用原则上优先保证准确性，考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体，帮助有色盲色弱的人群也能在系统可视化界面中获取洞见。104.在本公开的一个实施例中，在配色参数为可视色时，所述创建所述配色参数对应的色块，并配置所述色块对应的默认色值，包括：配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。105.具体而言，可视色中各主色与辅助色都可以使用同一套算法公式得到对应的色阶板，进而从色阶板中获得对应的次要色来进行合理配色。因此，在配置可视色的色块时，可以简化为配置该可视色色阶板对应的目标色。106.表1为本公开示例性实施例中一种可视色与默认色阶值的映射表。如表1所示，设计人员可以根据使用习惯配置各可视色对应目标色的默认色阶值。107.表1可视色与目标色值的映射表108.可视色primaryinfosuccesswarningerrordebug默认色阶值#2b67ff#5470c6#91cc75#fac858#e66#7c8ca7109.各可视色根据其对应的色值即可计算出可视色色阶板得到各色块对应的默认色值。110.在本公开的一个实施例中，除了这些常见的辅助色，还可以包括图例辅助色。111.例如在饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等场景示意时，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性。这时辅助色可以采用另一种可视化图例中常见的色板，即分类色板来代替色阶板。112.常见的一套分类色板中包括基础10色，例如geekblue、cyan、yellow、red、daybreakblue、green、orange、purple、magenta、grey。113.还例如在表示排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等场景时，可以采用顺序色板。顺序色板一般使用同一或近邻色相，通过透明度或饱和度的简便，常用来表示同一事物中的数值大小或梯度变化。单一色相渐变称之为单色顺序色板，人眼可识别的色彩数量为5～7各，为保证信息的最佳识别度，尽可能的克制使用颜色的数量。114.在本公开的一个实施例中，配色参数可以包括中性色，中性色指白色、黑色和由白色黑色调和形成的各种深浅不同的灰色。可以按照一定的变化规律排成一个系列，色度学上称此为黑白系列，合理的选择中性色能够零页面信息具有良好的主次关系，有助于提升阅读体验。115.具体地，中性色例如标题色(title)、正文色(content)、次要色(subcontent)、边框色(border)、失效色(disabled)、表头色(tableheader)、卡片色(carbackground)、背景色(background)、分割线(dvider)、白色(white)、黑色(black)、阴影色(shadowcolor)等。116.表2为本公开示例性实施例中一种中性色与默认色值的映射表。如表2所示，设计人员配置的各中性色对应的默认色值。117.表2中性色与默认色值的映射表118.中性色titlecontentsubcontentborder默认色值rgba(0.0.0.0.85)rgba(0.0.0.0.65)rgba(0.0.0.0.45)rgba(0.0.0.0.15)中性色disabledtableheadercarbackgroundbackground默认色值rgba(0.0.0.0.06)#fafafa#fff#f3f6f9中性色dviderwhiteblackshadowcolor默认色值rgba(0.0.0.0.1)#ffffff#000000rgba(0.0.0.0.2)119.需要说明的是，通常页面可以采用浅色和深色两种模式，因此可以配置两种模式下的全局配色参数文件，在实际使用过程中根据需要选择对应的浅色或深色的全局配色参数文件生成目标全局配色参数文件，也可以只设计一种模式的全局配色参数文件，当目标页面为不同的模式，将全局配色参数文件进行转变即可。120.在全局配色参数文件配置完成后，得到globe.less文件，其中包括了许多色块，以及各色块对应的色值，形式如下：121.globe.less122.‑‑info1:色值1123.‑‑info2:色值2124.‑‑info3:色值3125.…126.图5示意性示出本公开示例性实施例中一种配置基础配色文件方法的流程示意图。参考图5所示，所述基于所述全局配色参数文件配置所述目标页面的基础配色文件，包括：127.步骤s501，确定所述目标页面中页面元素对应的配色场景；128.步骤s502，从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；129.步骤s503，基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。130.具体来说，在步骤s501中，在进行页面中各页面元素颜色的取色时，首先需要确定该页面元素对应的配色场景，即该页面元素拟定使用什么颜色。例如该页面元素的配色场景为文字标题、或者是目录配景色。131.在步骤s502中，根据页面元素的配色场景从全局配色参数文件中查询对应的色块，得到色块信息以创建取色变量。132.在实际操作过程中，为了方便创建取色变量，根据全局配色参数文件生成取色系统并将各色块按色值进行显示，开发人员从取色系统中查找对应的色块，鼠标点击该色块则取色系统自动提取该色块的色块信息创建取色变量，并完成变量复制，系统提示“已复制：var(xxx)”表示该取色变量已复制，然后将复制的取色变量贴粘到程序代码所使用的位置以进行基础配色文件的开发。133.在实际操作过程中，由系统框架加载程序将lessjs变量按照相应的计算公式转换成css中的var变量，最终形成.css文件作为该页面的基础配色文件。134.图6示意性示出本公开示例性实施例中一种浅色模式下取色系统的界面示意图。参考图6所示，取色系统将各色块按照浅色模式下的色值进行显示。135.例如取色系统中61区域展示了关于可视色中“品牌色”，即“主色”的相关信息。其中611为预设的取色规则，也就是预设的配色场景与色块之间的映射关系，例如品牌色使用primary色，即primary-6色块，品牌selectedbackground使用subprimary，即primary-2色块，品牌hover使用lightprimary，即primary-5色块，品牌active使用darkprimary，即primary-7色块。136.取色系统中62区域展示了关于可视色中“辅助色”的相关信息。其中包含了多个621辅助色例如info色、success色、warning色、error色、debug色，每一种辅助色其下对应了色阶板中的不同色块，图中为省略显示的色阶中的三个阶数的色块，事实上辅助色和品牌色类似，都可以具有10个色阶。137.取色系统中63区域展示了“中性色”的相关信息。其中包括多个中性色块631，例如title、content、subcontent、border、disabled、tableheader、carbackground、background、dvider、white、black、shadowcolor，并且各色块具有相应的色值。138.取色系统中64区域还展示了图例辅助色的相关信息。其中641展示了分类色板中常见的基础10色的色块，包括geekblue、cyan、yellow、red、daybreakblue、green、orange、purple、magenta、grey，642、643和644还分别显示了三种使用图例辅助色的用法示例，642为应用在饼状图中，643为应用于柱状图中，644为应用于消息界别或规则类型的显示。645为顺序色板的色块，不同颜色下顺序色板645不同，646还显示了顺序色板的用法示例。139.取色系统中还包括65区域，即颜色调整区域，其中651区域为选择目标配色参数区域，652区域为选择目标色值区域。在65区域选择目标配色参数和目标色值即可完成该取色系统中各色块的色值更新，进而用于页面的基础配色文件中取色变量色值的确定。140.图7示意性示出本公开示例性实施例中一种深色模式下取色系统的界面示意图。参考图7所示，展示了深色模式下取色系统的各色块。与图6类似，显示了包括“主色”以及“中性色”等的色块信息，两者的区别仅在于不同模式下对应色块的色值不同，例如浅色模式下背景为白色，文字为黑色，而在浅色模式背景为黑色，文字为白色，但取色的变量和取色逻辑都是完全相同的。141.在确定配色场景时，可以查看该页面有没有设计人员预先开发的页面原型图，页面原型图是设计人员与开发人员进行沟通的产物，预先设计好了各元素配色场景以及对应的配色方案，开发人员可以按照功能原型图还原配色方案来查询对应的色块。142.在步骤s503中，和传统的配色文件开发相似，只是在配置页面元素的色值时需要从取色系统中复制对应的变量。143.图8示意性示出本公开示例性实施例中一种页面元素与取色变量之间对应关系的示意图。参考图8所示，其中解释了该页面中每个页面元素所对应的取色变量。144.例如页面左侧导航栏，其配色场景为目录背景色，对应tableheader色块，所以取色变量var(‑‑tableheader)；页面右侧的背景配色场景为页面背景色，对应black色块，取色变量为var(‑‑black)；还例如不同文字对应的取色变量不同，有var(‑‑content)、var(‑‑white)、var(‑‑subcontent)等等。145.当然，图8所示的应用场景仅是示例性的公开，在不同的应用场景下，需要配置的元素以及各元素对应的取色变量有所不同，基于本公开的发明构思延伸出的配色结果也应当属于本公开保护的范围。146.在本公开的一个实施例中，所述方法还包括：预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。147.具体地，设计人员为了规范和统一页面的取色规则，可以预先设定一些配色场景和色块之间的映射关系，来方便开发人员进行取色。148.举例来说，通常品牌色可以选择primary色阶板由浅至深的第6阶色，即“品牌色”对应“primary-6”色块。149.还可以是一些通用的取色规则，例如配色场景与色阶阶数的映射关系。举例来说，dom元素的background常对应于色阶板中的第2阶色，可以以sub前缀标记，例如subprimary，即primary-2，或者是subinfo，即info-2；还比如hover常对应于色阶板中的第5阶色，前缀以light标记；或者active常对应于色阶板中的第7阶色，前缀以dark标记。因此，以配色场景为该元素需要使用“品牌hover”色为例来说，则查询到与全局配色参数文件中“primary-5”色块对应。150.基于上述方法，通过映射关系来设计合理的配色方案，规范取色逻辑，不仅能够快速定位对应的色块，最终得到的页面颜色风格也能够统一，有利于提升用户的阅读体验。151.在本公开的一个实施例中，在js中使用，需要引入工具包，并将var函数设置到window对象上，做为全局函数。这样能够避免声名的变量不能在js代码块、.css文件、dom元素style属性、vue的template块中使用的缺点，同时浏览器也可以直接识别var变量，而不需要webpack将定义的变量编译成最终具体的色值。152.图9示意性示出本公开示例性实施例中一种页面颜色调整装置的组成示意图，如图9所示，该页面颜色调整装置900可以包括响应模块901、更新模块902、确定模块903以及展示模块904。其中：153.响应模块901，用于响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、全局配色参数文件以及所述目标页面的基础配色文件；154.更新模块902，用于基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；155.确定模块903，用于根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；156.展示模块904，用于利用所述目标配色文件进行所述目标页面的页面展示。157.根据本公开的示例性实施例，所述更新模块902用于确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；基于所述目标色值更新所述目标色块的色值。158.根据本公开的示例性实施例，所述更新模块1第一更新单元用于002包括第一更新单元和第二更新单元，所述在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；所述第二更新单元用于在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。159.根据本公开的示例性实施例，所述确定模块903用于确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；提取所述目标取色变量对应的目标色块信息；从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。160.根据本公开的示例性实施例，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数；或者在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。161.根据本公开的示例性实施例，所述页面颜色调整装置900还包括参数配置单元和页面开发单元，所述参数配置单元用于配置所述全局配色参数文件；所述页面开发单元用于基于所述全局配色参数文件配置所述目标页面的基础配色文件。162.根据本公开的示例性实施例，所述参数配置单元用于设置配色参数；其中，所述配色参数包括可视色和/或中性色；创建所述配色参数对应的色块，并配置所述色块对应的默认色值。163.根据本公开的示例性实施例，在所述配色参数为可视色时，所述参数配置单元用于配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。164.根据本公开的示例性实施例，所述可视色包括主色和/或辅助色，所述辅助色包括提醒辅助色、成功辅助色、警告辅助色、出错辅助色、失败辅助色中的一种或多种。165.根据本公开的示例性实施例，所述中性色包括标题色、正文色、次要色、边框色、失效色、表头色、卡片色、背景色、分割线、白色、黑色、阴影色中的一种或多种。166.根据本公开的示例性实施例，所述页面开发单元用于确定所述目标页面中页面元素对应的配色场景；从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。167.根据本公开的示例性实施例，所述参数配置单元还包括创建映射单元，所述创建映射单元用于预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。168.上述的页面颜色调整装置900中各模块的具体细节已经在对应的页面颜色调整方法中进行了详细的描述，因此此处不再赘述。169.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。170.在本公开的示例性实施例中，还提供了一种能够实现上述方法的存储介质。图10示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图，如图10所示，描述了根据本公开的实施方式的用于实现上述方法的程序产品1000，其可以采用便携式紧凑盘只读存储器(cd-rom)并包括程序代码，并可以在终端设备，例如手机上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。171.在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。图11示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。172.需要说明的是，图11示出的电子设备的计算机系统1100仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。173.如图11所示，计算机系统1100包括中央处理单元(centralprocessingunit，cpu)1101，其可以根据存储在只读存储器(read-onlymemory，rom)1102中的程序或者从存储部分1108加载到随机访问存储器(randomaccessmemory，ram)1103中的程序而执行各种适当的动作和处理。在ram1103中，还存储有系统操作所需的各种程序和数据。cpu1101、rom1102以及ram1103通过总线1104彼此相连。输入/输出(input/output，i/o)接口1105也连接至总线1104。174.以下部件连接至i/o接口1105：包括键盘、鼠标等的输入部分1106；包括诸如阴极射线管(cathoderaytube，crt)、液晶显示器(liquidcrystaldisplay，lcd)等以及扬声器等的输出部分1107；包括硬盘等的存储部分1108；以及包括诸如lan(localareanetwork，局域网)卡、调制解调器等的网络接口卡的通信部分1109。通信部分1109经由诸如因特网的网络执行通信处理。驱动器1110也根据需要连接至i/o接口1105。可拆卸介质1111，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1110上，以便于从其上读出的计算机程序根据需要被安装入存储部分1108。175.特别地，根据本公开的实施例，下文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1109从网络上被下载和安装，和/或从可拆卸介质1111被安装。在该计算机程序被中央处理单元(cpu)1101执行时，执行本公开的系统中限定的各种功能。176.需要说明的是，本公开实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasableprogrammablereadonlymemory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compactdiscread-onlymemory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。177.附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。178.描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。179.作为另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。180.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。181.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施方式的方法。182.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本
技术领域：
：中的公知常识或惯用技术手段。183.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。当前第1页12当前第1页12
背景技术：
：：2.当前在web前端开发过程中，进行页面配色设计时普遍所使用的方式是在已有的前端ui库或工程模板的基础上进行开发功能，或者是用代码还原设计人员给出的页面功能原型图。3.不论是使用业界主流的前端工程模板或者还原设计人员的原型，在颜色设置与获取时通常是以变量表或色值的方式提供给开发人员使用。但不同的开发人员在人工取色时可能存在颜色深浅偏差或者理解偏差，系统页面的颜色过于花哨；并且由于这些方式都是将页面元素的色值写好在配色文件中，后续再进行主题颜色变更时需要将全部的色值进行变更，工程量巨大。4.需要说明的是，在上述
背景技术：
：部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。技术实现要素：5.本公开的目的在于提供一种页面颜色调整方法、页面颜色调整装置、存储介质及电子设备，旨在解决页面颜色调整时工程量大、维护成本高等问题。6.本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。7.根据本公开实施例的一方面，提供了一种页面颜色调整方法，包括：响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、所述目标页面的基础配色文件以及全局配色参数文件；基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；利用所述目标配色文件进行所述目标页面的页面展示。8.根据本公开的一些实施例，基于前述方案，所述基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值，包括：确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；基于所述目标色值更新所述目标色块的色值。9.根据本公开的一些实施例，基于前述方案，所述基于所述目标色值更新所述目标色块的色值，包括：在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。10.根据本公开的一些实施例，基于前述方案，所述根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值，包括：确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；提取所述目标取色变量对应的目标色块信息；从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。11.根据本公开的一些实施例，基于前述方案，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数；或者在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。12.根据本公开的一些实施例，基于前述方案，在所述响应于目标页面的颜色调整指令之前，所述方法还包括：配置所述全局配色参数文件；基于所述全局配色参数文件配置所述目标页面的基础配色文件。13.根据本公开的一些实施例，基于前述方案，所述配置所述全局配色参数文件，包括：设置配色参数；其中，所述配色参数包括可视色和/或中性色；创建所述配色参数对应的色块，并配置所述色块对应的默认色值。14.根据本公开的一些实施例，基于前述方案，在所述配色参数为可视色时，所述创建所述配色参数对应的色块，并配置所述色块对应的默认色值，包括：配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。15.根据本公开的一些实施例，基于前述方案，所述可视色包括主色和/或辅助色，所述辅助色包括提醒辅助色、成功辅助色、警告辅助色、出错辅助色、失败辅助色中的一种或多种。16.根据本公开的一些实施例，基于前述方案，所述中性色包括标题色、正文色、次要色、边框色、失效色、表头色、卡片色、背景色、分割线、白色、黑色、阴影色中的一种或多种。17.根据本公开的一些实施例，基于前述方案，所述基于所述全局配色参数文件配置所述目标页面的基础配色文件，包括：确定所述目标页面中页面元素对应的配色场景；从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。18.根据本公开的一些实施例，基于前述方案，所述方法还包括：预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。19.根据本公开实施例的第二方面，提供了一种页面颜色调整装置，包括：响应模块，用于响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、全局配色参数文件以及所述目标页面的基础配色文件；更新模块，用于基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；确定模块，用于根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；展示模块，用于利用所述目标配色文件进行所述目标页面的页面展示。20.根据本公开实施例的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述实施例中的页面颜色调整方法。21.根据本公开实施例的第四方面，提供了一种电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中的页面颜色调整方法。22.本公开示例性实施例可以具有以下部分或全部有益效果：23.在本公开的一些实施例所提供的技术方案中，在接收到目标页面的颜色调整指令后，首先根据颜色调整指令对应的目标配色参数的目标色值对全局配色参数文件中色块的色值得到目标全局配色参数文件，然后根据目标全局配色参数文件确定基础配色文件中取色变量对应的色值得到目标配色文件，最后利用目标配色文件进行目标页面的页面展示。基于上述方法，通过预先构建包含取色变量的页面的基础配色文件，然后在进行颜色调整时能够自动确定取色变量对应的色值，一方面是对全局配色参数文件进行小范围的更新，相较于将配色文件的开发代码中的色值进行更改，能够大大减少页面颜色调整时的工程量，快速进行页面颜色的适应性调整，提高调整效率；另一方面，基于统一的取色变量配置的页面配色文件来进行调整使得开发人员的页面颜色配置和设计人员的页面颜色设计分隔开来，使双方互不干扰，减少沟通成本，同时也能降低后期的维保成本。24.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。附图说明25.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：26.图1示意性示出本公开示例性实施例中一种页面颜色调整方法的流程示意图；27.图2示意性示出本公开示例性实施例中一种更新色值方法的流程示意图；28.图3示意性示出本公开示例性实施例中一种确定取色变量对应色值方法的流程示意图；29.图4示意性示出本公开示例性实施例中一种配置全局配色参数文件方法的流程示意图；30.图5示意性示出本公开示例性实施例中一种配置基础配色文件方法的流程示意图；31.图6示意性示出本公开示例性实施例中一种浅色模式下取色系统的界面示意图；32.图7示意性示出本公开示例性实施例中一种深色模式下取色系统的界面示意图；33.图8示意性示出本公开示例性实施例中一种页面元素与取色变量之间对应关系的示意图；34.图9示意性示出本公开示例性实施例中一种页面颜色调整装置的组成示意图；35.图10示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图；36.图11示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。具体实施方式37.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。38.此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。39.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。40.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。41.以下对本公开实施例的技术方案的实现细节进行详细阐述。42.图1示意性示出本公开示例性实施例中一种页面颜色调整方法的流程示意图。如图1所示，该页面颜色调整方法包括步骤s101至步骤s104：43.步骤s101，响应于目标页面的颜色调整指令，获取全局配色参数文件、所述颜色调整指令对应的目标配色参数的目标色值以及所述目标页面的基础配色文件；44.步骤s102，基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；45.步骤s103，根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；46.步骤s104，利用所述目标配色文件进行所述目标页面的页面展示。47.在本公开的一些实施例所提供的技术方案中，在接收到目标页面的颜色调整指令后，首先根据颜色调整指令对应的目标配色参数的目标色值对全局配色参数文件中色块的色值得到目标全局配色参数文件，然后根据目标全局配色参数文件确定基础配色文件中取色变量对应的色值得到目标配色文件，最后利用目标配色文件进行目标页面的页面展示。基于上述方法，通过预先构建包含取色变量的页面的基础配色文件，然后在进行颜色调整时能够自动确定取色变量对应的色值，一方面是对全局配色参数文件进行小范围的更新，相较于将配色文件的开发代码中的色值进行更改，能够大大减少页面颜色调整时的工程量，快速进行页面颜色的适应性调整，提高调整效率；另一方面，基于统一的取色变量配置的页面配色文件来进行调整使得开发人员的页面颜色配置和设计人员的页面颜色设计分隔开来，使双方互不干扰，减少沟通成本，同时也能降低后期的维保成本。48.下面，将结合附图及实施例对本示例实施方式中的页面颜色调整方法的各个步骤进行更详细的说明。49.在步骤s101中，响应于目标页面的颜色调整指令，获取全局配色参数文件、所述颜色调整指令对应的目标配色参数的目标色值以及所述目标页面的基础配色文件；50.在本公开的一个实施例中，如果需要进行页面的颜色调整时，需要获取颜色调整指令对应的目标配色参数的目标色值。51.其中，目标配色参数是基于预先配置的全局配色参数(globe.less)文件来说的，全局配色参数文件中定义了多种配色参数，在接收到颜色调整指令后，需要识别该指令调整的是全局配色参数文件中的何种配色参数，以及调整后的色值是如何。52.色值是颜色的表现形式，例如颜色代码表，#0000ff(blue)、#00ff00(green)等，也可以采用rgb表示，例如0,0,255(blue)、0,255,0(green)等。53.举例来说，不同品牌的系统页面需要与该品牌的品牌色相呼应，当品牌色更换时，则系统页面的配色也需要对应修改，那么在响应于颜色调整指令之后，需要获取目标配色参数，在全局配色参数文件中对应于“主色”，色值为更换后的品牌色。54.还可例如，一个页面系统在系统运行成功时，提示框会显示为绿色，但现在需要将绿色从原本的green1(#00ff00)调整为green2(#00ee00)，那么对应的目标配色参数在全局配色参数文件中对应于“成功辅助色”，目标色值为#00ee00。55.在本公开的一个实施例中，在进行页面的颜色调整时，还需要获取该目标页面的基础配色文件。56.基础配色(globe.css)文件是预先基于全局配色参数文件配置的代码文件。其中在对各页面元素对应的颜色描述时，区别于传统配色文件中直接使用颜色原值进行代码开发，而是使用具有业务含义的取色变量代替直接使用颜色原值。57.取色变量是统一设置的取色接口，可以将页面元素映射到全局配色参数文件中的色块，从而取到该色块对应的色值。取色变量可以采用var关键字，可在程序代码中任何地方使用以获取色值。58.举例来说，原本在css中描述色值的方式为：color:‘#ff0000’，替换为color:var(‑‑error)；js中为：constcolor＝‘#ff0000’，替换为constcolor＝var(‘‑‑primary-5’)，其中error、primary-5均为全局配色参数文件中的色块，在全局配色参数文件中error以及primary-5色块对应有具体的色值。59.在本公开的一个实施例中，在进行页面的颜色调整时，还需要获取该目标页面的全局配色参数文件。60.需要说明的是，全局配色参数文件可以是设计人员开发的一套具有合理配色的公用的参数文件，多个页面共享同一个全局配色参数文件作为取色模板。61.全局配色参数文件中设置了许多配色参数，不同配色参数都有其对应的色块，并且还配置了色块对应色值的计算逻辑，进而确定最终的色值。62.例如有些页面配色需要色彩风格统一，就会在使用色彩时采用同一个色阶中的不同阶层的颜色，那么这样的配色参数就是可视色，其对应的色块就是一条色阶板中连续的色块，色阶板对应的目标色变化，各色块的色值也会发生变化。还例如，有些页面元素的颜色相对固定，例如标题的颜色、正文的颜色，通常会采用黑白系列的中性色，这样的配色参数没有目标色，需要预设色块对应的色值。63.在步骤s102中，基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件。64.在本公开的一个实施例中，全局配色参数文件是目标页面取色的基础文件，因此，维护好全局配色参数文件中色块的色值，便可以实现目标页面颜色的自适应调整。65.图2示意性示出本公开示例性实施例中一种更新色值方法的流程示意图。参考图2所示，所述基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值，包括：66.步骤s201，确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；67.步骤s202，基于所述目标色值更新所述目标色块的色值。68.具体地，在步骤s201中，首先需要根据目标配色参数来确定需要调整颜色的目标色块。在全局配色参数文件中设置了许多配色参数，每一配色参数都其对应的色块，因此将目标配色参数对应的所有色块都确定为目标色块。69.在步骤s202中，由于不同配色参数对应的色块不同，所以不同配色参数的色值更新方法也存在区别。70.具体地，在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；71.举例来说，以系统页面更换品牌色为blue(#0000ff)为例，其对应的目标配色参数为“主色”，“主色”是可视色，对应了主色色阶板中的多个色块，包括primary-1、primary-2、…、primary-10等色块。可以将目标色值(#0000ff)作为主色色阶板的目标色，进行算法色阶运算，进而实现对主色色块primary-1至primary-10色值的更新。72.其中，算法色阶是一种色阶运算方法，输入一个目标色进行色阶运算，即可得到色阶板中各阶数对应的色块的色值，色阶通常来说可以分为10级，颜色由浅至深或由深至浅一次递进，当然也可以设置阶数例如20色阶、30色阶等。73.具体地，在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。74.举例来说，如果想要将系统页面中的标题字的颜色改为dimgrey(#696969)，确定目标配色参数为“标题色”，“标题色”是中性色，对应title色块，则将目标色值#696969替换原来title色块的色值以完成完成更新。75.基于上述方法，设计人员预先设计好一些配色科学合理的色块用于后续的取色，能够避免开发人员随意取色造成的页面过于花哨，提升用户的页面阅读体验。76.在步骤s103中，根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；77.具体地，基础配色文件中取色变量确定了该页面中各页面元素与其依赖的全局配色参数文件中色块之间的映射关系，通过调用取色变量可以将页面元素映射到全局配色参数文件中的色块，从而从目标全局配色参数文件中取到该色块对应的色值。78.图3示意性示出本公开示例性实施例中一种确定取色变量对应色值方法的流程示意图。参考图3所示，所述根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值，包括：79.步骤s301，确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；80.步骤s302，提取所述目标取色变量对应的目标色块信息；81.步骤s303，从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。82.具体来说，在步骤s301中，当需要进行页面调整后，首先可以确定需要调整颜色的目标取色变量。目标取色变量可以根据目标配色参数来确定，之前已经介绍配色参数主要分成可视色和中性色两大类。若目标配色参数为可视色，那么可能会涉及多个目标取色变量，例如当改变主色primary时，所有引用primary的取色变量都是目标取色变量，例如var(‑‑primary-1)、var(‑‑primary-5)等取色变量都需要重新确认色值；而如果目标配色参数为中性色，那么可能涉及该中性色对应的某一个目标取色变量，例如当改变标题色title时，只需要重新确认var(title)的色值。83.在步骤s302中，不同目标配色参数，其对应目标取色变量的目标色块信息也有所区别。84.需要说明的是取色变量时基于色块信息创建的，因此可以根据取色变量得到对应的色块信息。具体地，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数。85.由于可视色是具有色阶的，所以目标色块的信息不仅包括对应的可视色名称，还包括在其色阶中的阶数。举例来说，var(‑‑primary-5)中包括了可视色名称“primary”以及色阶阶数“5”，即对应于primary色阶板中的第5阶色块。86.具体地，在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。87.不同的中性色对应不同的色块，因在在目标配色参数为中性色时，其对应的目标色块信息可以包括中性色名称。例如var(title)中包括中性色名称“title”，对应于“title”色块。88.在步骤s303中，从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。89.由于目标全局配色参数文件中已经将色块的色值进行了更新，所以步骤s303中根据目标色块信息查找对应的色块即可得到目标取色变量对应的色值，至此得到用于页面展示的目标配色文件。90.基于上述方法，在页面配色开发时用具有业务含义的取色变量代替使用颜色原值，统一设置取色接口，一方面当原型配色风格有变动时配置的基础配色文件的工程代码不需要进行改动，可谓一劳永逸，提高页面颜色调整的效率，降低后期维护成本；另一方面将设计人员进行配色设计与开发人员代码开发分隔开来，配色的逻辑由设计人员进行制定与管控，开发人员在开发过程中到此系统中获取相应场景下的配色即，两者互不影响也能实现页面的颜色调整，对开发人员来说也不需要纠结取何种色值，开发效率更高，对设计人员来说可以在不通知开发人员的前提下也能随时调整配色参数，减少人员的沟通成本，。91.在步骤s104中，利用所述目标配色文件进行所述目标页面的页面展示。92.具体而言，目标配色文件与传统的配色文件相当，其中包含可该目标页面各页面元素的具体的色值，按照色值进行页面展示，即可完成对页面颜色的调整。93.基于上述方法，不论页面颜色如何调整，都只需要预先配置一份包括取色变量的基础配色文件，其中包括了各页面元素与其依赖的全局配色参数文件中色块之间的映射关系，在颜色调整时仅需要使用同一套取色系统的全局配色参数文件进行色块色值的更新得到目标全局配色参数文件，便可根据目标全局配色参数文件和预先配置的基础配色文件进行取色变量的赋值最终实现页面的颜色调整。所以在页面调整时仅需要维护全局配色参数文件中色块的色值，大大减少了页面调整的代码开发工作量。94.在本公开的一个实施例中，在所述响应于目标页面的颜色调整指令之前，所述方法还包括：配置所述全局配色参数文件；基于所述全局配色参数文件配置所述目标页面的基础配色文件。95.图4示意性示出本公开示例性实施例中一种配置全局配色参数文件方法的流程示意图。参考图4所示，所述配置所述全局配色参数文件，包括：96.步骤s401，设置配色参数；其中，所述配色参数包括可视色和/或中性色；97.步骤s402，创建所述配色参数对应的色块，并配置所述色块对应的默认色值。98.设计人员可以根据web前端中后台管理系统特征，对系统配色发方案进行梳理枚举出基础的配色参数。99.在本公开的一个实施例中，配色参数可以包括可视色，可视色即通常意义上的除黑白灰之外的彩色，能够体现页面的颜色风格。100.可视色可以包括主色，即对应整个页面的颜色风格。例如不同品牌有不同的品牌色，“京东”为红色，“百度”为蓝色等等，还例如不同页面主题有不同的主体颜色，像护眼主题风格为绿色，或者梦幻主题主要为紫色等等。101.可视色还可以包括辅助色，辅助色大多以功能为主，代表了明确的信息以及状态，比如在进行系统运行成功、出错、提醒等情况时，会采用常见的颜色表示，比如运行成功显示为绿色、运行出错显示为红色等等。102.具体地，辅助色例如提醒辅助色(info)、成功辅助色(success)、警告辅助色(warning)、出错辅助色(error)、失败辅助色(debug)等。103.在辅助色的设计中，色板的运用原则上优先保证准确性，考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体，帮助有色盲色弱的人群也能在系统可视化界面中获取洞见。104.在本公开的一个实施例中，在配色参数为可视色时，所述创建所述配色参数对应的色块，并配置所述色块对应的默认色值，包括：配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。105.具体而言，可视色中各主色与辅助色都可以使用同一套算法公式得到对应的色阶板，进而从色阶板中获得对应的次要色来进行合理配色。因此，在配置可视色的色块时，可以简化为配置该可视色色阶板对应的目标色。106.表1为本公开示例性实施例中一种可视色与默认色阶值的映射表。如表1所示，设计人员可以根据使用习惯配置各可视色对应目标色的默认色阶值。107.表1可视色与目标色值的映射表108.可视色primaryinfosuccesswarningerrordebug默认色阶值#2b67ff#5470c6#91cc75#fac858#e66#7c8ca7109.各可视色根据其对应的色值即可计算出可视色色阶板得到各色块对应的默认色值。110.在本公开的一个实施例中，除了这些常见的辅助色，还可以包括图例辅助色。111.例如在饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等场景示意时，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性。这时辅助色可以采用另一种可视化图例中常见的色板，即分类色板来代替色阶板。112.常见的一套分类色板中包括基础10色，例如geekblue、cyan、yellow、red、daybreakblue、green、orange、purple、magenta、grey。113.还例如在表示排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等场景时，可以采用顺序色板。顺序色板一般使用同一或近邻色相，通过透明度或饱和度的简便，常用来表示同一事物中的数值大小或梯度变化。单一色相渐变称之为单色顺序色板，人眼可识别的色彩数量为5～7各，为保证信息的最佳识别度，尽可能的克制使用颜色的数量。114.在本公开的一个实施例中，配色参数可以包括中性色，中性色指白色、黑色和由白色黑色调和形成的各种深浅不同的灰色。可以按照一定的变化规律排成一个系列，色度学上称此为黑白系列，合理的选择中性色能够零页面信息具有良好的主次关系，有助于提升阅读体验。115.具体地，中性色例如标题色(title)、正文色(content)、次要色(subcontent)、边框色(border)、失效色(disabled)、表头色(tableheader)、卡片色(carbackground)、背景色(background)、分割线(dvider)、白色(white)、黑色(black)、阴影色(shadowcolor)等。116.表2为本公开示例性实施例中一种中性色与默认色值的映射表。如表2所示，设计人员配置的各中性色对应的默认色值。117.表2中性色与默认色值的映射表118.中性色titlecontentsubcontentborder默认色值rgba(0.0.0.0.85)rgba(0.0.0.0.65)rgba(0.0.0.0.45)rgba(0.0.0.0.15)中性色disabledtableheadercarbackgroundbackground默认色值rgba(0.0.0.0.06)#fafafa#fff#f3f6f9中性色dviderwhiteblackshadowcolor默认色值rgba(0.0.0.0.1)#ffffff#000000rgba(0.0.0.0.2)119.需要说明的是，通常页面可以采用浅色和深色两种模式，因此可以配置两种模式下的全局配色参数文件，在实际使用过程中根据需要选择对应的浅色或深色的全局配色参数文件生成目标全局配色参数文件，也可以只设计一种模式的全局配色参数文件，当目标页面为不同的模式，将全局配色参数文件进行转变即可。120.在全局配色参数文件配置完成后，得到globe.less文件，其中包括了许多色块，以及各色块对应的色值，形式如下：121.globe.less122.‑‑info1:色值1123.‑‑info2:色值2124.‑‑info3:色值3125.…126.图5示意性示出本公开示例性实施例中一种配置基础配色文件方法的流程示意图。参考图5所示，所述基于所述全局配色参数文件配置所述目标页面的基础配色文件，包括：127.步骤s501，确定所述目标页面中页面元素对应的配色场景；128.步骤s502，从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；129.步骤s503，基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。130.具体来说，在步骤s501中，在进行页面中各页面元素颜色的取色时，首先需要确定该页面元素对应的配色场景，即该页面元素拟定使用什么颜色。例如该页面元素的配色场景为文字标题、或者是目录配景色。131.在步骤s502中，根据页面元素的配色场景从全局配色参数文件中查询对应的色块，得到色块信息以创建取色变量。132.在实际操作过程中，为了方便创建取色变量，根据全局配色参数文件生成取色系统并将各色块按色值进行显示，开发人员从取色系统中查找对应的色块，鼠标点击该色块则取色系统自动提取该色块的色块信息创建取色变量，并完成变量复制，系统提示“已复制：var(xxx)”表示该取色变量已复制，然后将复制的取色变量贴粘到程序代码所使用的位置以进行基础配色文件的开发。133.在实际操作过程中，由系统框架加载程序将lessjs变量按照相应的计算公式转换成css中的var变量，最终形成.css文件作为该页面的基础配色文件。134.图6示意性示出本公开示例性实施例中一种浅色模式下取色系统的界面示意图。参考图6所示，取色系统将各色块按照浅色模式下的色值进行显示。135.例如取色系统中61区域展示了关于可视色中“品牌色”，即“主色”的相关信息。其中611为预设的取色规则，也就是预设的配色场景与色块之间的映射关系，例如品牌色使用primary色，即primary-6色块，品牌selectedbackground使用subprimary，即primary-2色块，品牌hover使用lightprimary，即primary-5色块，品牌active使用darkprimary，即primary-7色块。136.取色系统中62区域展示了关于可视色中“辅助色”的相关信息。其中包含了多个621辅助色例如info色、success色、warning色、error色、debug色，每一种辅助色其下对应了色阶板中的不同色块，图中为省略显示的色阶中的三个阶数的色块，事实上辅助色和品牌色类似，都可以具有10个色阶。137.取色系统中63区域展示了“中性色”的相关信息。其中包括多个中性色块631，例如title、content、subcontent、border、disabled、tableheader、carbackground、background、dvider、white、black、shadowcolor，并且各色块具有相应的色值。138.取色系统中64区域还展示了图例辅助色的相关信息。其中641展示了分类色板中常见的基础10色的色块，包括geekblue、cyan、yellow、red、daybreakblue、green、orange、purple、magenta、grey，642、643和644还分别显示了三种使用图例辅助色的用法示例，642为应用在饼状图中，643为应用于柱状图中，644为应用于消息界别或规则类型的显示。645为顺序色板的色块，不同颜色下顺序色板645不同，646还显示了顺序色板的用法示例。139.取色系统中还包括65区域，即颜色调整区域，其中651区域为选择目标配色参数区域，652区域为选择目标色值区域。在65区域选择目标配色参数和目标色值即可完成该取色系统中各色块的色值更新，进而用于页面的基础配色文件中取色变量色值的确定。140.图7示意性示出本公开示例性实施例中一种深色模式下取色系统的界面示意图。参考图7所示，展示了深色模式下取色系统的各色块。与图6类似，显示了包括“主色”以及“中性色”等的色块信息，两者的区别仅在于不同模式下对应色块的色值不同，例如浅色模式下背景为白色，文字为黑色，而在浅色模式背景为黑色，文字为白色，但取色的变量和取色逻辑都是完全相同的。141.在确定配色场景时，可以查看该页面有没有设计人员预先开发的页面原型图，页面原型图是设计人员与开发人员进行沟通的产物，预先设计好了各元素配色场景以及对应的配色方案，开发人员可以按照功能原型图还原配色方案来查询对应的色块。142.在步骤s503中，和传统的配色文件开发相似，只是在配置页面元素的色值时需要从取色系统中复制对应的变量。143.图8示意性示出本公开示例性实施例中一种页面元素与取色变量之间对应关系的示意图。参考图8所示，其中解释了该页面中每个页面元素所对应的取色变量。144.例如页面左侧导航栏，其配色场景为目录背景色，对应tableheader色块，所以取色变量var(‑‑tableheader)；页面右侧的背景配色场景为页面背景色，对应black色块，取色变量为var(‑‑black)；还例如不同文字对应的取色变量不同，有var(‑‑content)、var(‑‑white)、var(‑‑subcontent)等等。145.当然，图8所示的应用场景仅是示例性的公开，在不同的应用场景下，需要配置的元素以及各元素对应的取色变量有所不同，基于本公开的发明构思延伸出的配色结果也应当属于本公开保护的范围。146.在本公开的一个实施例中，所述方法还包括：预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。147.具体地，设计人员为了规范和统一页面的取色规则，可以预先设定一些配色场景和色块之间的映射关系，来方便开发人员进行取色。148.举例来说，通常品牌色可以选择primary色阶板由浅至深的第6阶色，即“品牌色”对应“primary-6”色块。149.还可以是一些通用的取色规则，例如配色场景与色阶阶数的映射关系。举例来说，dom元素的background常对应于色阶板中的第2阶色，可以以sub前缀标记，例如subprimary，即primary-2，或者是subinfo，即info-2；还比如hover常对应于色阶板中的第5阶色，前缀以light标记；或者active常对应于色阶板中的第7阶色，前缀以dark标记。因此，以配色场景为该元素需要使用“品牌hover”色为例来说，则查询到与全局配色参数文件中“primary-5”色块对应。150.基于上述方法，通过映射关系来设计合理的配色方案，规范取色逻辑，不仅能够快速定位对应的色块，最终得到的页面颜色风格也能够统一，有利于提升用户的阅读体验。151.在本公开的一个实施例中，在js中使用，需要引入工具包，并将var函数设置到window对象上，做为全局函数。这样能够避免声名的变量不能在js代码块、.css文件、dom元素style属性、vue的template块中使用的缺点，同时浏览器也可以直接识别var变量，而不需要webpack将定义的变量编译成最终具体的色值。152.图9示意性示出本公开示例性实施例中一种页面颜色调整装置的组成示意图，如图9所示，该页面颜色调整装置900可以包括响应模块901、更新模块902、确定模块903以及展示模块904。其中：153.响应模块901，用于响应于目标页面的颜色调整指令，获取所述颜色调整指令对应的目标配色参数的目标色值、全局配色参数文件以及所述目标页面的基础配色文件；154.更新模块902，用于基于所述目标配色参数的目标色值更新所述全局配色参数文件中色块的色值得到目标全局配色参数文件；155.确定模块903，用于根据所述目标全局配色参数文件确定所述基础配色文件中取色变量对应的色值得到目标配色文件；156.展示模块904，用于利用所述目标配色文件进行所述目标页面的页面展示。157.根据本公开的示例性实施例，所述更新模块902用于确定所述全局配色参数文件中与所述目标配色参数对应的目标色块；基于所述目标色值更新所述目标色块的色值。158.根据本公开的示例性实施例，所述更新模块1第一更新单元用于002包括第一更新单元和第二更新单元，所述在所述目标配色参数为可视色时，基于所述目标色值更新所述可视色对应的色阶板以更新所述可视色对应目标色块的色值；所述第二更新单元用于在所述目标配色参数为中性色时，将所述目标色值更新为所述中性色对应目标色块的色值。159.根据本公开的示例性实施例，所述确定模块903用于确定所述基础配色文件中与所述目标配色参数对应的目标取色变量；提取所述目标取色变量对应的目标色块信息；从所述目标全局配色参数文件中查询与所述目标色块信息对应的色块的色值作为所述目标取色变量对应的色值。160.根据本公开的示例性实施例，在所述目标配色参数为可视色时，所述目标配色参数对应目标取色变量的目标色块信息包括可视色名称和色阶阶数；或者在所述目标配色参数为中性色时，所述目标配色参数对应目标取色变量的目标色块信息包括中性色名称。161.根据本公开的示例性实施例，所述页面颜色调整装置900还包括参数配置单元和页面开发单元，所述参数配置单元用于配置所述全局配色参数文件；所述页面开发单元用于基于所述全局配色参数文件配置所述目标页面的基础配色文件。162.根据本公开的示例性实施例，所述参数配置单元用于设置配色参数；其中，所述配色参数包括可视色和/或中性色；创建所述配色参数对应的色块，并配置所述色块对应的默认色值。163.根据本公开的示例性实施例，在所述配色参数为可视色时，所述参数配置单元用于配置所述可视色的默认色阶值；基于所述默认色阶值进行算法色阶运算得到所述可视色对应的色阶板；根据所述色阶板创建所述可视色对应的色块以及各色块对应的默认色值。164.根据本公开的示例性实施例，所述可视色包括主色和/或辅助色，所述辅助色包括提醒辅助色、成功辅助色、警告辅助色、出错辅助色、失败辅助色中的一种或多种。165.根据本公开的示例性实施例，所述中性色包括标题色、正文色、次要色、边框色、失效色、表头色、卡片色、背景色、分割线、白色、黑色、阴影色中的一种或多种。166.根据本公开的示例性实施例，所述页面开发单元用于确定所述目标页面中页面元素对应的配色场景；从所述全局配色参数文件中查询与所述配色场景匹配的色块信息，并基于取色函数和所述色块信息创建所述页面元素对应的取色变量；基于所述页面元素对应的取色变量进行页面开发得到所述基础配色文件。167.根据本公开的示例性实施例，所述参数配置单元还包括创建映射单元，所述创建映射单元用于预设基础配色场景与所述全局配色参数文件中色块信息之间的映射关系，以根据所述映射关系查询与所述配色场景匹配的基础配色场景进而得到所述色块信息。168.上述的页面颜色调整装置900中各模块的具体细节已经在对应的页面颜色调整方法中进行了详细的描述，因此此处不再赘述。169.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。170.在本公开的示例性实施例中，还提供了一种能够实现上述方法的存储介质。图10示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图，如图10所示，描述了根据本公开的实施方式的用于实现上述方法的程序产品1000，其可以采用便携式紧凑盘只读存储器(cd-rom)并包括程序代码，并可以在终端设备，例如手机上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。171.在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。图11示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。172.需要说明的是，图11示出的电子设备的计算机系统1100仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。173.如图11所示，计算机系统1100包括中央处理单元(centralprocessingunit，cpu)1101，其可以根据存储在只读存储器(read-onlymemory，rom)1102中的程序或者从存储部分1108加载到随机访问存储器(randomaccessmemory，ram)1103中的程序而执行各种适当的动作和处理。在ram1103中，还存储有系统操作所需的各种程序和数据。cpu1101、rom1102以及ram1103通过总线1104彼此相连。输入/输出(input/output，i/o)接口1105也连接至总线1104。174.以下部件连接至i/o接口1105：包括键盘、鼠标等的输入部分1106；包括诸如阴极射线管(cathoderaytube，crt)、液晶显示器(liquidcrystaldisplay，lcd)等以及扬声器等的输出部分1107；包括硬盘等的存储部分1108；以及包括诸如lan(localareanetwork，局域网)卡、调制解调器等的网络接口卡的通信部分1109。通信部分1109经由诸如因特网的网络执行通信处理。驱动器1110也根据需要连接至i/o接口1105。可拆卸介质1111，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1110上，以便于从其上读出的计算机程序根据需要被安装入存储部分1108。175.特别地，根据本公开的实施例，下文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1109从网络上被下载和安装，和/或从可拆卸介质1111被安装。在该计算机程序被中央处理单元(cpu)1101执行时，执行本公开的系统中限定的各种功能。176.需要说明的是，本公开实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasableprogrammablereadonlymemory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compactdiscread-onlymemory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。177.附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。178.描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。179.作为另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。180.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。181.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施方式的方法。182.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本
技术领域：
：中的公知常识或惯用技术手段。183.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
