将客户的品牌颜色变成Divi 5颜色系统

品牌颜色通常始于跨标题，按钮和背景的十六进制代码。最初，它足够简单，但是随着布局的增长，您通常需要较浅的颜色变化，悬停状态或互补的口音。手动管理这可能会变得凌乱。

Divi 5中的新颜色系统通过让您一次定义一个调色板并从初始调色板构建连接的阴影来更容易。即使设计演变，每种颜色都保持同步。在本指南中，您将学习如何创建灵活的可扩展颜色系统，以使客户网站上的所有内容保持一致。

了解Divi 5的颜色系统

如果您在Divi 4中使用了全球颜色，那么您已经知道定义一次颜色并在您的网站上应用它有多么有用。 Divi 5建立在相同的想法上，但是这次，它将颜色变成了与您缩放的完整系统。

订阅我们的YouTube频道

这是三个主要升级：

它从设计变量开始。您在变量管理器中的“颜色”选项卡中定义了品牌调色板，这些值将成为您的基础。定义后，它们可以在任何模块或部分中使用。而且，当品牌向下发展时，您只需要在一个地方更新变量即可。与它们相关的一切都可以自行调整。

第二个升级是HSL颜色过滤器。滑块允许您调整色调，饱和度和轻度，从而在使用音调和对比度时可以控制更多。

如果您的主要绿色对背景来说太苛刻了，则可以稍微软化它，调整亮度，并将该版本保存为其变量。这将是一种全新的颜色，但仍然与原始颜色相关。

这也打开了在关系中思考的空间，而不是孤立的价值观。您可以将变量链接在一起，以便一个人始终保持与另一个距离的一定距离，例如较暗，更轻，稍温暖或更柔和。这些称为相对颜色，这是第三个改进。

例如，悬停的颜色可以定义为比初级颜色要暗20％。如果主要颜色发生变化，则悬停状态会保持其关系而无需手动调整。

这个三部分的系统创建了一个灵活且扎根的颜色系统。您不仅一次应用一个模块；您正在建造一个调色板，可以根据需要进行移动，同时保持设计一致和清洁。

了解有关Divi新颜色系统的所有信息

如果您一直依靠十六进制代码，那么这就是工作流程开始受到限制的地步。这就是您转移到未来准备就绪的颜色系统的提示。

将客户的品牌颜色变成Divi 5颜色系统

现在您知道了Divi 5的颜色系统的工作原理，让我们浏览一个真实项目中的外观。在此示例中，我们从Divi库中导入了增强现实主页布局。

让我们构建一个场景。假设客户想添加互补的颜色，以平衡整个网站中使用的大胆绿色。与其在几个斑点中手动添加它，而是将其作为将布局转移到Divi 5的颜色系统的机会，因此如果再次询问，我们将来不必在将来进行手动更改。

如果您浏览布局，您会注意到在几个地方出现相同的绿色，例如标题，按钮和口音元素。每个都使用固定的十六进制代码。我们的目标是用颜色变量替换那些，并构建一个调色板，以稍后可以适应更改。

通常，更新这样的布局将意味着手工编辑每个模块。但是在接下来的几个步骤中，我们将使用颜色变量，HSL过滤器和连接的颜色逻辑来构建更稳定的东西。您可以遵循相同的布局或将项目用作基础。

1。保存客户的主要颜色作为设计变量

如果您的客户已经共享了新的十六进制代码，或者您坚持使用现有的品牌颜色，则第一步是将其添加到Design变量管理器中。这将成为您的基本颜色，并将成为您周围构建的颜色变化的基础。

添加原色

首先，打开变量管理器，然后切换到颜色选项卡。

该面板可能已经包括主要，次要，标题和正文文本的默认值。在主要颜色字段中，输入主要品牌颜色的十六进制代码，然后单击“保存变量”。

添加次要颜色

接下来，我们将使用主要的基础创建此辅助颜色的相对版本。这样，基本颜色的任何未来变化都会自动延续。

在此示例中，由于我们正在添加互补的颜色来平衡现有的绿色，因此我们将其分配为辅助颜色。布局的背景是黑色的，因此此配对清晰脱颖而出。

如果您目前仅使用一种颜色，请随时将辅助插槽设置为黑色。

单击辅助色板打开颜色窗口。您所有保存的值将在全球颜色下列出，首先列出了主要颜色。

选择它。这将基本颜色作为您的起点。

现在，再次单击“色板”以重新打开窗口，然后打开颜色过滤器下拉菜单。这揭示了HSL滑块，您可以在其中调整色调，饱和度和轻度。

使用这些滑块来塑造新颜色。一旦您满意，请保存。就像这样，您有一个辅助颜色连接到初级颜色。

如果您想将次要颜色保持黑色，但仍将其链接到主颜色，请将轻度和饱和度均匀滑动至-100。

要创建一个较暗的阴影，请将色调和饱和度保持原样，并仅降低轻度。

在这一点上，您可以自由实验。调整值，直到音调适合您的设计。无论是新颜色与品牌调色板柔和融合还是作为对比的脱颖而出，它都将与初级链接并随之发展。

2。使用HSL调整构建支持颜色

有了您的主要和次要颜色，下一步是扩展调色板。这些辅助颜色为您的设计空间提供了呼吸的空间。在整个布局中，它们增加了灵活性，微妙的对比度和视觉节奏。

要创建这些变化，请打开HSL面板并调整滑块：

