比较Divi 4和Divi 5的彩色选择器

颜色会在读取单个单词之前设定音调，但是传统的彩色选择器使得很难实现真正的品牌一致性。您通常会获得猜测和近似近似值，而不是精度。

这就是为什么Divi 5完全重新构想其颜色系统的原因。在这篇文章中，我们将将其直接与Divi 4的彩色拾取器进行比较，并展示它变得更强大和灵活。

彩色选择器比较

将它们并排放置，您会立即看到新界面的功能。 Divi 4的彩色选择器以其熟悉的彩虹频谱和拖放方式的方法为我们提供了很好的服务。

您会拖动白色圆圈来挑选颜色，使用十六进制代码，并通过保存，全球和最近的标签来组织物品。那些彩色色板上的白色三角形告诉您哪些是全球颜色。

除了外观外，Divi 4的彩色选择器还有一个良好的基础。 Magic Color Tool非常聪明，从您的页面颜色和最近的选择中提取，以提出真正合作的调色板。这种节拍每次都会从头开始。

Divi 4受到限制

但是，并非所有人都是完美的。一切都使用HEX或RGBA代码。获得蓝色的更轻版本意味着猜测或使用另一个应用程序来弄清楚它。如果您的品牌通常比主要品牌颜色要深20％或40％的颜色，那么Divi 4就无法为您做到这一点。

每种颜色都活着。您无法构建智能色彩系统，其中颜色在Divi本身内相互关联。建立适当的对比度比Divi以外的手动工作。

Divi的5个视觉更改是什么

Divi 5保留了视觉彩色选择器，但增加了精确的滑块，并提供了更多选项（我们将进一步讨论）。全局选项卡演变为一个动态变量图标，该图标直接连接到Divi的变量系统，该系统包括颜色。

色板本身变得更聪明。它们实际上向您展示了您正在使用的颜色类型以及它如何连接到系统。

您看到的是Divi从单个颜色挑选到颜色系统。 Divi 4是为“我需要这种特定蓝色的”而建造的。 Divi 5是为“我需要比原色轻20％的蓝色，并且完全改变品牌颜色时会自动更新。”

界面必须更改，因为它的作用更改。

Divi 5的新彩色选择器

我们的团队重建了颜色系统，因为旧方法无法处理现代设计工作流程。这个新的采摘器围绕色调，饱和度和轻度（HSL），相对颜色关系以及与Divi 5的可变系统的深入集成。

现在，您可以建立一个连接的颜色系列，而不是使用隔离的十六进制代码，而改变一种颜色会自动更新所有相关的变体。有用于色调，饱和度，轻巧和不透明度的单独滑块，可让您进行精确的调整。该界面通过视觉指示器准确显示您正在使用的颜色类型。

颜色色板现在显示有关自己的信息。您可以查看颜色是静态值，变量还是具有HSL修改的相对颜色。该系统显示您需要知道的所有颜色细节。

新系统如何工作

相对颜色从基本色变量开始，允许您应用变体。选择主要的蓝色变量，将轻度降低20％，然后将其作为“皇家深蓝色”变量。

Divi 5的HSL彩色选择器与Divi 4的彩色选择器

这两个系统都可以帮助您在网站上管理颜色，但以完全不同的方式工作。理解此差异解释了为什么界面必须如此巨大的变化以及为什么新方法加快建筑物的速度。

Divi 4的全球色彩如何工作

Divi 4的全球颜色像基本的调色板系统一样工作。节省您的品牌一次，然后在需要确切的阴影时单击它。后来，将那个蓝色的蓝色换成不同的蓝色，并在整个网站上观看每个按钮，标题和背景更新。

大多数人以这种方式建立了三到四个主要品牌颜色。它可以通过十六进制代码来狩猎或试图记住您是否使用＃2E86C1或＃3498DB进行链接。

当您有八种全球颜色时，问题出现在后来，不记得为什么您保存了特定的灰色阴影。是文字吗？边界？背景叠加？全球颜色没有标签或描述可以慢跑您的内存。

为什么Divi 5移至设计变量

现在，设计变量不仅可以处理颜色。字体，间距，图像和文本字符串都可以得到相同的处理。一切都生活在一个变量管理器中，而不是在不同的面板周围漂浮。

每个变量都有专有名称和描述。您可以称其为“全球颜色3”，而是称其为“标题文本灰色”或“微妙的背景覆盖”。六个月后，您将确切知道它的用途。

但这是事情变得有趣的地方。变量可以互相引用并形成关系。将您的主要绿色作为基础。创建一个“燃烧的苔藓”，以绿色并降低其亮度。然后，建立一个“阴影（烧成苔藓）”，将这种燃烧的苔藓颜色带入，并将不透明度降至15％。

而且，当然，如果将主要绿色更改为橙色，则所有三个变体都会自动更新。燃烧版本比您选择的任何颜色都没有明亮，阴影会相应地适应。关系坚持。

实践的关键区别

全球颜色意味着在多个斑点中具有相同的颜色。变量意味着具有适应颜色关系的变量。悬停状态保持与基本颜色的连接。阴影颜色与您的品牌调色板有关，而不是作为随机灰色生活。该系统可以维护这些连接，而无需您进行额外的工作。

在Divi 4与Divi 5中设置您的颜色系统

创建适当的颜色系统可以确定您的网站看起来是专业的还是随机选择的拼布。这两个Divi版本都提供了组织您的颜色的方法，但是它们的方法并没有什么不同。这是在每个版本中构建颜色系统的方法，以及为什么该过程对您的设计工作流很重要：

在Divi 4中设置颜色

您的颜色选择塑造了访问者如何体验您的网站。看看颜色管理分区4的方法：

1。添加您的全球颜色

Divi 4的颜色设置依赖于全球颜色系统和手动组织。您将首先导航到任何元素的颜色选项，然后通过导航到“全局”选项卡，单击“颜色选择器”旁边的Plus图标，或通过单击它来编辑现有的全局颜色来创建全局颜色。该界面使您可以直接输入十六进制代码或使用Visual Picker选择颜色。

您是否已经使用了要转换的颜色？右键单击它，然后选择“转换为全球”。这为您的全局调色板添加了精确的颜色，并切换模块以使用全局版本。当您意识到应该从一开始就做一些全球性的事情时，这将非常有帮助。

魔术颜色建议

Divi 4的Magic Color功能从您现有的设计选择中构建了协调的调色板。该工具没有猜测哪种颜色共同起作用，而是根据您已经使用的内容创建建议。

在您的活跃颜色的眼培中寻找三个点（椭圆）。单击这些点以获取一堆调色板建议。 Divi查看了您在页面上和最近项目中已经使用的颜色，并显示了应该共同起作用的组合。

2。应用您的全球颜色

一旦设置了一些全球颜色，使用它们就非常简单。单击您要应用颜色的任何模块。然后，前往“设计”选项卡并找到要更改的颜色设置。

单击全局以查看您的全局调色板。单击任何全局颜色色板，它立即适用于您的模块。

3。修改您的全球颜色

这是事情变得有趣的地方。当您想更改全球颜色时，您无需浏览每个使用它的模块。只需转到任何颜色设置，单击“全局”选项卡，然后找到要编辑的颜色。

在Divi 5中设置您的颜色

在Divi 5中构建适当的颜色系统需要四个步骤。按照这种方法，每当您需要稍微不同的阴影时，都会猜测颜色代码的旧方法：

1。创建您的基本颜色变量

打开设计变量管理器，并将您的主要品牌颜色添加为现有的主要和次要颜色变量。您还可以添加更多颜色，例如第三纪或口音颜色。这些成为您的基础颜色。您的基本颜色应代表您的主要品牌调色板，该品牌定义您的视觉标识。

2。从您的基础建立相对颜色

现在，您可以创建链接到基本颜色的颜色变化。在设计变量管理器中添加新颜色，然后选择您的基本颜色。

使用HSL滑块对其进行调整：标题文本降低轻度25％，体文文本为20％；对于悬停状态，将轻度提高20％，或改变静态背景的饱和度。给出这些变化的清晰名称，例如“深橙色”和“明亮的深红色”，或“悬停状态（原色）”，“静音背景（次要颜色）”。

所有设计变量都可以堆叠，因此您可以从创建的变量中构建更多颜色。它们都与系统保持联系。

如果以后更改基本颜色，这些相关颜色会自动更新，以保持关系完整。

3。将变量应用于您的元素

使用任何颜色字段中的动态内容图标来访问您的变量。该界面显示每种颜色是静态的，变量还是具有HSL修饰的相对颜色。

从您有组织的颜色系统中挑选，而不是创建破坏一致性的随机一次性颜色。

当您更改任何基本或构造颜色的属性时，从这些颜色中继承的一切都会自动适应新的更改。当您决定品牌刷新时，无需手动擦洗和更换颜色。

4。构建预设，参考HSL颜色变量

使用选项组预设为特定设计零件制定策略。这些预设与元素预设不同。选项组使用您的变量预设目标样式组，例如背景，边框或文本颜色。

使用基于主颜色的阴影颜色变量将阴影作为选项组预设。

在列，部分，行和模块上使用此预设。

为不同的颜色创建单独的选项组预设：一种带有重音颜色的边界，另一个用于辅助颜色的文本等。将这些预设跨元素混合而不更改其他样式。

元素预设保存完整的模块设置，包括内容和所有样式。在选项组预设和所使用的颜色变量中制作元素预设。立即应用它可以给您完全相同的按钮。

5。在您的网站上推出颜色

扩展属性功能通过让您在元素之间复制设计属性来进一步。当您使用变量完善图标的配色方案时，可以将这些属性扩展到行，页面或整个站点之间的其他图标。

这可以保持您的颜色关系，同时在没有手动工作的情况下散布一致的样式。

Divi 5的查找和替换功能速度加快了带有静态颜色的现有站点的转换过程。右键单击任何颜色字段，然后选择“查找和替换”。

将范围设置为针对特定元素，整个部分或整个页面。在“替换为”下，从“全局”选项卡中选择新变量。检查“替换所有找到的值”，以将该颜色的每个实例与您的变量交换。

当将较旧的设计迁移到新的颜色系统时，这可以很好地工作。您可以用一个一致的变量在几秒钟内替换数十个相似但不相同的橙色。

所有方面都可以一起工作：建立您的颜色变量，使用查找并替换以清理现有的不一致之处，然后在构建新部分时使用扩展属性来维护设计标准。然后，正常构建页面，因为可以使用选项组和元素预设轻松应用样式。

新的彩色选择器将适合您的工作流程

Divi 5的颜色系统解决了多年来项目减慢项目的工作流问题。您不再需要使用外部工具来找到正确的阴影。 HSL滑块可以为您提供精确的控制，而不会离开建造者。

您的颜色决策通过设计变量保持联系。当您更改主要品牌颜色时，相关颜色在保持关系的同时会自动更新。这可以手动追捕您创建的所有蓝色变化。

立即在Divi 5中尝试新的颜色系统！