• 为需要对比的部分或背景创建较浅的阴影，而不会引起人们的注意。
• 在需要脱颖而出的按钮，悬停状态或大胆的头条新闻中，使用稍微暗的音调。
• 将色调或饱和度稍微移动以形成重音颜色。这种颜色非常适合分隔线，图标或其他小型视觉亮点。

我们将向您展示如何做一次，您可以遵循相同的方法来定义所需的所有新颜色。假设我们想制作悬停版本的次要颜色。我们将创建一个新的颜色变量，给它一个清晰的名称，调整滑块以使音调正确并保存。

现在保存了变量，我们可以像其他任何颜色一样将其应用于按钮的悬停状态。

当您添加支持颜色时，尝试将它们视为品牌的音调表达，反映了不同级别的重点，对比度或情绪的变化。例如，柔和的音调适合背景，大胆的声音引起人们对呼唤的注意，而柔和的音调对于叠加或次要文本很有用。

从技术上讲，您可以使用十六进制代码手动创建所有这些。而且，如果您只是建立一个一页的网站，那就可以了。但是，当您的客户想改变核心颜色时，每个快捷方式都会开始显示其限制。我们的意思是，您不会跟踪网站上使用背景阴影的地方。在这种情况下，将这些变体构建为连接变量需要更多的时间，但是一旦它们到位，无论发生多久的情况，它们都会保持您的设计一致。

3。用变量替换现有的静态颜色

保存了新的颜色变量，是时候替换整个布局中使用的硬编码的十六进制值了。在这里，从静态到动态的移动开始产生真正的差异，不仅是一致性，而且在随着时间的推移保持设计变得多么容易。

首先，扫描了仍使用固定颜色值的任何元素的布局。这可能包括按钮，标题，背景，图标或部分分隔线。现在，手动应用品牌颜色的任何地方都是将其连接到新系统的机会。

为此，Divi为您提供了两个选择：扩展属性并查找和替换。两者都让您快速更新多个元素，但是每个元素都在略有不同的情况下发光。

• 当您已经将正确的变量应用于一个元素并希望匹配其余部分时，请使用扩展属性。
• 当您想在出现的任何位置交换特定的十六进制值时，即使在不同元素上应用，都可以使用查找并替换。

让我们从扩展属性开始。

使用扩展属性

在此示例中，我们希望将新的辅助颜色分配给布局中的所有H2S。我们将首先将其应用于其中之一。

完成此操作后，我们将右键单击元素并选择扩展属性。在出现的面板中，我们将将范围设置为整个页面，将元素类型设置为文本。

一键单击，页面上的每个H2都会采用相同的辅助颜色，这将保持同步，因为如果该基本颜色变化，则与您的主颜色绑定。

使用查找并替换

现在，让我们尝试查找和替换，当您想在整个网站上交换特定的颜色值时，它特别有效。

在这种情况下，我们想更新身体文本颜色。为此，我们将转到“设置”>“设计”>“身体文本颜色” ，右键单击，然后选择查找和替换。然后，我们将悬停在替换值字段上，然后选择我们的新变量。

这就是全部。现在，使用您的新变量更新该旧颜色的每个实例。

您无需在这里遵循单一的方法。扩展属性是您已经手动更新一个模块的速度更快的方法。如果您仍在使用静态十六进制代码并想批量更改它们，请查找和更换将有助于您快速移动。

选择哪种方法使清理更容易。完成此操作后，您将看到该系统的真正好处：当您只需更改一种颜色时，设计的响应方式。

测试您的新配色方案

您所做的一切都与设置有关。现在是整个设置开始显示其值的时候。

使用您的系统，请尝试更改主要颜色。整个布局将在几秒钟内做出响应 - 背景，按钮，悬停效果，任何其他连接的元素都会立即更新。

未来的更新也比以往任何时候都容易。假设您的客户想从霓虹灯绿色转移到较温暖的黄色，这意味着要更新整个网站，每个页面以及每个模块。

听起来很痛苦，但不适合您。您只需更新主颜色，然后即将进行网站的其余部分。

也许是黑色星期五，他们要求采用红色 - 黑色配色方案。您可以将初选更新为金色，然后将次级调整为更深的红色。布局立即适应了最后一个细节。

在某些情况下，品牌颜色可能保持不变，但是次要需要刷新。这只是调整HSL滑块的问题。无需单独触摸每个按钮或背景。

这么多的色彩工作是维持平衡。即使核心颜色变化，您也可以保持变化对齐。该系统为您提供了一种控制音调，对比度和重点的方法，而无需追溯您的步骤。

请记住，我们在这里所做的只是一页。由于设计变量是全局的，因此此设置扩展到您的整个网站，包括标题，页脚，博客文章，着陆页以及与您的调色板连接的任何其他内容。

这意味着将来的每个更新，无论是季节性活动，品牌刷新还是新的色彩方向，都从一个地方开始。您可以更新一些变量，并观看所有内容与您的新配色方案匹配。

Divi使您的颜色工作流程未来

选择蓝色阴影并不难。很难使蓝色在数十个模块，布局，页面和广告系列中保持一致，并以后对其进行更新，而不会在此过程中破坏某些内容。

Divi 5完全简化了这一点。借助新颜色系统，HSL过滤器和设计变量之类的工具，您可以从一个地方管理整个视觉标识。 Divi 5的承诺知道，知道每种颜色都将保持一致且易于更新。

这只是我们过去几个月来制作的众多产品之一，包括循环构建器，Flexbox布局以及现代网络设计师的完全重新构想的界面。如果您还没有探索它们，那么现在是完美的时光。